Since the increase in popularity of smartphones and tablets, it has become norm to have two different versions of the website, one to serve the regular desktop browsers and another version for the smartphones and tablets having small screens size. The increasing trend of surfing from mobile devices has made it necessary to have mobile website.
The another reason of having mobile version of blog/website is to increase the download speed meaning less waiting time, as often the users surfing while on the move are on slower internet connection.
However, designing and maintaining mobile website from traditional desktop machine is cumbersome task, as you need to keep testing on different smartphones to make sure the mobile website is properly optimized for the mobile devices. If you are wondering how you can browse and test mobile website from PC or Mac without actually having to own that smartphone or tablet then here is the list of tools and online service for you.
1. Mobile Browser for PC
Mobile Browser for PC is an open source freeware utility which lets you to browse any website such as Facebook, Twitter, Youtube etc using native client of iPhone, Android, iPad. The utility is very simple to use and doesn’t require any installation.
You can simply choose the user agent and type in the website address and start browsing mobile version of that website. The utility is still in beta mode and far from perfection, doesn’t have a fancy UI or menu items. The Chrome 13, IE8 user agent mode are broken and doesn’t work as expected.
The software author will be soon updating this utility and adding more user agents along with improved performance and UI. In order to use Mobile Browser for PC you will require to have .net framework 3.5 or 4.0. Mobile Browser for PC is also available as portable utility.
Download Mobile Browser for PC.
2. Opera Mobile Emulator
A robust and comprehensive utility for all major operating systems. Opera Mobile Emulator is most useful utility to test mobile websites for Android devices. The only disadvantage of Opera Mobile Emulator is it doesn’t have Apple devices user agents for mobile site testing. Once you download and install Opera Mobile Emulator you can simply select the device you want to test the mobile site from the profile. You can also play with additional settings such as pixel density, resolution, user interface, user agent, windows size etc.
Download Opera Mobile Emulator.
Online Services
1. Mobiletest.me
An online service to test mobile websites for different mobile devices such as iPhone, iPad, Nexus One, in both vertical as well as landscape mode. The good thing about MobileTest.me is that you can also test the localhost website, which is useful in case if you are developing a mobile website on your machine and haven’t moved to production server.
2. MobilePhoneEmulartor.com
One the most comprehensive online service offering a way to test mobile version of your website. Before you start testing mobile website on mobile phone emulator you will need to tell them your monitor size, so that the actual cell phone in its real size can be displayed properly.
The not many devices are available for testing but it covers most widely used ones such as iPhone 5, iPhone 4, Samsung Galaxy S2. You can also choose from screen size or real size or horizontal mode or vertical mode. You might want to know that this are not screenshots generated but rather actual mobile version with which you can interact like you do on your smartphone.
3. Browshot.com
Though not as good as previous two online services but it does helps in testing mobile website by capturing screenshot of how it will look on different mobile devices and smartphones. Browshot has wide array of devices to choose from, not just smartphones but also android tablets like Nexus 7, Nexus 10, Nook etc. Blackberry Playbook and many more.
In order to leverage browshot.com to its full potential you will need to register a free account with them which offers 100 free screenshots per month and 20 free credits (please note: to test on any mobile browsers requires credits which you can either get by buying or get free credits by subscribing to newsletter and tweeting about browshot).
The only down side is, you cannot interact with the mobile website as you only get is the screenshots of how your website will look on selected device.
If you are not convinced in installing using third party tools or online services to test mobile website on desktop then here is yet another alternatives. Since most of the websites are designed to auto detect the user agent and based on that different versions of website is served, you can simply change your browser user agent string.
On Firefox
Download User Agent Switcher extension, once you download and install, access the Default User Agent Menu option under tools and change to iPhone 3.0 or the one you want. Now browse the website you want to test an you should see mobile version of that site. You can get the different mobile browser user agent string from here.
On Chrome
Thankfully Chrome already comes with built-in user agent changing mechanism and supports wide variety of user agents, starting from iPhone, iPad, Android to Blackberry and Meego devices.
All you need to do is either press CTRL+SHIFT+I shortcut or go to settings->tools->developer tools. In developer tools window, click on settings icon at lower right corner and go to overrides option and check user agent setting and from the list browse and select the desired user agent.
We hope the tools/online services for testing mobile websites on PC which we covered here will come handy for you. If you know of any tools and services and want us to cover here, let us know by comments.