5 Ways to Check How Your Website Looks on a Mobile Device

People using the internet from mobile devices is on the rise, with the outburst of smartphones, these mobile devices share a very good part of your site’s traffic. So it is high time, that you create a mobile friendly version of your website. Okay, let us assume you have created a quick-loading, touch-friendly mobile version of your site. Now, how do you test it ?

[adsense]

It is easy for us to check how our website looks on a desktop, we can manually try on different browsers or use wonderful tools like Adobe’s Browser Lab and  Browser Shots to check how our website looks on different possible OS and browser combinations. But it gets tricky when you need to check how your website looks on a mobile device, because there is a huge number of mobile devices available in the market and it is impossible for anyone to validate their site on each and every one of them.

That is when these tools come in handy to us. I’ve listed a few tools, which are basically emulators, that try to replicate how your site will look on different mobile devices. After knowing that you can make the necessary changes to your site design to make it even better. For your convenience, the links to all the tools are provided at the end of the article.

#1 Opera Mobile Emulator

This is the best tool available in the list. It has a huge list of supported devices. It basically emulates various devices according to their screen sizes and run an instance of Opera Mobile in them. You can filter the devices based on their resolution, pixel density and even input method.

This wonderful tool also emulates a few popular tablets too. Since it runs an instance of Opera Mobile, you might be worried how it might look from a native android browser. You can change the user-agent to android, S60 or even Meego. After opening a device, click on the Opera icon and go to Settings -> Advanced to change the user agent. However, this emulator doesn’t emulate BlackBerry and iOS environments. For that, we’ll look at other options.

#2 Mobilizer

Mobilizer lets you emulate a smaller, but popular set of phones including the Apple iPhone, BlackBerry Storm, Palm Pre etc. It is an Adobe AIR app, so you need to have Adobe AIR installed to use this. You can compare multiple instances simultaneously, take screenshots by right-clicking and do a lot more using this nifty tool.

#3 iPhoney

iPhoney is an open source tool to check how your site looks on an iPhone. It isn’t an emulator but helps you create 320 x 480 px websites for use on the iPhone. It is complete with Zoom in/out, plugins, landscape/portrait etc. However you would require a Mac to try this.

#4 iPad Peek

Like iPhoney, this web-based tool is solely used for checking your web sites on an iPad environment. It is advised that you use an webkit based browser like Google Chrome or atleast a CSS3 capable browser like Opera which supports transformation properties, because iPad Peek uses them to render your site in the portrait mode.

#5 Opera Mini Simulator

We checked our site on all high end devices. But, there are over 120 million+ devices which come with Opera Mini pre-installed. There is an Opera browser for almost all platforms. So if your website looks well on the Opera Mini, then it will on many devices. So you cannot skip this at any cost. You need the Java plugin to run this web app.

I hope I have listed the most useful tools that would help you check how your website looks on a mobile device. If I had missed anything, do let me know through the comments. If you have any doubts in the process of testing your mobile site on various tools mentioned here, do let us know through the comments and we’ll help you out.

[stextbox id=”info”]Links[/stextbox]

Download Opera Mobile Emulator

Download Mobilizer

Download iPhoney

Use iPad Peek

Use Opera Mini Simulator