One Web Works Fine (18th February 2009)
Using CSS lets authors tailor website design for each medium:
<link rel="stylesheet" type="text/css" media="screen,projection" href="/style.css">
<link rel="stylesheet" type="text/css" media="handheld" href="/handheld.css">
<link rel="stylesheet" type="text/css" media="print" href="/print.css">In each stylesheet:
style.css- Full graphics with Sliding Doors and
%widths. (You aren’t still usingpx, are you?) handheld.css- No decorative graphics and only the most important parts displayed. Linearised layout with tight typography. Navigation bars which wrap to new lines instead of navigation lists.
print.css- Only the main content with key images presented using the typographic conventions of printed publications.
Browsers select the design which best suits them. A graphical browser showing a Print Preview would apply print.css. A “printer-friendly version” 5 years ago is as unnecessary as a “mobile-friendly version” today.
Better Websites are Better
Bruce Lawson makes the point that clear design which prioritise the tasks users want to accomplish work best for everyone. Make one excellent website and everyone wins.
Or, as my old man says: “Do it once, do it right.”
Adaptable Content for Mobiles
Let mobile devices choose whether they are media="screen" or media="handheld". As discussed on #whatwg at the start of this year.
- A device with a narrow screen might have zooming and super-duper hardware. The full-fat site would work best here.
- An older version of that model might have the same screen size but be less performant and usable. The
media="handheld"design is best here. - A network with clever enough proxies might do enough to adapt the full-screen version for both devices.
At best, Media Queries will become the new UA string where everything pretends to be everything so it gets everything. Besides which, designing for specific px widths is a mistake from the bad old days.
Letting UAs choose what’s best for them and adapt it as necessary is the essence of device independence. That’s what underpins One Web, causing Mobile Web and Web Accessibility to converge on the same best practices.
What’s Good for the Goose is Good for the Gander
Stupid mobiles made in 2004 are like the stupid browsers of last century. But sensible mobile browsers existed way before 2004 and did so on what Nielson calls feature phones. Shipping better browsers on feature phones means a better mobile web.
There were a handful of little-used yet very capable, standards-compliant browsers for the desktop last century. This led to Firefox and a renewed cross-pollenation between browsers. These innovations have let desktop users “take back the web”.
As Henny Swan points out, what worked for the desktop can work for the mobile.
For example, flat rate Internet access was rare on the desktop last century. It’s now the norm and users demand it. Similarly, flat rate Internet access for mobiles has now been commonplace for a year or two in the UK.
Sensible mobiles solve the mobile web. The handsets need not be turbo-charged if the network do clever things. In the meantime, writing a handheld stylesheet is easier and more sustainable than a parallel website.