I have reworded, cut and added to make it more readable as a blog post.
Rethinking the WebThe point of the internet is to reach people, not devices. There are approx 6.8 billion people in the world, 3.4 billion of whom have access to a mobile device. 1.3 billion people use the internet on their devices ~19% of the population. Many of these are using old phones with outdated browsers.
The problem with web developers is that they mostly have iPhones and develop exclusively for that device, but most of the world are using non-html5 mobile devices. 6% of the US population have iphones and less than 4% for the rest of the world. That's 15% of the world population you're missing out on.
So let's look at the main mobile browsers
- - Open source, Excellent standards support, Used by many leading companies, and many leading phone OS's
- Opera mini
- - Free to install, Ajax, Excellent Standards, Available on the same phones as Webkit and even more (including older phones), Very efficient with low data usage, Proxy browser.
So what is the correct adaptive experience? First, you do not know what the screen size is going to be. For mobile devices, the screen size can be between 128x160 to 1280x800, with various aspect ratios & changeable orientations. Therefore we need an adaptive layout for the site.
Case study: CollyFlexible, squishy layout which resizes based on the available screen width - except it doesn't work well for proxy based browsers. The proxy server renders the page the same way a desktop would, giving the user the full site rendered on a small screen as very small image, which you then have to scroll around. This is keyhole browsing, the viewport is much smaller than the content, like looking at a room through the keyhole.
In this case the site only really works on a webkit based browser. Challeng: Is webkit the new IE4? ("this site works best in IE4/Webkit").
Some guidelines for writing for mobilesee also LukeW's Mobile first Blog entry.
1. Mobile firsttraditional thinking: Desktop site + @media queries = mobile site But most devices fail the @media queries so they end up with the desktop site anyway (partly because they are based on older standards). Also mobiles will still have to download and parse the default desktop content before getting to their bit.
New thinking: Mobile site + @media queries = desktop site. (also known as progressive enhancement) This works because the desktop browsers move faster and (generally) get updated more often then mobiles, so most desktop browsers now follow the @media queries. Older browsers will still get a usable site.
2. Use well structured meaningful markup.Make use of the new elements in HTML5 to give the content semantic structure. Well defined class names make the structure even more meaningful. That way the browser can do some heavy lifting for you.
3. The Absence of @media queries is the fist @media queryAn all in one css file helps with http requests, browser caching etc. but will include a lot of cruft that small devices (don't forget expensive bandwidth costs) do not need. Also putting mobile specific rules at the bottom of the file is backwards!
Instead, thinking of point 1, the default stylesheet should be mobile compatible then add a extra stylesheets afterwards to progressively enhance the site.
Which is really point 4...
Why even bother?Because the mobile web is growing fast, especially in developing countries which are skipping the wired/pc based internet and going straight to the relatively cheap mobile market.
This post is licensed under cc-by-nc-sa