How to Test Responsive or Mobile Views of Your Site
Layers changes its layout through what are called Media Queries in CSS. These allow the theme to apply specific rules based on the width of the browser or device screen versus trying to detect specific devices and loading a different theme or website altogether. You will see this referred to as Responsive design.
In Media Queries, we tell the browser to look at the screen or device width and then apply some styles. We can define a minimum screen size for those styles, a maximum, or both. This condition is what allows your theme to flexibly change on the fly. The screen size set in each query is called a breakpoint or threshold.
The below methods are recommended to properly test your theme’s mobile views. These ensure you view the correct thresholds for screen size, and/or emulate browser limitations that can affect how the site looks on a real mobile device to determine if you need to make adjustments or customizations.
There are two primary ways to test – in the browser (tests the CSS media queries and general layout adaptibility) and in an emulator/mobile browser. The first is useful for customizations or just to get a quick idea of what your content limitations are. The emulation/device test method is the most bonafide as it gives you a true idea of how mobile browsers parse the site code and interpret functionality to a touch screen.
Testing Media Queries
There are several ways you can test the mobile views of your site, including just resizing your browser window – but because breakpoints are so precise, we really recommend using a tool designed for the job which sets the window size for you.
The DevKit extension is designed to allow you to easily switch between desktop, tablet and mobile views in the Customizer, while simultaneously writing and testing custom CSS in an inline editor. By default, it is pre-programmed to work with the breakpoints we set in Layers. In other themes, you can set the breakpoints yourself to fit the theme.
Using the Browser Inspector
What if you need to design cusotmizations for a different device size, or add adjustments for special sizes not covered by Layers by default? If you use a webkit browser like Chrome or Firefox, you already have access to some robust testing tools by right-clicking your page and choosing Inspect or Inspect Element.
In Chrome, you can enable responsive modes by clicking the mobile icon at the left of the inspector toolbar, then select a device to see the standard size for that device.
In Firefox, the Responsive Mode icon is on the right side of the toolbar:
Use an Online Tester
There are also online resources such as responsinator.com and Google’s Resizer which load your site in a nice preview array, but it is much harder to use the inspector through these services if you are working on mobile customizations. Please also note that Google Resizer is designed to test mobile apps and only offers preset sizes for Android devices.
WordPress also has two mobile view icons in the Customizer that will shrink the preview to either 320px wide or 768px wide. These modes can test these two specific breakpoints in Layers or your site customizations only, and is not a thorough look at how the page will be rendered on all devices. For this reason we recommend using the other options mentioned in this article.
What to Look For
It is important to understand any limitations in the site you are testing. For example, Layers targets modern smartphones, retina devices and tablets specifically, and may not have specific support for super-small screens or devices with odd/proprietary screen resolutions. Tablets in landscape mode are also detected as desktop resolutions at that point, and will not trigger mobile-specific elements such as mobile navigation. Your plugins are also not affected by Layers’ responsiveness, so may not format well if they do not have their own responsive support.
These previews will help test the media queries only – they are not able to show you how a specific device will actually render your page. In the case of iPhones and iPads, Apple has a special version of Safari that works a bit differently from your desktop browser. For this, you need to test on an actual device, or using Emulation, explained next.
Test with Emulaton
Use this method to test how your site would appear on an iPhone or iPad in Mobile Safari. You may use this in combination with the above for automatic screen resizing (recommended). You can only do this reliably from a Mac device, as Safari is not maintained for Windows installs.
- Open Safari and choose Safari Preferences
- Click Advanced and check Show Develop menu in menu bar and close the Preferences window
- Click the page icon (develop menu) and choose Develop > User Agent > iPhone.
- This will emulate the iPhone version of Safari and let you see the mobile detection and layout.
- Load up your website
Use a Real Device
Nothing beats using an actual mobile device to test your site. This not only tests the responsive modes, but also shows you how your site renders and behaves in the device’s browser. If you don’t have access to an arsenal of tablets and smart phones, your local mobile service provider is an excellent place to go to try out the browser on the test devices.
Customizing Mobile Views
You may want to reduce font sizes, stack side-by-side elements into one column, or hide parts of your content on mobile phones. This can be done with a little Custom CSS and some media queries, explained in the following article:
Did you know?
Our friends at Jetpack are doing some incredible work to improve the WordPress experience. Check out Jetpack and improve your site's security, speed and reliability.