Firefox is releasing really cool CSS features in Firefox 15. One of the features, Responsive Mode, can be appreciated by mobile developers building responsive websites for smartphones, tablets, and desktops. Responsive mode allows mobile web developers to view the various media query layouts without resizing the actual browser window.

Responsive Mode in Firefox 15 for Mobile Developers

If you are viewing a responsive website that targets different devices using media queries and you wish to view the layout using various custom widths or device presets, you can either choose Responsive Mode from the Firefox Web Developer Tools Menu or type CTRL-SHIFT-M.

Mobile Development with Firefox 15 and Responsive Mode

When you activate Responsive Mode you get the option of specifying certain device widths with the ability to rotate between portrait and landscape view as well as the ability to resize the view, not by resizing the browser, but by resizing the document itself as shown within the orange circle. This allows you to comfortably have access to all your mobile web development plugins and tools via the full browser window while being able to test the responsiveness of your media queries within the browser.

Above I am showing the responsive Orchard Theme I built for another of my websites using Orchard CMS. By using a preset 320x480 viewport I can determine how my Orchard Website will look on an iPhone in both portrait and landscape layouts.


The new Reponsive Mode in Firefox 15 is definitely a really nice feature for mobile web developers designing responsive websites using media queries for smartphones, tablets, and desktops. I'll definitely start using it along with Adobe Shadow (see Mobile Web Development for iOS and Android with Adobe Shadow.)

Also check out jQuery and JavaScript Development using Firefox Scratchpad and Firefox 11 Web Developer Tools including Style Editor and 3D DOM Viewer!