With Web users increasingly using mobile devices to browse Web sites and apps, Web designers and developers need to be sure that their creations look as good and work as well on mobile devices as on traditional desktop computers. Prominent designer Luke Wroblewski advocates designing for "Mobile First", rather than as an afterthought to designing for desktops. Whether you design for mobile devices as a primary target or as a nice extra, you can use the power of CSS to ensure that the same content can be accessed across all hardware platforms, from mobile phones to wide-screen high-resolution displays.
This approach is known as "responsive Web design". Some of its strategies include:
- Liquid or fluid layout: Defining all container widths in terms of percentages of the browser viewport, so that they expand and contract as the browser window changes size.
- Media queries: Invoking different style sheets based on the capabilities of the display being used, such as size, resolution, aspect ratio, and color depth.
- Fluid images: Setting images to occupy at most the maximum display width.
Minimum requirements for Firefox Marketplace
If you submit an app to the Firefox Marketplace for Firefox OS or Firefox for Android, it needs to be responsive to mobile screen sizes and screen pixel densities. Keep in mind that screens start as small as 320px by 480px. Another common pitfall is not recognizing screen density and then not adjusting font sizes and touch targets accordingly. For more information see Marketplace review criteria.
- Responsive Web design, by Ethan Marcotte
- Beginner's guide to responsive Web design, by Rick Petit
- Responsive Web design: What it is and how to use it, by Kayla Knight
- Multi-device Web design: an evolution, by Luke Wroblewski
- Responsive Design Workflow by Stephen Hay (book)
- CSS media queries reference page
- pointer Media Query, Pointers for Mobile devices, by David Walsh
- CSS media queries and using available space, by Chris Coyier
- Liquid layouts the easy way, by Russ Weakley
- Fluid images, by Ethan Marcotte
- Designing for touch screen, by Chris Kemm
- Responsive Web Design Techniques, Tools and Design Strategies, by Smashing Editorial Team
- Responsive Design View in Firefox
- DevDerby demos of CSS media queries
- 20 Amazing examples of using media queries for responsive Web design, by Joshua Johnson
- Responsive Web design: 50 examples and best practices