Mat’s blog

Hi, my name’s Mat Tomaszewski. I’m a UX & visual designer, currently at Skype.
And well, this is my blog... in case you weren’t sure.
If you’d like to see some of my work, have a look at mat-t.com.
Enjoy responsibly.

12.10.2010 How to make your CSS *really* mobile-friendly

Mobile web stretches far beyond iOS and Android...

Everyone’s going mobile. Or thinking about it. If they don’t, they’ve probably been living in a cave, eating rocks and squirrels and listening to Pet Shop Boys. Or something equally unhealthy.

So what does “going mobile” really mean? Technically speaking, there are only two options:

  1. building a native mobile app,
  2. creating a web-based service, optimised for mobile devices.

There are obvious benefits to both. Going native helps with the user experience and exposure on a particular platform. Sticking with web means you don’t have to worry about building separate apps for iOS, Android, RIM, Windows or Symbian, going through the approval processes, etc. You gain instant platform independence.

Or do you?

Myth #1. Mobile web = Mobile Safari.

First, let’s be honest—web experience on the iPhone is pretty damn good. At least compared to some of the competition. It has great impact on how we think about mobile web and how we think the mobile web should be. 

But – however impossible it may seem – iPhone market penetration is still relatively low, even in rich, gadget-hungry Europe. Not to mention worldwide.

Great, but what does it mean in practice?

In short, one thing really—most of the world is still using Nokia, a staggering estimate of 1.3 billion devices still in circulation. The rest of it uses Blackberrys, iPhones, Android-based phones, and the whole long tail of devices we tend to forget ever existed.

A fundamental question begs to be answered here. Is it really worth ignoring most of the world when creating (what we want to be) a mobile-friendly site?

If your answer is No, read on.

Myth #2. All I need is a bunch of @media queries at the end of my CSS.

Wrong. This great presentation by guys from Yiibu explains in beautiful detail what I will just summarise.

The above “@media query” thinking will result in the following:

  • you automatically ignore all mobile browsers that do not support media queries (again, most of the world),
  • your CSS (and all image assets that come with it) will still load in whole on those devices, adding unnecessary bandwidth (so precious on slow mobile connections!).

The result? Your site will probably not look even close to mobile-friendly.

The solution to this is trivially simple. Quoting Yiibu:

"The absence of support for @media queries is in fact the first @media query"

Another words, it’s a mobile first approach. When building your code, you should first call a stylesheet that supports most rudimentary browsers, then add more advanced features for modern mobile browsers in a separate CSS file, and finally add more sophisticated stylesheets for larger screens and modern desktop browsers. Progressive enhancement instead of graceful (which is not so graceful in this case) degradation.

Beautiful, isn’t it?

A real-life test

So much for the theory. Intrigued by those ideas, I decided to build a simple site that would test the concept. As I was about to build my online portfolio, it was a perfect opportunity to give it a go.

This is the site. And this is what I did.

<link href="css/default.css" rel="stylesheet" media="screen, handheld, print, projection">

<link href="css/a-grade-mobile.css" rel="stylesheet" media="screen and (min-device-width:320px)">

<link href="css/desktop.css" rel="stylesheet" media="screen and (min-device-width:768px) and (min-width:768px), print, projection">

<!--[if lt IE 9]> <link href="css/desktop.css" rel="stylesheet" media="all"> <![endif]-->

<!--[if lt IE 8]> <link href="css/ie_7.css" rel="stylesheet" media="all"> <![endif]-->

<!--[if lt IE 7]> <link href="css/ie_6_and_below.css" rel="stylesheet" media="all"><![endif]-->

OK, let’s break it down.

<link href="css/default.css" rel="stylesheet"  
media="screen, handheld, print, projection">

This is the basic mobile-oriented stylesheet. It only contains styles that are required for the site to display correctly in a simple mobile browser.

<link href="css/a-grade-mobile.css" rel="stylesheet" media="screen and (min-device-width:320px)">

This is the stylesheet for advanced mobile browsers that detect @media queries. Minimum device width is set to 320px to cover older versions of the iPhone and other smartphones.

<link href="css/desktop.css" rel="stylesheet" media="screen and (min-device-width:768px) and (min-width:768px), print, projection">

This stylesheet adds styles for all modern browsers on every device with minimum screen width of 768px, so from the iPad upwards. There are some orientation-specific styles within the document itself, too (note how the text in the project descriptions subtly changes size when you rotate the iPad).

<!--[if lt IE 9]> <link href="css/desktop.css" rel="stylesheet" media="all"> <![endif]-->

Since IE 8 and below does not support @media queries (I did mention ‘modern browsers’ above, didn’t I), the stylesheet is loaded again, just for Microsoft’s babies.

Stylesheet references that follow are simply some IE-specific fixes, nothing to do with mobile.

Enjoy :) 

Update 8.07.2011
With Nokia’s market share diminishing rapidly and A-grade browsers expansion, the shift in the mobile landscape is clear and designer’s job becomes easier. The need to remain flexible and as wide-reaching as possible is as relevant as ever, and progressive enhancement is still, in my opinion, the right approach.


Image CC by SA: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

CSS ✳ mobile ✳ fluid layout ✳ responsive design 

Notes

  1. 4lienmatt reblogged this from mat-t
  2. telecoms-evolution reblogged this from mat-t
  3. mobileordering reblogged this from mat-t
  4. web-design-bangalore reblogged this from mat-t
  5. imprumutrapid09 reblogged this from mat-t
  6. profitxtrem reblogged this from mat-t
  7. girl-kute reblogged this from mat-t
  8. psdtohtmlshop reblogged this from mat-t
  9. alexisnc1 reblogged this from mat-t
  10. billbyrb reblogged this from mat-t
  11. wap-tin-tuc reblogged this from mat-t
  12. road-surfacing reblogged this from mat-t
  13. vita-cheats reblogged this from mat-t
  14. garciasales reblogged this from mat-t
  15. ajmarsland reblogged this from mat-t and added:
    So what does “going mobile” really mean? Technically speaking, there are only two options: 1. building a native mobile...
  16. mat-t posted this