Skip to main content

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.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.