A theme determines the look of your site, often for years. This is why it is important to carefully consider a theme. Today’s main requirement is probably for a theme to be mobile-first. This blogpost looks into what mobile-first means, why it is important and how you can check whether your intended theme is suitable for mobile-first.
What does a mobile-first website mean?
The main requirement for a mobile-first website is that it’s responsive. Responsive means that the website adapts to the device used by the visitor to view the website. Screen size and resolution are obvious differences between smartphones, tablets, laptops and desktop PCs. Screens may even differ significantly within each category. As far as we’re concerned, this doesn’t just include screen size; the input is also important: think of (multi) touch screens, trackpads, keyboard and mouse.
Google uses three methods to adapt your website for use by other devices.
• Responsive: The responsive adaptation to different devices is done independently from the website’s HTML code. So the website will look different on various devices, but consists of the same HTML code. This is the norm nowadays.
• Dynamic display: This is where the HTML code is different but the URL remains the same.
• Separate URLs: In cases where different websites or URLs are used for mobile and desktop.
The latter two methods are not responsive.
As well as a responsive design, the size of a website is important for mobile devices. The speed on a smartphone in Africa is not the same as the speed of a desktop connected to a LAN in Western Europe. In other words: your website should load swiftly on mobile as well as on a desktop.
Why is mobile-first web design important?
Research by Google shows that 80% of people have used a phone for online searches. In addition, 27% only uses a telephone compared with 14% who only use a laptop. Mobile searches are much higher than searches on a desktop computer. In other words: chances are that your website is viewed much more often via mobiles and tablets than from desktops.
Based on the data above, Google has decided to rate your websites based on how their mobile look and operation: they call it ‘Mobile-first Indexing’. The ranking for your site for people searching from a desktop and who will view your desktop version is therefore determined by your site’s mobile version!
These are two very important reasons for selecting your theme according to mobile operation and performance. Luckily, Google has given us three tools to make the task easier. We will also list some other options for you.
Testing WordPress themes with Google’s Mobile-Friendly Test
This test provides you with a rough idea of the mobile-friendliness of a theme. Follow the steps below to test your theme:
1. Find the demo-site URL of your intended theme. Make sure you use the original URL, without the menu bar of a theme marketplace such as ThemeForest.
2. Go to the Google Mobile-Friendly Test website
3. Enter the demo-site URL
4. View the results.
If your theme doesn’t perform well, it would be best to find another theme.
Testing WordPress themes with the ‘Mobile Website Speed and Performance’ check
Google wouldn’t be Google if they didn’t make more than one testing tool available. The Mobile Website Speed and Performance check specifically tests the speed of your website on a smartphone with 3G connection.
You can enter the same URL here as in the test above. Please note that hosting and distance to the server still play a part in the figures displayed in this report.
Google shows the loading speed. You can also view how your website compares with sites in the same industry. Lastly, they also provide advice on how to make your website even faster for mobile devices.
You will receive an extra elaborate report when you enter your e-mail address.
Testing WordPress Themes with Chrome Developer Tools
The disadvantage of the above two tests is that you don’t know exactly which resolutions the tool is checking. This is why we recommend checking your theme’s responsiveness in the Chrome browser. The Chrome Developers Tool contains a useful functionality that tests your website for a variety of resolutions. You can do this as follows:
1. Browse to your website in Chrome.
2. Open the developers tool (F12 in Windows, Cmd+Opt+I for Mac)
3. Click on the ‘Toggle device toolbar’ icon, left of ‘Elements’
This tool allows you to check your website for specific resolutions. It also contains several standard resolutions for common devices. See also the Google manual.
Testing by dragging your window size
If you really want to test the responsiveness of your site thoroughly, you should test it on a desktop. Change the size of your browser window by dragging it. We would recommend always trying this, as it is the only way to really see whether all your website elements scale up or down for proper display. There are themes that work great in standard resolutions, but that struggle with different resolutions.
Don’t rush into testing all sorts of resolutions and devices, but check first – in Google Analytics, for example – which devices, resolutions and browsers are currently often used to visit your website.
Testing responsiveness of WordPress themes using software
For serious testing of your theme or website. As well as the Google tests, there are other tools available that can test your theme or website for responsiveness. They often require payment, but also offer more insight and functionality than the Google tests. If you would like to use this type of testing, have a look below:
• BrowerStack: Testing in many different devices, browsers and resolutions.
• Cross Browser Testing Tool: similar to BrowserStack
• Browsershots: Test your website in dozens of different browsers
• Browserling: Test your website virtually in a different browser
Testing themes on real devices
If you want to leave nothing to chance for your new site or theme, then the best solution is to test on real devices. It would be an expensive exercise to purchase various devices yourself. Luckily, there are companies that can help you by lending the devices to you. Also, there are Labs where you can test various devices:
As you can see, there are plenty of options for testing websites for mobile-first. Depending on the size of your project, it is always useful to be as thorough as possible. We would recommend to perform the Google test as a minimum before choosing a new theme or creating a theme for a live environment. Good luck with testing!
Not only Mobile first is important when you choose a theme. We summarized the things you have to keep in mind. Download the white paper now!