Responsive Design and Mobility Tools

Recently while viewing the Pluralsight course Single Page Apps with HTML5, Web API, Knockout and jQuery I came across three handy tools for testing web sites in different mobile browsers. Each tool works slightly differently but all serve the same general purpose, helping web developers (like me) quickly get an indication of how their responsive site will look on the most popular devices.

What is responsive design?

It means designing your website to adapt to the user’s viewing environment (mobile, tablet, laptop etc.). It does this through the use of media queries, and other clever technology.Ethan Marcotte wrote the original article about it, and a pretty handy book.

The tools

The Responsinator

A free web based tool made by Tama Pugsley and Andy Hovey. You can use it from their site directly or via a bookmarklet they provide. Provides simulations for the following devices:

Electric Plum

These guys offer various commercial Windows-friendly iOS simulation tools. Their products are available for a 7 day free trial and are $39.99 for the full suite, which is very fair if you ask me. The Mobile Studio 2012 features Visual Studio 2012 integration, Multi Instance iPhone and iPad simulation, integrated debugging tools, HTML5 feature control and more. Definitely work checking out the free trial if you want to focus on iOS testing of your mobile apps!

Responsive Design Bookmarklet

This is a simply yet handy tool for responsive design testing. You drag the bookmarklet to your bookmarks bar and then you get a handy toolbar at the top of the target page providing you with the ability to choose between various mobile resolutions, toggle on/off a fake keyboard and more. This is definitely the most basic of the three utilities but is definitely a good addition for quickly doing spot checking of a page at a certain resolution.

Summary

These three tools will definitely be in my toolbox for any mobile sites I work on in the future. Given that 69% percent access the internet daily from a mobile device, you really should be considering these tools with public facing site you build these days! What tools do you use to test your websites for different mobile devices?

Don Kitchen