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

Content-out approach requires from designer to first obtain some texts, pictures, video or audio also known as content type. Since I want to keep it simple, I’ll stick to 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 working with — the design will be too generic. That’s simply because you can’t typographically pronounce particular ideas and images if you don’t get them.

Once you get to know the content you are designing, you can better determine the context — time, place, concurrent activities, people and devices.

Letters

Now that you know your copy, you can start choosing typeface(s) that support it. At this point, it is wise to learn more about the author(s) of the text and use their personal attributes such as educational background, narration style or sound of voice. Use information about the author as an additional 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 if any 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 selected the typeface (even if you’re still not quite okay with it), deal with font-size and micro white space, i.e. leading and margins. Up to this point you’re designing for the full range, so it is very important to have these common design elements covered.

Basic layout

Responsive design methodology (which I’m sure you have heard of by now) introduced breakpoints — 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 unit, for instance a paragraph, a list, a table or an image. Whichever you chose, be sure it covers the most important content on a page. If you are confident enough, add a headline to that list and design the whole group.

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. White space around the text column serves two purposes. The first role is pure typographical — to provide a rest-place for readers’ eyes and the fingers that are holding a device. Secondly, it helps you establish the gutter — an empty space that shapes columns — which you’d use later on with wider layouts.

My personal favorite 320 vertical grid is 20 + 280 + 20 pixels for text pages (or 10 + 300 + 10 for applications, but I digress)

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 in a news 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 (author, publishing/modification date, 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).

You can easily see from the list how easy it is to create semantic groups. Use those groups as a building elements of your master layouts.

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 smart-phones layout, you can float images left and right on the tablets layout 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.

On simple vs. rich designed

There are a number of differences between mobile and desktop layout, but the one rarely considered is that mobile screen provides a better focus once your attention is inside the screen. In mobile browser, 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 small screens, the currently watched content doesn’t have to fight for a reader’s attention by 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 mobile in favor of clarity and simplicity.

On divitis

Sadly, I have seen many inexperienced developers (even the famous ones) using pretty harsh language against their peers using non-semantic markup. I can remember I did that more than once in my early days.

Only hand-curated design/developer’s 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.