Article | Date posted : 5 November, 2013 | Updated on : 6 January, 2014

Test a mobile site free on different devices using google chrome tools

Sponsored Links

There are so many free and paid services available on the market to test your mobile site, unfortunately they don’t work when using a complex system based on server-side, media queries and JavaScript detection, alongside complex systems these tools are also a great addition to your arsenal for simple CSS based media query responsive designs . The Google Chrome Extensions that I’m using will help you easily view your site, as if you are a mobile device.

*Note: Mobile devices on certain native or non native browser will react differently on certain elements of your pages. For example, form drop down menu’s will look visually different on an Android device versus a iPhone. After testing your sites using the tools listed below, always test your site with a mobile device.

So why not use the built-in Developer Tools that are native built inside Chrome or Firefox? Simplest answer is, to change screens size or switching between devices just takes to long.

I have written a method on how to build a mobile site which is 100% approved for Google SEO, as my method is first mentioned method on Google’s guidelines. Interested in reading how to set this package up? Than read the following article server side and media query responsive web site.

Why can’t you use online web tools? Simply due to their header information (User Agent). Every device be it a desktop browser, tablet or smart phone will send out a unique header information. This information will show who the device is. Be it a chrome or internet explorer browser on a desktop, a safari browser on an iPhone or even different versions of OS.

So this is the problem with all free online tools, they don’t support the header information. But don’t cry just yet, I have found two free tools that will resolve all your issues. Or even if you don’t have an issue about the header information and simply want to use your desktop device as a mobile testing platform.

There are two Google Chrome extensions you can use to do exactly that.

First Free Tool (changing your user agent easily)

change http request header

change http request header

The first tool is change http request header, this tool will enable you to change your browsers desktop header to any other device. There are several presets available such as iPhone 3 and 4, android HTC legend and so on. But fear not, you can add as many as you like. You simply need to know the user agent information.

For example, iPhone 5s is not added, but you can easily Google this online. But I have already done this for you.

Once installed click on the “change http request header” icon in the top right corner and select options, than select your User-Agent followed by clicking on presets. And simply paste it in there.

And hello vista, you have added two new devices.


Second Free Tool (changing your browser size to match that of the mobile devices quickly)

window resizer

window resizer

My second tool I use is Window Resizer, here you can quickly change your browser size to match that of any device, you can easily add or remove any resolution size.

Even add an icon to quickly find which resolution you want to click on. Remember to remove any tools in your doc when you want to re-size to 320*480 (older devices), due to the extra icons it will force the browser to be wider than 320 pixels, simply remove unused icons.

To make it easier for yourselves I have exported my mobile device resolution settings for you. Simply import the code below.

Here is a list of standard resolutions for mobile devices

  • 320 x 480
  • 640 x 960
  • 640 x 1136
  • 768 x 1024
  • 1536 x 2048

If you are currently building a mobile checkout, why not have a read at Building a mobile checkout Part 1

Sponsored Links


Leave a Reply

Your email address will not be published. Required fields are marked *

Follow me on Google+

Google Shopping Data Feed Generator

Sponsored Links

Hire Me