How to test responsive designs for free

When you are trying to design your site to be responsive BUT don’t have all the various devices to test on, what can you do> My first investment was Electric Mobile Simulator Lite which was available for free from Electric Plum. Unfortunately they no longer offer a free version. Next I purchased Electric Mobile Simulator 2012 which does a nice job most of the time. But at $39.99 it is a bit expensive.

deviceresponsive

A couple of days ago, Ian Haynes posted in the Expression Web group on Facebook a link to a free tool deviceresponsive which shows a quick preview of your website’s responsive layout on different device resolutions like Macbook, iPad, or iPhone.  You can then share share this preview with your client or use it for your own testing. I tried it out on a couple of my sites and was happy with the result. deviceresponsive lets you see the results of both portrait and landscape orientations. All devices are shown at once on one long page.

Devices and screen sizes emulated in this site are

  • Macbook — 1280 x 800
  • iPad portrait — 768 x 1024
  • iPad landscape — 1024 x 768
  • Kindle portrait — 600 x 1024
  • Kindle landscape — 1024 x 600
  • iPhone portrait — 320 x 480
  • iPhone landscape — 480 x 320
  • Galaxy portrait — 240 x 320
  • Galaxy landscape — 320 x 240
    No screenshot included as it would be way to long! Test your site to see the results.

Am I Responsive?

Today, a couple of folks posted a link to an article How to test responsive designs for free which includes another free tool Am I Responsive? which gives a simple, instant view of your site as it would display on four different devices. All four are iOS, and the developer explains that focus on the site. It offers no controls and no choices, just a very simple, elegant presentation.

Viewport sizes are

  • Desktop — 1600 x 992px scaled down to scale (0.3181)
  • Laptop — 1280 x 802px scaled down to scale (0.277)
  • Tablet — 768 x 1024px scaled down to scale (0.219)
  • Mobile — 320 x 480px scaled down to scale (0.219)

The screenshot shown below is how this blog displays in the various devices.

Screenshot of Expression Web Tips Blog.

You can read the full article How to test responsive designs for free. I would encourage you to add both of these free tools to your testing arsenal if you re working with responsive designs. It is always best to test on an actual mobile device but some of us do not have that luxury.

Comments

  1. I want to share this on my blog. Thanks for the tip! Very helpful

Speak Your Mind

*