Responsive Design Testing with Firefox

What is Responsive Design?

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

Standard Responsive Design Breakpoints

Desktops, Tablets and Phones come in varying shapes and sizes.  To test your website on all possible resolutions is nearly impossible.  The best practice when developing for responsive design in to focus on a few standard responsive design breakpoints.

Device Resolution
Phone 320px x 480px
Tablet 768px x 1024px
Desktop 1024px x 768px
Desktop** 1366px x 768x

**The Desktop resolution of 1366px x 768px has recently surpassed the typical 1024px x 768px resolution that had been the top browser resolution for desktops.  See Global Stat Counter for updated information.

Firefox Responsive Design View

Introduced in Firefox 15

The Responsive Design View makes it easy to see how your designs will look on different sized screens. Responsive designs adapt to different screen sizes to provide a presentation that is suitable for different kinds of devices, such as mobile phones or tablets.

To enable the Responsive Design View:

  • On the Tools menu, choose Web Developer,      and then Responsive Design View.
  • On the keyboard, press ctrl-shift-M on      Windows or Linux, or cmd-option-M on Macintosh.

To disable the Responsive Design View:

  • On the Tools menu, choose Web Developer,      and then Responsive Design View.
  • On the keyboard, press Esc.

Responsive Web Design View in Action

At the top of the Responsive Design View, there is a pull-down menu of preset sizes that are convenient for quickly seeing what your design looks at a number of common screen sizes. There’s also a rotate button to instantly switch the width and height (similar to rotating a mobile phone or tablet).

FireFox Responsive Web Design View

**Note:  The selected resolution does not consider the scroll bar.  The scroll bar is 20px wide, so a true 320px width can be accomplished by creating a custom preset at 340px X 480px

Further Reading…

For more information, see Firefox Responsive Design View documentation.

Nate Bunton

Nate Bunton is a Lead Software Engineer at Meta Payment Systems. He has over 10 years developing software and leading teams. He works with the Microsoft technology stack focusing in ASP.NET, MVC, HTML, JavaScript, CSS and Web Security. Nate also focuses on Application Lifecycle Management (ALM) engaging his teams with key stakeholders using a variety of agile principals. At Meta Payment Systems, Nate has been a leader in driving technology in the enterprise from new Web Technology to Service Oriented Architecture using WCF and NServiceBus. Nate’s greatest passion is for User Experience, Web Technology and Engaging Teams. He is driven by his desire for continuous learning & improvement.

Posted in Web Development Tagged with: , , ,