Firefox demos responsive tool

Mozilla developer evangelist Christian Heilmann has created a video showcasing Firefox's upcoming layout view and responsive mode. The latter of these will doubtless be of huge interest to web designers and developers working on responsive websites.

As Heilmann says in his video, you currently have to resize your browser window to test such sites, and this can be annoying, because when it narrows you often lose access to your icons and address bar. Additionally, it's not always easy to be accurate in terms of viewport heights and widths.

The new responsive mode is accessible via Web Developer > Responsive Mode and places the page 'inside' the browser window. This means that instead of resizing the entire browser window, you instead resize the page within the window, and a pop-up menu helpfully provides details of the viewport's dimensions, which are updated live.

The pop-up also includes popular dimensions for mobile devices, and you can via an adjacent button virtually rotate the page with a single click.

"This should help you a lot with your CSS styling for different tablets and mobile phones and to test your responsive design," said Heilmann.

As shown in the video, improvements to the Inspect Element view are also coming soon to Firefox. You will be able to select an element and see its dimensions, along with defined settings for border, padding and margin.

Additionally, a new feature provides the means to simulate the various states of an element, such as hover, active and focus, along with copying the inner and outer HTML.

You can test the new tools now by downloading the current Firefox Nightly, and they will land officially in Firefox 15, due in August.