Device Views

Pages can be viewed and edited in any resolution, allowing you to see your work up close and from afar, and anticipate how it will look across various screen sizes.

Pages are shown with an editable canvas. It can be moved around, zoomed, and will automatically grow in length to display all content. When published, a page with lots of content will be scrollable.

Zoom Tip:

• If you want to eyeball the finished product, use 100% zoom.

Toggling Views

Good interfaces are optimized for the various ways they can be experienced—on phones, tablets, laptops, desktops, TVs, and even larger screens. You can edit your canvas in any view, regardless of how it will get played back.

Select a View from the middle of the navbar, which represents a page width. New projects always start with three common views, based on popular devices:

• iPhone X—a mobile phone with 375px width.

• iPad Pro 12"—a tablet with 768px width.

• MacBook Air—a laptop with 1280px width.

The canvas height is for editing purposes only. It grows to show all content added to the page, even if that content goes below the fold on a real device.

Changing device views using the navbar.

Tips:

• It's best to edit your project for a primary view (i.e. mobile), where you expect most of your audience to be.

• When sizing blocks that sit directly on the page, you can use % values to be proportional to the page's width or height on a user's screen.

Modifying Views

To add, edit, or delete a view, select the View dropdown button from the navbar to open the Views menu.

Now you can:

• Add a new view using the ➕ button. Choose from popular devices and screen sizes, or select Custom View to give it a unique name and width.

• Modify an existing view by editing its name or width. The device icon is automatically assigned based on its width.

Remove a view by right-clicking its toggle in the navbar and pressing Remove. The last remaining view cannot be deleted.

Adding, renaming, and deleting views.

Notes:

• Devices can have varying pixel ratios—such as Apple products with retina displays—which makes content look sharper. The pre-defined device sizes in Designware use widths that represent what you or a browser actually sees, not the marketed resolutions.

• If you have a lot of views and they overflow the navbar toggle, move them left and right with the trackpad or mousewheel.