Three device icons sit directly in the toolbar next to the existing View controls. Clicking one updates the width/height fields and resizes the canvas. Manual inputs remain for custom sizes.
Example Event/ Simple, LightView
Quick Presets
Devices
whZoom100PageStickersVersion History
Template Details
Template Name
Simple, Light
Event Type
Dinner / Reception
Status
Draft
Last Edited
Apr 12, 2026
G
Join us for Dinner & Drinks
An evening of networking and celebration
When
Thursday, May 8, 2026 · 7:00 PM
Where
The Battery, 717 Battery St, San Francisco
Page Settings
Width1440px
Height900px
Background
Accent
Full-bleed hero
Show footer
Design Rationale
Quick-access icons for phone/tablet/desktop cover the most common use case -- one-click switching without leaving the toolbar.
Chevron dropdown preserves the full list of device presets already in the product (iPhone 14, iPad Pro, etc.) so no functionality is lost.
Active state uses brand-primary color for clear selection feedback. Selecting a device from the dropdown highlights the matching quick icon if applicable.
Manual width/height fields update automatically but remain editable, so power users can type custom values.
Pattern mirrors browser DevTools device toggle -- familiar mental model for anyone who has used responsive testing.
Option B
Device Dropdown Selector New
The View area becomes an enhanced dropdown showing common device presets, recent selections, favorites, and a custom dimension editor. The trigger button displays the current device at a glance.
Example Event/ Simple, Light
Recent
Desktop HD
1440 x 900
Common Devices
iPhone 15
393 x 852
☆
iPhone SE
375 x 667
☆
iPad
768 x 1024
☆
iPad Pro
1024 x 1366
☆
Desktop HD
1440 x 900
★
Desktop 4K
2560 x 1440
☆
Custom×
Zoom100PageStickersVersion History
Template Details
Template Name
Simple, Light
Event Type
Dinner / Reception
Status
Draft
Last Edited
Apr 12, 2026
G
Join us for Dinner & Drinks
An evening of networking and celebration
When
Thursday, May 8, 2026 · 7:00 PM
Where
The Battery, 717 Battery St, San Francisco
Page Settings
Width1440px
Height900px
Background
Accent
Full-bleed hero
Show footer
Design Rationale
Rich device library with real device names (iPhone 15, iPad Pro) eliminates guesswork about dimensions.
"Recent" section at the top surfaces the last-used device for quick repeat access.
Star/favorite system lets users pin their most-used presets. Favorited devices could persist across sessions.
Custom dimensions at the bottom handle edge cases without cluttering the main list.
Dropdown approach consolidates everything into one compact trigger button -- saves toolbar space compared to Option A.
Higher implementation cost but more scalable if the device list grows (e.g., Android devices, custom org presets).
Option C
Visual Device Frame Preview New
A "Device Frame" toggle enables visual device chrome around the canvas. A device strip below the toolbar shows clickable silhouettes. A rotate button flips orientation for phone and tablet.
Example Event/ Simple, LightViewwhZoom100PageStickersVersion History
Phone
375 x 812
Tablet
768 x 1024
Desktop
1440 x 900
Template Details
Template Name
Simple, Light
Event Type
Dinner / Reception
Status
Draft
Last Edited
Apr 12, 2026
G
Join us for Dinner & Drinks
An evening of networking and celebration
When
Thursday, May 8, 2026 · 7:00 PM
Where
The Battery, 717 Battery St, San Francisco
Desktop
1440 x 900
Page Settings
Width1440px
Height900px
Background
Accent
Full-bleed hero
Show footer
Design Rationale
Visual device chrome gives the strongest spatial context -- users see exactly how their page looks "in" a phone or tablet.
Device silhouette strip provides a visual picker that is more scannable than text labels or icon-only buttons.
Rotate button handles landscape vs. portrait for phone/tablet -- important for events that may be viewed in either orientation.
The frame is purely visual chrome: it wraps the same canvas content, so it does not affect the actual page dimensions or rendering.
Toggle lets users turn frames off when they want a clean preview without device chrome (e.g., for screenshots or presenting to stakeholders).
Highest implementation cost but most visually distinctive. May be more than needed for the typical use case of quick dimension checks.