What It Does
- Encourages web designers to think about the mobile audience;
- Encourages the adoption of good habits for design and usablity;
- Discourages use of technolgies that may be fine on a desktop but not on mobile;
- Encourages designers to remember that mobile device capabilities are limited and that you cannot assume that everyone has a smartphone.
Can't we just code for the iPhone?
- If you want to, of course you can.
Can't we just code for the iPhone?
- If you want to, of course you can.
- But you'll reach more users if you code for less-able devices and add progressive enhancement.
Some Definite No-Nos
No excuses. Don't do it.
(Because it's really hard to handle multiple screens on a mobile, even if your device supports them.)
- Popups.
- And
target="_blank"
Some Definite No-Nos
- Popups.
- And
target="_blank"
- Graphics for spacing
Some Definite No-Nos
No excuses. Don't do it.
(Because every image is another network request, which is more latency and, often, more cost).
Use CSS, that's what it's for.
- Popups.
- And
target="_blank"
- Graphics for spacing
Some Definite No-Nos
- Popups.
- And
target="_blank"
- Graphics for spacing
- Frames
Some Definite No-Nos
- Popups.
- And
target="_blank"
- Graphics for spacing
- Frames
- Image Maps
Some Definite No-Nos
- Popups.
- And
target="_blank"
- Graphics for spacing
- Frames
- Image Maps
- Tables for layout
Some Definite No-Nos
Using tables for layout, as opposed to using tables to present tabular data, is bad practice on desktop as well as mobile (mainly for accessibility reasons).
On mobile, tables often force horizontal scrolling (which is naff) or may be transformed (server side or client side). This may work but do you want to hand control to a content transformation engine?
- Popups.
- And
target="_blank"
- Graphics for spacing
- Frames
- Image Maps
- Tables for layout
Some Definite No-Nos
- Popups.
- And
target="_blank"
- Graphics for spacing
- Frames
- Image Maps
- Tables for layout
- Nested Tables
Design Principles
Think in a single column
Mobile Web Best Practices - Example
Without BP http://tinyurl.com/2ypphd
- desktop (good) -
- phone (bad!) -
BP inside http://tinyurl.com/yq7z9m
- desktop (still good!) -
- phone (good) -
Key Points
- Work in a single column;
- Provide basic navigation on one line at the top of the screen;
- Other navigation goes at the bottom of the page;
- Don't obscure the content with an image;
- Get your markup right and you can use different stylesheets for different media.
The Mobile Stylesheet - really?
Yes, but...
The Mobile Stylesheet - really?
The marketing departments of the device manufacturers don't want to talk about the mobile Web, they are keen to offer the 'full Web' and so top end devices ignore @media="handheld" completely.
Thankfully, support for media queries offers a way out.
The problem is explained in detail in an article by W3C's Dominique Hazaël-Massieux called Return of the Mobile Stylesheet.
Dom proposed a solution based on different browser's habits and this works but a more efficient method, based on Dom's work, was proposed by Dean Hamack of Bushido Designs.
The Bushido Method
<!-- Mobile device detection by Bushido Designs: BushidoDesigns.net -->
<link rel="stylesheet" type="text/css" href="mobile.css" />
<style type="text/css" media="screen and (min-width: 481px)">
<!--
@import url("screen.css");
-->
</style>
<!--[if IE]><link rel="stylesheet" type="text/css" href="screen.css" media="screen" /><![endif]-->
<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-device-width: 480px)" />
Basically it uses quirks of different browsers to kludge around inconsistent implementation - and covers the majority, but not all, cases.
Read Dom's original article at http://www.alistapart.com/articles/return-of-the-mobile-stylesheet
Then read the Bushido article at http://www.bushidodesigns.net/blog/mobile-device-detection-css-without-user-agent/ (Note, this has moved a few times and may not be reliable).
W3C Mobile Web Best Practice in Practice
Many features that are familiar in the desktop world can and should be used on mobile... but let's flip the 'fail gracefully' mantra on its head and talk about progressive enhancement.
- Of course you can use CSS to define fonts that make your design look better but don't rely on fonts to convey information as in 'vegetarian options are shown like this'.
- Of course you can use colour on mobile, but again, saying really important information is shown in red just doesn't work in the limited contrast/bright sunshine/dingy pub world of mobile.
- Of course you can present tabular data in tables BUT if you can present the same information in a list, that's often going to be better.
<dl> lists are especially useful for this.
W3C Mobile Web Best Practice in Practice
Many features that are familiar in the desktop world can and should be used on mobile... but let's flip the 'fail gracefully' mantra on its head and talk about progressive enhancement.
- Of course cookies are useful - goodness knows it's hard enough to enter passwords on mobile - but if you rely on them as the only way to generate dynamic pages you're likely to lose a proportion of your audience.
- Of course you can embed video, Flash and anything else in your pages but provide an alternative representation as well. Even the iPhone doesn't (currently) support Flash.
- Of course you can use JavaScript but...
Progressive Enhancement - Example
This page:
- Uses a
dl list not a table
- Uses, but does not rely on, colour
- And is an example of how Not to do it!
The page is written almost entirely by JavaScript (try http://www.w3.org/2009/05/mwi_course_dl_badjs.htm with and without JavaScript enabled).
Progressive Enhancement - Example
Without JavaScript support the same page looks like this:
Progressive Enhancement - Example
The two frames below show exactly the same code as each other but we've disabled the JavaScript in the page on the right. The page is available separately (and through http://tinyurl.com/n8l7bm).
Progressive enhancements added
The same file with JavaScript disabled
