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