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 Responsinator, ResponsivePX, 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.

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.

[youtube http://www.youtube.com/watch?v=t07cLJhJkjQ]

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.

Tags:

• design
• browsers