Choosing device sizes to support for your responsive designs
The problem isn’t anything to do with devices, pixel counts, or screen sizes. The problem is an inappropriate approach to designing in this medium. If you’re still using that approach don’t worry, it’s not your fault. We’ve all been guilty of it for a long time.
Designers have always (well, almost always) begun their design process by setting limitations to work inside. The size of the screen. At first it was 640px, then we all jumped to 800, then 1024, and so-on. It’s always been a bad approach because there is no such thing as a standard size for desktop, a standard size for mobile, or an acceptable compromise for any of them. Setting ourselves limits and designing inward from them has been working well enough until recently because up until recently the variation in device sizes wasn’t huge. Today there are simply too many bits of hardware out there that have so many different screen sizes, and even the ones that do have the same screen size often have different viewport sizes. We can’t design for some imaginary standard number of pixels anymore. We have no idea what size canvas people are viewing our stuff on.
What do we do then?
We start in the browser - sorry, if you’re used to comping up in Photoshop first that’s not going to help overly much these days. It’s great for look and feel - incredibly important in fact because designing purely in the browser tends to produce boring predictable type-based designs. But forget trying to craft a complete PSD and then translate it into a website. That isn’t going to work well either. We need to be designing visuals as we build. The two can no longer be separated into differing stages, the one now informs the other.
- Start with the smallest layout.
- Use liquid layouts only, no fixed width units anywhere.
- Stay with that layout and increase the browser width. When it looks funky, that’s your new breakpoint. Add a media-query and get designing from there up.
- Repeat the last step until there’s no bigger monitor in your possession.
If that’s left you with as many questions as when you started, you’ll do well to have a read of the following resources:
- Mobile First from A Book Apart.
- Mobile First an article from Net Magazine
- Adaptive Web Design a small book by Aaron Gustafson
- Responsive Web Design a small book by Ethan Marcotte
Good luck, and have fun!