Responsive design website testing on many mobile devices is one of the biggest challenges we have as website designers and developers.
Most design firms and agencies can wrangle up a few different versions of iPhones and Android devices for responsive design testing but what about older versions? What about smartphones and tablets running Windows Mobile? Did you test that Amazon Kindle Fire HDX?
Fortunately, our friends at Google have provided a quick and easy way to visually test your website on 20+ of the most popular smartphones and tablets in a quick and easy manner – including that Amazon Kindle Fire HDX – using Google’s Chrome browser. In this post, we will guide you through the following steps that will help you easily and quickly view and test your website on over twenty of the most popular smartphones and tablets.
- Get Google Chrome
- Access Chrome’s Development Tools
- View & test your website on mobile devices
- Determine the most popular mobile devices on your website
- See if Google feels your website is considered “mobile-friendly”
Get Google Chrome
First off, if you aren’t already running Chrome, you will need to download and install it for free via Google. It’s a simple and quick process – the download site will auto detect your operating system and a call to action button should prompt you to download it. Run the download and fire Chrome up. If you need more help installing Chrome, see Google’s Installing Chrome help page.
Access Chrome’s Development Tools
Follow the steps below to access the Development Tools and Device Views from within Chrome:
Step 1: Start Up Chrome
Assuming you have Chrome successfully installed on your device, start up Chrome and go to your website that you want to test. Once the website has completely loaded, right click on any area on the current web page – you should see a menu appear that looks something like the image pictured.
Step 2: Open Chrome Developer Tools
Click on the “Inspect Element” menu item and it will open up the Chrome’s Developer Tools drawer. The default view may put the drawer on the right hand side, which may not be very helpful when working on views of the site. You can have it on the bottom of the window and minimized. To move the drawer to the bottom of the window, click on the “Dock to Main Window” icon in the upper right. It should now look like image below.
Step 3: Arrange Window
Once the drawer is moved to the lower area of the window, place your cursor over the menu bar for the developer tools drawer. Your cursor will turn into a double sided arrow – simply pull the menu bar all the way to the bottom of the window. You should now have a nice large viewing area for the website.
View & Test Your Website on Mobile Devices
Step 1: Toggle Device Mode
With the Developer Tools open, click on the “Toggle Device Mode” icon in the lower left of the window. It looks like a little smartphone screen and is next to the search icon in the Developer Tools menu bar 
. This will open up the device options and controls in a dark colored menu at the top of the window.
Step 2: Choose A Device to Emulate
Choose a device from the drop down menu of devices – there are over 20 to choose from. Note, after choosing a device, it will appear in the browser but you may see a warning message stating, “You might need to reload the page for proper user agent spoofing and viewport rendering.”. This is simply stating that you may need to reload the page using the Reload this Page icon at the very top of the browser.
Step 3 : Examine Horizontal & Vertical Views
Make sure you look at both the horizontal and vertical views of the devices. This is done by clicking the “Swap Dimensions” icon (two circling arrows) that is located next to the Screen Resolution of the device being displayed in the dark menu bar. The image below shows what the horizontal view vs. the vertical view would look like on an Apple iPad.
Step 4: Test On More Devices
Test on the devices listed. You may be surprised to find that different devices render your site in different ways – sometimes in ways that are far from pleasing (hello Windows Mobile, but that could be an entire blog post in itself). It is important to note that this isn’t a perfect solution for testing; we have seen instances where the view is not exactly the same as when testing on the actual device. However, this is a great way to quickly test your site on these devices.
Determine What Mobile Devices Are Being Used
So, you now now what your website looks like on an Amazon Kindle Fire HDX but does it really matter if only .03% of all sessions to your site are using it? Our goal is to provide an excellent user experience to 100% of end users on all devices. Realistically, that can be very difficult due to the fact that there are so many different devices with different variables that can have an effect on how your site is displayed. This, combined with the fact that most website owners don’t have limitless budgets to test on every device in existence means that we need to try and optimize the experience on as large of an audience as possible.
We need to start by finding out what devices are most commonly viewing the website. We do this by viewing Mobile audience reports in Google Analytics. If you are a client of ours, you have this. If you aren’t a client of ours and want help getting installed on your site, let us know, we are happy to help you out.
- Go to your Google Analytics account for your website and open up the reports.
- By default, the Audience tab will be expanded. Click on the “Mobile” menu item, which will expand and display the Overview and Devices options.
- Click the “Devices” report. By default you will see the top 10 most popular devices that access your site. You can expand this list by showing more rows by using the drop down menu located in the lower right of the report.
- If you need help accessing your Google Analytics account or need Google Analytics installed on your website, reach out to us and we can help!
Is Your Website “Mobile Friendly”?
Beauty is in the eye of the beholder when it comes to website design. This includes responsive designs – we have had many debates over what looks good and what doesn’t when it comes to responsively designed websites. However, in addition to ensuring your website looks good to your end users on their devices, you need to make sure that Google thinks your website looks good on them as well.
Google recently announced that it would be prioritizing websites that it determines to be “mobile friendly” over those that are not in its mobile search results. Why is this a big deal? Well, Google also just announced that over half of its searches are now coming from mobile devices. Did you hear that? The majority of all searches are now coming from smartphones and tablets. If Google doesn’t feel your website is mobile friendly, its ranking is being potentially penalized for over half of the users searching on Google.
Want to see how you can quickly determine if Google thinks your website is mobile friendly? Check out our blog post from April that explains what mobile friendly means to you.
What Next?
If you have gone through these steps and determined that your site looks good on the devices that your audience uses to view your site and it checks out as being mobile friendly with Google, you are ahead of the curve. Focus on continuously improve your website by creating and publishing great content and promoting it.
If you have determined that your site doesn’t look good on your most popular mobile devices or if Google doesn’t see your site as being mobile friendly, you should focus on fixing it. Even if your mobile traffic is not as high as most, nobody can deny the trend that mobile device usage is rising at a rate that simply cannot be ignored.
If you have questions or would like us to help you address any of these topics, let us know. We would love to hear from you!
You must be logged in to post a comment.