Using the Firefox Responsive Design Mode
It may have taken a while to catch on but responsive design is here to stay. If you haven’t run across it - Firefox has added a few tools to make developing responsive sites a little easier. In the Firefox developer tools is a responsive design mode button. When selected this button provides a window within a window. Essentially, this allows the resizing of a displayed website to offer an experience like you would see it on the device viewport. The benefit is that, this is done without having to resize the main Firefox window. In this blog post we will take a look at how this works.
Let’s start by accessing the Firefox toolbar and selecting the Responsive Design Mode button using one of the following ways:
-
Within Firefox press F12 and then select the Responsive Design Mode button as shown in the following screenshot.
-
Press CTRL-Shift-M which takes you directly into the Responsive Design Mode as shown in the following screenshot.
The inner window mimics the viewport of the device you would like to see the site running on. We can see what the site looks like running at 800x1200 as shown in the following screenshot.
Responsive mode can also rotate the orientation of the screen by selecting the arrow icon. This allows you to see what you layout looks like in landscape mode as shown in the following screenshot.
Responsive mode includes some common screen size in the drop down menu which can be helpful. I would suggest that you spend time manually resizing the design window to find the most natural breakpoints for your design rather than focusing on specific screen sizes. Also remember that while this feature is great for development testing. There is no substitute for testing on actual devices.