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\u2019ll try to fill-in the gap with some practical tips when designing for mobile. <\/p>\n
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\u2019ll stick to the text as a primary content type in this article.<\/p>\n
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\u2019t understand the content you are suppose to design \u2014 the result will be too generic. That\u2019s simply because you can\u2019t typographically pronounce particular ideas and images if you don\u2019t get them in the first place.<\/p>\n
Once you get to know the content you are shaping, you can better determine varieties of the context \u2014 time, places, concurrent activities, audience and devices.<\/p>\n
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.<\/p>\n
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\u2019t support your text (At the time of this writing, kerning is not conveniently supported in CSS). Rinse, repeat.<\/p>\n
After you have selected the typeface (even if you\u2019re still not quite okay with it), deal with font-size and the white space for the paragraph. Up to this point, you\u2019re designing for the full range of devices, so it is very important to have the basic elements covered.<\/p>\n
Responsive design methodology \u2014 which I\u2019m sure you have heard of by now \u2014 introduced breakpoints, i.e. resolution increments based on the most popular screen resolutions. Breakpoints are fundamental to creating master layouts.<\/p>\n
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. <\/p>\n
If you\u2019re 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 \u2014 to provide a rest-place for the reader\u2019s eyes and the fingers that are holding the device. Secondly, it helps you establish the gutter \u2014 an empty space that shapes a column \u2014 which you\u2019d use later when designing wider layouts.<\/p>\n
My personal favorite 320 vertical grid is 20 + 280 + 20 pixels for text pages or 10 + 300 + 10 for web applications.<\/p>\n
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.<\/p>\n
Here\u2019s 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). <\/p>\n
Now that you have the comprehensive list, it\u2019s easy to create semantic groups. Use those groups as building elements for each master layout.<\/p>\n
Both on smart-phones and tablets, the secondary content would probably fall \u201cunder\u201d 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.<\/p>\n
On each next layout, place sideways the portion of the page that was formerly pushed \u201cunder\u201d and reuse the left and right page margins as new gutters.<\/p>\n
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\u2019s attention is inside the screen. In mobile browsers, you can\u2019t tell anything about the content of pages in other \u201ctabs\u201d. There\u2019s no room for such information, because every pixel counts on the mobile screen.<\/p>\n
On the small screen, the currently watched content doesn\u2019t have to fight for the reader\u2019s attention by introducing unnecessary decorations. On desktop screens, we\u2019re able to multi-task and hence we unconsciously compare things and shift focus. On tiny screens we can\u2019t do that. That\u2019s why we can get away with less rich visuals on the small screen in favor of clarity and simplicity.<\/p>\n
Only hand-curated developers\u2019 blogs work well with very little backward compatible markup for layout. The rest of the World, especially sites we build for clients \u2014 not to mention heavy-weight database driven systems \u2014 would simply break without a help of some extra markup here and there. <\/p>\n