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:
- iPhone portrait 320 x 480
- iPhone landscape 480 x 320
- Crappy Android portrait 240 x 320
- Crappy Android landscape 320 x 240
- Nicer Android portrait 295 by 515 (equivalent desktop resolution)
- Nicer Android landscape 515 by 295 (equivalent desktop resolution)
- iPad portrait 768 x 1024
- iPad landscape 1024 x 768
- Kindle portrait 600 x 1024
- Kindle landscape 1024 x 600
Electric Plum
Responsive Design Bookmarklet
Summary
