http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/
This article was written by Bruce Lawson from Opera. I sat in on his HTML5 panel at SXSW. He's a great speaker and very knowledgeable. I could hear his British accent as I read the article.
Couple of interesting points he makes before getting started:
If you're not catering to your mobile users, you can be sure that your competitors are.
Many of the strategies for mobile make sense for full websites too. Here's the way he put it:
3 strategies to make your website mobile-aware
1) Code well and do nothing special for mobile
- Make layouts semi-liquid with min-width and max-width and em based typography
- code for accessibility which translates well to mobile compatibility
- use sprites
2) Make a separate "mobile" site
This is a second, strippped down version of the site. It uses browser sniffing to detect the user's browser and redirects the user to the mobile version of the site.
This can be problemmatic when new browsers are introduced or even new browser versions because the scripts to detect versions require updating. It can be very frustrating to the end user when on a desktop browser is mistakenly redirected to a mobile version of the site simply because the detection script is outdated.
- Mobile sites require a mobile site layout template and can use the "viewport" metatag to control the size of the display loaded
3) Build mobile-aware adaptive sites
- most difficult to pull off but brings the best of both worlds to users
This approach utilizes "media queries" - which is a CSS3 feature which detects media attributes. It is currenlty supported in Opera Desktop, Opera Mini and Opera Mobile, Safari (desktop and iPhone/ iPad), Chrome and Firefox and will be supported in Internet Explorer 9.
This allows for the CSS to render according to the media. For example, a wider logo could be designated for a larger screen whereas a mini version could be designated for a smaller screen.
The benefit of this is that it is device-agnostic. The detection is focused on the environment, not device-specific capabilities. This makes this approach more future-proof and widely useable.
Other useful mobile-friendly techniques
Combine files and reduce requests across the network
As mentioned before, the slowest part of any mobile device Web use is the network. Every image, CSS file, JavaScript file, CSS background image, etc. is called over the network and each of those HTTP requests takes an unpredictable amount of time.
CSS Sprites
Combine as many scripts as you can into one file (e.g. utilities.js)
Combine as many stylesheets as you can into one file
Minify your .js and .css files
Make sure your server uses gzip to compress all files it sends
Consider using Data URIs for images and CSS background images. This provides a way to include data inline inside web pages.
Use Scalable Vector Graphics - rendering of shapes mathematically so that an actual image file is not being loaded, rather the markup is told what to draw.
Put script elements as far down in the source as possible allowing the content to load while the scripts load in the background
State the dimensions of images in the HTML allowing the browser to save the space for the image and when the image arrives, it places it in the reserved space. Otherwise, the browser must redraw the page.
Familiarize yourself with HTML5 which has many built-in useful features like form validation.
Testing can be done with emulators running on the desktop
This article was written by Bruce Lawson from Opera. I sat in on his HTML5 panel at SXSW. He's a great speaker and very knowledgeable. I could hear his British accent as I read the article.
Couple of interesting points he makes before getting started:
If you're not catering to your mobile users, you can be sure that your competitors are.
Many of the strategies for mobile make sense for full websites too. Here's the way he put it:
Quote
Mobile users are task-focused users. And so are all users
Many developers and usability pundits advocate making mobile-only sites because mobile users are in a hurry; they’re on the go and want to perform one specific task and then finish. A common example cited is that of a restaurant site. The mobile user wants to find the location, the menu and the opening hours so, the argument goes, the mobile site should contain this and nothing else.
This is a good argument, but it’s only half true. If it were 100% true, what would be on the "full" website? Presumably, a movie of the decor, some atmospheric music, animated representations of the house special dishes, and a downloadable menu in some fancy font. The fallacy here is that users of desktop computers are not task-focussed and have time to waste on an immersive branding experience. The truth is that all users are in a hurry, and all users want to find the information, then leave your site and go and do something more interesting — like taking their partner out to dinner. You should therefore make an effort to reduce clutter and save time for all users — one site should be able to serve the needs of both mobile and desktop users.
Mantra #2: just because a desktop site allows you more space to fill, it doesn't mean that you should.
3 strategies to make your website mobile-aware
1) Code well and do nothing special for mobile
- Make layouts semi-liquid with min-width and max-width and em based typography
- code for accessibility which translates well to mobile compatibility
- use sprites
2) Make a separate "mobile" site
This is a second, strippped down version of the site. It uses browser sniffing to detect the user's browser and redirects the user to the mobile version of the site.
This can be problemmatic when new browsers are introduced or even new browser versions because the scripts to detect versions require updating. It can be very frustrating to the end user when on a desktop browser is mistakenly redirected to a mobile version of the site simply because the detection script is outdated.
- Mobile sites require a mobile site layout template and can use the "viewport" metatag to control the size of the display loaded
3) Build mobile-aware adaptive sites
- most difficult to pull off but brings the best of both worlds to users
This approach utilizes "media queries" - which is a CSS3 feature which detects media attributes. It is currenlty supported in Opera Desktop, Opera Mini and Opera Mobile, Safari (desktop and iPhone/ iPad), Chrome and Firefox and will be supported in Internet Explorer 9.
This allows for the CSS to render according to the media. For example, a wider logo could be designated for a larger screen whereas a mini version could be designated for a smaller screen.
The benefit of this is that it is device-agnostic. The detection is focused on the environment, not device-specific capabilities. This makes this approach more future-proof and widely useable.
Other useful mobile-friendly techniques
Combine files and reduce requests across the network
As mentioned before, the slowest part of any mobile device Web use is the network. Every image, CSS file, JavaScript file, CSS background image, etc. is called over the network and each of those HTTP requests takes an unpredictable amount of time.
CSS Sprites
Combine as many scripts as you can into one file (e.g. utilities.js)
Combine as many stylesheets as you can into one file
Minify your .js and .css files
Make sure your server uses gzip to compress all files it sends
Consider using Data URIs for images and CSS background images. This provides a way to include data inline inside web pages.
Use Scalable Vector Graphics - rendering of shapes mathematically so that an actual image file is not being loaded, rather the markup is told what to draw.
Put script elements as far down in the source as possible allowing the content to load while the scripts load in the background
State the dimensions of images in the HTML allowing the browser to save the space for the image and when the image arrives, it places it in the reserved space. Otherwise, the browser must redraw the page.
Familiarize yourself with HTML5 which has many built-in useful features like form validation.
Testing can be done with emulators running on the desktop