How to Use Firefox Responsive Design View Tool to Preview Your Responsive Website Layouts
Why Design Responsive?
In the last couple of years, smartphone and tablet users increased rapidly, which made mobile devices as the number one way for connecting to the Internet for most users. What that means is that now, not only a huge percentage of web visitors are accessing websites via their small-screen (compared to desktop screens) mobile devices but also some users are using mostly, if not solely, their mobile phones and tablets to visit their favorite websites online.
Add to that, the TV screens, car systems, smart watches, VR (Virtual Reality) and other emerging technologies that allow users to connect to the Internet on a wide variety of screen sizes, the importance of designing experiences in terms of websites and web applications responsively, i.e. by accounting for all (or the majority of) screen sizes shows its importance more than ever.
One of the crucial parts of designing a responsive layout is to test and preview it on devices with different screen sizes. Since there are practically thousands and thousands of different devices with varying screen sizes and resolutions, it is not possible or feasible for a web designers to preview their designs on that many screens. The next best option to testing a website on a real mobile device is to perform tests and previews on mobile phone simulators and other similar online or desktop tools to give you a rough idea about how your website will look and function on other screens. Though it won't always be 100% accurate compared to testing on real devices, it is still a good option to have in most cases.
One such nice tool for previewing responsive designs is Firefox's Responsive Design View tool that I recently discovered and have been making frequent use of since then.
How Firefox's Responsive Design View Tool Works
Before finding the Responsive Design View tool of Firefox, I was manually adjusting the window size to check my responsive designs on different screen sizes, which was a tedious process and it was hard to bring the size to accurate width and height dimensions. Now, I can simply open the Responsive Design View tool with a shortcut and preview my designs quickly.
1. How to Open Responsive Design View Tool in Firefox
You can activate the responsive design view in two ways:
1) Go to Tools in the top Menu (press Alt key to display the top menu in Firefox) and find Responsive Design View option within the Web Developer section.
2) Simply use the Ctrl + Shift + M shortcut.
Once the responsive design view tool is activated, your browser window will change into something like the following:
2. How to Close Responsive Design View Tool
Once you are done with previewing your mobile optimized design, you can close the preview mode by clicking the close button on the top left corner, or pressing Ctrl + Shift + M keys again.
Note that most keyboard shortcuts will continue to work the same way while in the responsive view.
3. How to Adjust Layout Size & Orientation
Next to the Close button on the top left corner, you will see a dimensions dropdown which lets you select from a number of pre-defined dimensions (width x height in pixels) or create your own custom layout sizes using the Add Preset option at the bottom. Using this dropdown, you can preview your designs in some of the most common screen sizes such as 320x480, 360x640, 768x1024, 800x1280 and more.
Using the Rotate button to the right of the layout dimensions dropdown, you can rotate the preview area from portrait mode to landscape mode and vice versa as you wish and see whether your design fits nicely in both cases.
You can also adjust the zoom level using Ctrl + Mousewheel during your previews.
4. Other Options
To the right of the Rotate button, there is a Simulate touch events button, which enables the simulation of touch events on your page after a reload. The Screenshot button with the camera icon lets you take screenshots of the preview area, which is quite useful to save your design revisions and share with your team for further collaboration. If you need to take full screen shots of the whole screen, you can also use the print screen button.
Finally, you will see a Custom User Agent text input field on the right most. You can use it by entering various custom user agents and see how the preview will display on each.
One of the useful things that you can do while in the responsive design view mode is to view the source code of your page or individual elements by right clicking on any element and inspecting it.
This is all about the Responsive Design View tool of Firefox and how to quickly preview your mobile optimized or responsive designs without any real device. Hopefully this tutorial will help you during your responsive test and preview sessions.
More Firefox Tips