Chapter 2. Design for mobile first

This chapter covers

  • Why mobile first
  • Designing headers for small screens
  • Designing for a touch interface
  • Simplified small-screen responsive grids
  • Using web fonts in layouts

There’s a term I like to use to describe what happens when a project starts to get out of control: “gilding the lily.” It’s an idiom that’s derived from Shakespeare, and it means to unnecessarily embellish something. A lot of gilding of lilies can go on when you assume everybody visiting your website is on a desktop browser.

When you have a 1,600-pixel-wide canvas, you have a lot of space to fill, so you might add more buttons, animation, widgets, and images. If you were only designing for a desktop, that would be great, but the ...

Get The Responsive Web now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.