Testing Responsive Design

Testing Responsive Design

We’ve previously covered Responsive Design and I think there is no denying, it’s the way forward in web development. Now as a developer, how do you go about testing your media queries, many resort to resizing their browser to mimic various device screen sizes. Firefox has a useful built-in ‘Responsive Design View’ tool, which is quite useful, but only if you’re a Firefox user. There are, however several online solutions available for viewing and testing responsive sites.

We’ve outlined our two top picks in online tools for testing responsive sites, take a look and try them out for yourself:

Am I Responsive

Am I Responsive offers a simple solution, although by the creator’s own admission, this is not a tool for testing. It is however ideal for getting a quick overview of a sites responsive capabilities and could prove indispensable when propositioning a client with the idea of creating a responsive site. You can also send a link with a selected site embedded into the URL.

Am I Responsive provides you with four basic viewport sizes:

Desktop: 1600 x 992 pixels
Laptop: 1280 x 802 pixels
Tablet: 768 x 1024 pixels
Mobile: 320 x 480 pixels

Screenfly

Screenfly is unique, rather than using CSS to render your site in various display sizes, it provides the option to use a proxy server which mimics the user agent string of the device you select. This basically means that the focus here is on helping developers to test their responsive websites during the design and development phase.

The top menu allows you to select: Desktop, Tablet, Mobile or Television display modes, each mode offering several selections. The Table and Mobile display modes also offer specific devices, rather than generic display sizes. In addition, you have the option of selecting a custom screen size and the ability to rotate the screen.

These tools will come in very handy the next time you’re working on a responsive website. Have you used these tools before? Do you have a different solution which you prefer? Share your thoughts with us!

Tags:


What do you think? Let us know!