{"id":86879,"date":"2012-07-16T11:00:14","date_gmt":"2012-07-16T15:00:14","guid":{"rendered":"http:\/\/wpmu.org\/?p=86879"},"modified":"2012-07-13T20:23:29","modified_gmt":"2012-07-14T00:23:29","slug":"test-responsive-design-width-firefox","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/test-responsive-design-width-firefox\/","title":{"rendered":"Testing Responsive Design Widths just got better with Firefox"},"content":{"rendered":"

Responsive WordPress themes are\u00a0very popular\u00a0these days. Responsive designs<\/a> adapt to each browser’s screen width, which is why it’s important to make sure your site looks good on\u00a0a variety of screen dimensions.<\/p>\n

There are a few websites that enable you to preview a single URL’s responsive design at various sizes:\u00a0The Responsinator<\/a>,\u00a0ResponsivePX<\/a>, and\u00a0StudioPress’ Responsive Tester<\/a>, but I’ll show you a better way…<\/p>\n

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

\"WordPress<\/p>\n

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.<\/p>\n

The video below shows the new Firefox developer tools in action.<\/p>\n

[youtube http:\/\/www.youtube.com\/watch?v=t07cLJhJkjQ]<\/p>\n\n

Firefox is best for testing responsive design<\/h2>\n

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