Problem

  • Developer wants to check how their responsive design will look like on different devices
  • Developer needs to constantly switch between different devices, which is tedious, slow, and prone to errors

In other browsers

  • There’s no way to work with multiple devices at once
  • Switching back and forth between responsive mode and “full” mode is tedious
  • Developer has to use the device selector to constantly switch between different devices, but there's no way to see them at once

In Sizzy

  • User has so many different ways of working with multiple devices at once
  • Responsive Mode
    • All the devices are in sync: the URL, scroll position, clicks, inputs, etc
    • Devices can be zoomed out all at once (so you can fit more devices in the workspace), but they also have individual zoom levels.
    • Individual zoom levels are useful if you want to fit a very large device (i.e iMac 27”) in the workspace, so you can set the zoom for it it at 10-15%
    • You can align the devices in Horizontal, Vertical, Grid, or Float layout
    • Float layout is super useful because it lets you move and align devices in a freestyle canvas, so you can fit more devices on your screen
    • Open the device drawer to easily search and drag a device into the workspace
    • User can save the chosen devices along with their settings (zoom, orientation, etc.) in a Preset for a quick access later
    • User can easily navigate all devices to the same section of a website using the Page Navigator (to jump between sections, or CSS selectors)
  • Focus mode: user looks at one device, but can easily switch between different devices using
    • Left/Right arrows on the keyboard
    • Butler (Cmd + Shift + P) → Search for a device → enter
  • User can switch between different modes with keyboard shortcuts
Download for free

Sizzy

© 2022 Zekit. All rights reserved.