Testing Responsive Design Widths just got better with Firefox

Responsive WordPress themes are very popular these days. Responsive designs adapt to each browser’s screen width, which is why it’s important to make sure your site looks good on a variety of screen dimensions.

There are a few websites that enable you to preview a single URL’s responsive design at various sizes: The ResponsinatorResponsivePX, and StudioPress’ Responsive Tester, but I’ll show you a better way…

Now, there’s a new, better way to test responsive themes. Firefox Aurora, the pre-beta Firefox browser, is available and works wonders for CSS styling, viewing the 3D layers of a site’s elements, and testing responsive design. In time, these new tools will make it to the release version of Firefox, but don’t delay.

WordPress Responsive Design testing with Firefox Aurora

The screenshot above shows how to turn responsive testing on and off in Firefox Aurora for Mac and also shows the dimension and rotate buttons.

The video below shows the new Firefox developer tools in action.

Featured Plugin - WordPress Q&A Site Plugin

It's now incredibly easy to start your own Q&A site using nothing more than WordPress - The Q&A plugin simply and brilliantly transforms any site, or page, into a perfect support or Q&A environment.
Find out more

Firefox is best for testing responsive design

Compared to websites where you enter one URL at a time (like mentioned at the beginning of this article), Firefox enables you to:

  • Browse the site naturally by clicking, not having to enter each URL separately
  • Browse ‘localhost’ sites that you couldn’t type into a public website render engine

Compared to testing on the real devices (pulling out your phone, tablet, or iPod), you can:

  • Save money, not having to buy every device
  • Use ‘Inspect Element’ and other dev tools while in responsive testing mode

Compared to testing by simply resizing your desktop browser, you can:

  • Keep your main browser window its normal size, usable for web development, and render the site widths separately

Firefox also lets you save custom dimensions in addition to offering you quick access to common device sizes (phones, tablets, and desktop monitors). It also has a ‘rotate’ button to switch between portrait and landscape modes. Its responsive design testing functionality is very similar to the RWD Bookmarklet’s. The RWD Bookmarklet, however, does not save your favorite custom dimensions or stay activated when clicking to browse through the website, but it does have a nice “mock iOS keyboard” feature.

Give Firefox Aurora a spin and you won’t be disappointed.

FYI: It’ll automatically include your existing Firefox Add-Ons, but you cannot run both Firefox and Aurora at the same time.

Featured Plugin - WordPress Infinite SEO Plugin

Fully integrated with the SEOMoz API, complete with automatic links, sitemaps and SEO optimization of your WordPress setup - this is the only plugin you need to help you rank your site number 1 on Google - nothing else compares.
Find out more

Comments (3)

    • Collin, I’m glad it helped you as much as it has helped me. FYI: you cannot run both Firefox and Aurora at the same time because they’re (kind of) the same thing. If you close Firefox with open tabs and open Aurora, those tabs will be there (if that’s what your options are set to). Enjoy Aurora!

Participate