How to Use Device Preview in the WordPress Customizer [VIDEO]

The original ticket to preview site responsiveness in the Customizer was opened over a year ago. After quite a bit of discussion, the device preview feature has landed in WordPress 4.5. If you’ve ever used WordPress.com’s admin interface—in particular, the Customizer—you’ll notice a striking resemblance to device preview in the self-hosted version of WordPress.

WordPress Device Preview Focuses on Simplicity

Previewing a responsive WordPress site is nothing new. Most browsers (notably, Chrome & Firefox) have had responsive previewing tools in place for quite some time. It’s a common feature included in most browser’s developer tools. With these examples already out there in the wild, WordPress had a decision to make. Should it mimic the UI of existing tools, or come up with something new?

After many screenshots were shared, icons drawn, and animated workflows presented, WordPress opted to once again stay true to its philosophy of decisions, not options. The WordPress Customizer is used just as much by everyday, non-technical users as it is by developers—arguably, even more so. Elaborate device dropdown menus & customizable screen sizes were dismissed in favor of a simple solution.

Only three options are available by default, and they’re intentionally ambiguous.
–wordpress.org

Here are a few more things to keep in mind with device preview:

• The 3 options provide a rough estimate of what your site will look like on various devices (it’s not exact)
• Device preview in the Customizer only works on larger screens. It will not work when editing a site on your mobile device.

How to Use Device Preview in WordPress 4.5

Step-by-step instructions for previewing your site’s responsiveness using the device preview feature in the WordPress Customizer:

1. Navigate to Appearance > Customize
2. Locate the device icons in the bottom-left corner of your screen
3. Click the icons to toggle between different views

Device Preview Sizes

• The desktop version will always fill up 100% of your screen
• The tablet version is set to 720px x 1080px
• The mobile version is set to 320px x 480px

These are fairly standard sizes for your average tablet & smartphone. WordPress decided to stay generic with the viewport sizes, which I think is smart. The UI gets too crowded, and the average user would get overwhelmed if too many options were presented.

You can also use the “Collapse” link to get a full screen view (without the left side panel). This is helpful if your responsive WordPress theme uses a full-page layout.

RELATED: How to Add Links in WordPress 4.5

WordPress Device Preview Video

Device Preview for Developers

A few things to note for WordPress developers:

• You can disable device preview using the following filter: add_filter( 'customize_previewable_devices', '__return_empty_array' );
• You can also add additional device preview buttons

What do you think of the new device preview feature in WordPress 4.5? Did the core team get it right? Is it too simple? Not enough device options? Would love to hear your thoughts in the comments.