This post is a summary of the original slides by Yiibu which you can see on
slideshare.
I have reworded, cut and added to make it more readable as a blog post.
Rethinking the Web
The 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
- Webkit
- - 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.
For more on this see PPK's recent blog series on Mobile browser market share:
part1,
part2,
part3 and
part4
Building a web app
Start with familiar territory in HTML5, css3 and JavaScript.
Most smart phones support all these very well.
Older devices will still struggle with some of the latest concepts.
However HTML was designed so that if the tag is not recognised it's content is just displayed.
We should be able to get an adaptive experience that works on all html supporting devices. (We'll forget about wap for now)
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: Colly
Flexible, 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 mobile
see also
LukeW's Mobile first Blog entry.
1. Mobile first
traditional 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 query
An 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...
4. Progressively enhance the site with JavaScript and @media queries
JQuery is a massive library for a mobile device to download and parse.
Instead try using xui.js or jQuery-mobile.
Use CSS 3.1 for animations instead of JavaScript. less code and it's faster where supported.
e.g.
.scrollto {
transform: translate(540px, -200px);
}
Make sure the core of the site works without JavaScript.
5. Adapt content (Especially images) appropriately for mobile devices.
Use smaller images for smaller screens.
Background images can be altered by the media's style sheet.
Many cms systems (e.g. WordPress) can pre parse the html before sending it to the client.
You can use info from the user agent or JavaScript+cookies to alter the image markup to use smaller/bigger images. Don't forget to alter the width and height attributes as well.
Use relative sizes to ensure that element fit the width of the screen.
6. Compress content where possible, avoid sending unnecessary data.
If you do not display or use something on a mobile device make sure that it is not downloaded.
Bandwidth costs more on mobiles.
display: none on an image still causes the browser to download the image source.
Fonts are still not supported on many devices and can also be quite large.
Minify CSS & javascript before sending it (but you do that anyway, right?).
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
