Device previews: Woo360, Customizer, and beyond

There are so many different devices of every size out there that it's much easier to preview your site using a device simulator or emulator, and there are many of those around. The following list is ordered in terms of the likelihood of your pages being accurately rendered with all their customizations, and why in technical terms.

Woo360 Tools > Preview and WordPress Customizer preview

As of Woo360 2.0.6, using the keyboard shortcut P or clicking Tools > Preview while editing a Woo360 layout opens a preview of the page rendered in an iframe. This is the same as clicking the icons in the lower right corner of the Customizer panel.

Rendering in an iframe means the preview is as accurate as resizing a browser window. However, resizing a browser window isn't always an accurate representation of what you'll see on smaller devices.

Using Woo360 preview on the Advanced tab

When you change margins and padding settings on the Advanced tab of rows, columns, and modules, there is an icon to toggle the views from large to medium to small screen. This preview is not rendered in an iframe and may not be as accurate as using Tools > Preview, but this preview has also been improved in Woo360 Version 2.0.6 and may be adequate for a quick look.

Browser preview

Most browsers have preview-by-device simulation capabilities. For example, in Google Chrome in the Developer Tools panel, you can toggle Device Mode on or off. Once in Device Mode, you can choose specific device brands or customize the display height and width.

Note the warning in the Google Chrome Device Mode documentation:

Warning: Device Mode gives you a close approximation as to how your site will look on a mobile device, but to get the full picture you should always test your site on real devices. DevTools can't emulate the performance characteristics of mobile devices, for example.

Other device simulators and emulators

If you search the internet for device simulators and emulators you'll find a number of solutions. Sauce Labs has a good description of the difference between simulators and emulators.

Device emulators provide the most faithful virtual results but can be expensive and time-consuming. There are professional services that provide device simulators and emulators in the Cloud for a fee, which can be a big time saver.

If you're very serious about device testing, it's worthwhile to develop a device testing plan to decide in advance which devices you will test and how that testing will be done. If you certify specific devices as part of your client contract, it's also helpful to provide a clause about what you will do if there are problems in spite of certification and also set a time limit on the certification. Devices and software change so quickly that the situation can be quite different a month down the road.

If you're a developer, it's also worthwhile to decide at what point you will start your testing program to test your code. For example, you might not want to start tweaking custom CSS for mobile devices on the basis of the Woo360 preview, but you should decide how far you're going to go up the testing ladder before you decide how to change your code.