A few Mobile First tips

There has been a lot of talk about mobile first web design last year (2011). We had many great presentations and books by industry leaders about the core concepts and the big picture on the web. I’ll try to fill-in the gap with some practical tips when designing for mobile.

Collect and understand content

First and foremost, content-out approach obviously requires obtaining content: texts, pictures, video or audio also known as different content types. Since I want to keep it simple, I’ll stick to the text as a primary content type in this article.

After collecting all your content, the obvious next step is to actually read it and understand it. The more you learn about what you are trying to give a meaningful form to, the better the result. If you can’t understand the content you are suppose to design — the result will be too generic. That’s simply because you can’t typographically pronounce particular ideas and images if you don’t get them in the first place.

Once you get to know the content you are shaping, you can better determine varieties of the context — time, places, concurrent activities, audience and devices.

Letters

Now that you know your copy, you can start choosing typefaces that support it. At this point, it is wise to learn more about the author of the text and use their personal attributes such as educational background, narration style or sound of voice. In essence, use information about the author as a reference for the typeface selection.

Create a list of the most important terms or phrases from the text and use those in a typeface preview panel. Check for weird kerning pairs and avoid typefaces that technically don’t support your text (At the time of this writing, kerning is not conveniently supported in CSS). Rinse, repeat.

After you have selected the typeface (even if you’re still not quite okay with it), deal with font-size and the white space for the paragraph. Up to this point, you’re designing for the full range of devices, so it is very important to have the basic elements covered.

Basic layout

Responsive design methodology — which I’m sure you have heard of by now — introduced breakpoints, i.e. resolution increments based on the most popular screen resolutions. Breakpoints are fundamental to creating master layouts.

The easiest approach to build responsive layouts is to first design a common denominator content units, for instance a paragraph, a list, a table, an image. Whichever element you chose to design first, be sure it covers the majority of content on a page. If you are confident enough, add a headline to the mix and design the whole group at once.

If you’re targeting the 320 pixels as the lowest value (Apple iPhone portrait orientation), your content unit should be then designed to fit such a tiny space. The white space around a column of text serves two purposes. The first role is pure typographical — to provide a rest-place for the reader’s eyes and the fingers that are holding the device. Secondly, it helps you establish the gutter — an empty space that shapes a column — which you’d use later when designing wider layouts.

My personal favorite 320 vertical grid is 20 + 280 + 20 pixels for text pages or 10 + 300 + 10 for web applications.

Grouping content

It is wise to group similar content into a few major groups in HTML, for instance: the page specific content + the site-wide content. Then branch the page specific content into the primary and the supplementary content, and so on.

Here’s an example: If the primary content is an article, then the page specific content are headlines and the leading image, the article text and (pull)quotes. In that case, the supplementary content is meta-data (the author, publishing and last modification dates, categories, tags etc.), a list of comments (with authors, gravatars, comment bodies etc.), rating tools, sharing tools, a list of related articles (with or without image thumbnails).

Now that you have the comprehensive list, it’s easy to create semantic groups. Use those groups as building elements for each master layout.

Both on smart-phones and tablets, the secondary content would probably fall “under” the primary content. But instead of linear image positioning inside the text in the primary content area on the small screen layout, you can float images left and right at medium-sized layouts to create more interesting flow.

On each next layout, place sideways the portion of the page that was formerly pushed “under” and reuse the left and right page margins as new gutters.

Simple vs. rich designed

There are a number of differences between mobile and a traditional desktop layout, but the one rarely considered is that the mobile screen maintains much better focus once the reader’s attention is inside the screen. In mobile browsers, you can’t tell anything about the content of pages in other “tabs”. There’s no room for such information, because every pixel counts on the mobile screen.

On the small screen, the currently watched content doesn’t have to fight for the reader’s attention by introducing unnecessary decorations. On desktop screens, we’re able to multi-task and hence we unconsciously compare things and shift focus. On tiny screens we can’t do that. That’s why we can get away with less rich visuals on the small screen in favor of clarity and simplicity.

Divitis

Only hand-curated developers’ blogs work well with very little backward compatible markup for layout. The rest of the World, especially sites we build for clients — not to mention heavy-weight database driven systems — would simply break without a help of some extra markup here and there.

You are allowed to use as many non-semantic divs as you need, but always question yourself whether you really need it, or is there a better solution.

…

If you happen to be in Zagreb on Thursday, January 19th 2012. I’m giving a 15-minutes presentation on this topic; More info about the event.