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 whole idea behind responsive design is to be able to move from one device to the next fluidly. If, after you designed for the desktop, you needed to make the site mobile, you’d have to start hiding buttons and images and navigation. You’d have to stuff and scale and tuck until your 1,600-pixel canvas was crammed into the frame. If you weren’t careful, the user would end up loading all that hidden content on their phone, which would slow the load time. After spending all that time cramming, your user with a 3G connection would hit the Back button because your page wasn’t loading—not exactly the best user experience. If you’re wondering if there’s a better way, I’m here to tell you there is.