With the growing use of smart phones comes an increase in the use of mobile browsers. This has created a strong need for websites to develop a high-quality, mobile friendly version. These need to be readable easily, and have a short load-time, which can be challenging. With tablet and smart phone ownership constantly on the rise, it is more important than ever for websites to be able to adapt. Luckily for web-developers, there are a variety of tools available to make this job easier. I’m going to be sharing with you 10 of what I believe are the most useful programs for testing your website of mobile devices.
Table of Contents
iPhoney
Great for testing an iPhone mobile experience, iPhoney is not an emulator, it is only a creator. Use it to create a 320x480px site for iPhone. Test your content down to the last pixel in the Apple Safari-based web browser. This tool includes all of the usual features – orientation, fullscreen, plugins, and zoom.
W3C mobileOK Checker
This tool automatically checks how well your website adapts to mobile. The program uses the Basic Tests of W3C mobileOK, created by the W3C team.
iPad Peek
This is a very useful web that permits you to preview your website for iPad. They recommend using a web-browser based on WebKit like Safari or Chrome, to ensure the most accurate simulation possible. Otherwise, use one that is CSS3-capable, such as Opera.
Modify Headers
Firefox has add-ons that allow you to manipulate any data uploaded to servers for creating the illusion of using a mobile browser. The one we are going to be looking at is Modify Headers. Here’s how to use it: After downloading and installing the add-on, you’ll notice that the following new options have appeared: Tools and to Default Tools and User Agent then Modify Headers. You are going to need the Profile of User Agent of a mobile device that can easily be found through a simple Google search of “user agent” plus your mobile device model of choice (e.g. user agent iphone”).
Enter your UAProf into Modify Header, and you will be presented of an emulation of the browser for that device. If you are using Google Chrome, there is a similar extension called “Switcher of User-Agent.” If you are looking for a desktop app that works in similar ways, you might want to try Fiddle Web Debugger, which allows you to alter HTTP requests, along with other features.
Adobe Device Central CS5
Adobe Creative Suite’s latest edition includes Device Central a mobile browser emulator that allows web-developers to try out Flash and HTML on their desktop. While Creative Suites is not free, it comes with a wide variety of tools in a huge range of areas, and most designers and developers are already using it.
Here’s how to use it:
Choose Device Profiles and then Browse Devices after that right click then Add Test Devices.
Once a device has been added, choose File > Open (local) or File and Open URL (remote).
MobiReady
Similar to Gomez, this is another way to test the mobile-friendliness of your website. Enter the URL, and receive a rating on various aspects of your site. This program provides more details than Gomez, and provides you with results on wide variety of technical aspects. That being said, MobiReady can be difficult to use and understand by the less technically-inclined.
DotMobi Emulator
If you are looking to test your website for older model phones as well as newer models, be sure to check out DotMobi Emulator. This program can provide you with the live preview for a small selection of mobile devices. Keep in mind, this tool does require a Java plugin for your browser.
Opera Mini Simulator
Opera Mini is one of the most widely used mobile browser currently available, making it increasingly important that your website works well with it. Opera has provided us with an emulator that is web-based completely free for web-developers to test their designs for Opera Mini. It also requires Java plugin for your browser, so be sure to have that installed.
Google Mobilizer
This is Google’s answer to web testing for mobile. Simply enter the URL and Google will do the work. By cutting out all but the essentials, Google Mobilizer turns any URL into a mobile-friendly version. This tool is ideal for finding areas where you may optimize your website.