Small Screens Come First: Build for 320 And Up

Small Screens Come First with 320 And Up

If you’ve yet to learn how to work with CSS3 media queries, I hope it’s near the top of your to-do list, because 2011 is definitely the year of the mobile device. Whether you need to build a separate mobile site, or plan to make one size fit all, you’ll still need to be up to date with responsive web design techniques.

One common issue developers face with the media queries approach is that you often have to do a lot of work to keep small-screen browsers happy; you’ll find yourself resizing big images, switching scripts around, maybe even hiding big chunks of content. While this technique gets the job done, it means that small-screen browsers may be loading up huge bits of content that they’ll never need to show. For slow, expensive mobile connections, that means paying for additional packets that I’d personally prefer to avoid.

Sounds familiar? It should, if you follow the SitePoint Podcast. In last week’s episode, Louis talked with Jeremy Keith about this very problem. You’ll find this discussion beginning at around the 23:45 mark:

Louis: … And I guess one of the biggest challenges with Responsive Web Design is dealing with that bandwidth challenge, right, if I need to serve an image that will look good at 1024 or 1280 and it also needs to look good at 320, the approach so far in most responsive cases has been to use a really large image and scale it in CSS, but that does pose a problem for bandwidth. And then the other issue that comes up is some of the superfluous content, so you’ve talked a little bit about lazy loading as a solution to that. So I wanted to hear what your opinions are on where we’re going with respect to these sorts of technical challenges and dealing with bandwidth issues.

Jeremy: When it comes to serving up different size media, like images, I think as with this idea when it came to layouts instead of scaling down a desktop-centric layout to flow into a mobile site, what if we flip it on its head and start with the narrow version and then scale it up to desktop. I think that’s probably a good approach to take with media as well; instead of thinking about the large image as the default, and (asking) how do we scale it down for smaller screen sizes, to flip that on its head and think about the smaller image as the default, and then how do we provide a larger image for the devices that have larger screens — laptops, desktops and so on.

I mean, partly that’s because the smaller screen device is going to include a whole bunch of phones that are not all that capable. We’ve got some great mobile browsers out there now, Mobile Safari and so on, but there’s also a lot of mobile phones that have kind of crappier browsers. So the safe default is to think about the lower bandwidth, think about the smaller images, think about the linearized design, and then to apply larger images, more content, multi-column layouts for the more capable browsers that are likely to be on a desktop or laptop computer.

Or, as Luke Wroblewski put it back in 2009: design for mobile first. Your base design is a plain, simple, bells-and-whistles-free experience that even the dumbest phone and the smallest screen can use. For more modern phones and tablets with support for media queries, we can lay on more styles and create new layouts to suit their dimensions, or make use of cooler CSS effects. Finally, for desktop browsers, create layouts and use assets that make the most of all that screen real estate. Of course, some desktop browsers just have to be different; for those browsers, we can use polyfills to include that support, or find other workarounds — or maybe just leave them to use the simplest design, if you’re feeling uncharitable! It’s so head-smackingly simple that you wonder why we haven’t all just done this from the outset.

Before you leap for your text editor, though, consider picking up Andy Clarke’s new 320 and up template. Using the excellent HTML 5 Boilerplate project as a base, he’s added a bagful of polyfills, helpers and bug workarounds, such as Selectivizr to add CSS3 selectors, Respond.js for media query support in Internet Explorers 6 through 8. The stylesheets come already prepared for five different device widths — small screen, 480px, 768px, 992px, and 1382px — plus one more for the iPhone 4 and latest iPod Touch’s Retina display. You can choose between separate stylesheets for each design variation, or a single stylesheet that contains it all.

What’s left for you to do? Of course, there’s more to responsive design than just squashing or growing your logo. Some interfaces might need you to show or hide some content at certain sizes, while others might contain entire features that are only intended for some sizes. Menus for phones may need to look and feel quite a lot different to one intended for a desktop computer, especially considering that more of us are using a fingertip to navigate. (Yes, there are still non-touch smartphones.) You might need to do some more work around context aware image sizing You may need to consider whether certain information on your website should be emphasised for mobile users. Whatever your needs, though, you should find that the 320 and Up templates are a solid, tried and tested starting point for when it’s time to build your next responsive layout project.