Designing for Small First

Last week I mentioned that I’m working on a couple new websites.

This time around, I’m doing the builds “mobile first.” That’s to say I’m building them starting with a small (iPhone size) screen, then adding onto the designs for bigger screens all the way up to desktops.

A couple quick initial observations about this:

  • When you’re starting with a small screen, it makes you think about “what is really essential on this page?” Then you strip out what’s not, or provide a way to make it secondary. A big menu at the top of the page, for example, gets replaced by a “toggle menu” button to get it out of the way of the page content until the user is ready to browse for another page.
  • How things ought to wrap around one another as screens get wider becomes more clear when you’re starting small. It’s easier to add layout into a larger area when it becomes available than to cram things together when screen space shrinks.

Bonus discovery:

  • Thoughtful use of media queries (detecting what kind of screen the user is using) is much less a pain-in-the-butt than I thought they’d be.