Announcing: Responsive Mode tool in Firefox
In a recent Firefox Nightly release, Firefox has added a “Responsive Mode” to their built-in web developer tools. The new Responsive Mode tool creates a window inside of your web browser that:
- can be dragged to test your responsive website at different viewport dimensions
- includes presets for common device dimensions in a drop-down menu
- has a nifty “Rotate” button to toggle the currently selected viewport dimensions between portrait and landscape modes
We’ve played around with Responsive Mode in a pre-release of Firefox 16, and we like it a lot. You can, of course, test responsive designs already in any web browser by dragging the viewport to narrower dimensions, but we like the new Responsive Mode tool better.
The feature should be present in FF15 and later, to be released later this year, probably around September 2012.
(One feature we hope they’ll add is the ability to add your own custom presets for device dimensions—fingers crossed!)
Watch our demo
Watch the short screencast we recorded demonstrating its capabilities:
Video transcript:
0:00
Hello everyone. I’m excited about a brand new feature coming out in Firefox in a couple of months. This is a preview of Firefox and for those of us building websites and using the Responsive Web Design techniques. There’s a new “Responsive Mode” for testing out responsive designs in Firefox. So check this out.
0:20
So, we’re visiting here the Paravion website (which is our responsive website that we just recently launched at CodeGeek.net), and we can see scrolling down to the bottom, for example, there’s three sections of content: “Training videos,” “News,” and “Weather.”
0:35
And once I’ve entered “Responsive Mode,” which you do through “Tools” > “Web Developer” “Responsive Mode,” I can then set the screen area to start and we can drag this window within a window to see how our website would behave as we shrank the viewport.
0:56
And as we reach a breakpoint, we’ll see that the “Weather” section just bounced down below the “Training videos” and “News” because that’s the breakpoint we set for that content area to move as Testing we continue narrowing the browser width, we’ll reach another breakpoint at which point the “News” section will flow below the “Training video” section and our content is now linearized in the lower section of the web page.
1:23
Now you can do that exact kind of testing just by dragging your viewport of your browser window now – you don’t need the new “Responsive Mode” in Firefox to do that. But what’s really neat is we can come to the pre-set dropdowns and select from common sizes.
So, for example, we can pick 768×1024 for our viewport, which is representative of an iPad, and we can see immediately how the website would look in an iPad. So here we have the lower section.
And then the other neat this is they have a rotate button, which when we click that, it will rotate the screen into landscape mode and we can see how our responsive design would flow in that scenario as well.
I think this is a really interesting tool and I look forward to the full release of it.
Recent update (as of 2018)
Wait, there’s more! As you know, tech changes quickly, so we’ve got more to say on this matter. Check out our post Multi-Device Testing Using Firefox and Chrome to learn more.
Featured image (Firefox): Rubaitul Azad on Unsplash