by Kyle Weems 11.August 2008 12:40
There's a number of axioms that we, as humans, take for granted. One of these is that if it is small, it must be cute.
It's a reasonable thing to believe. After all, kittens are cute, Leptotyphlops carlae are cute, and even the diminutive toy horses that Mindflier (aka, Mindfly employee) Janae is obsessed with are cute. However, there are several exceptions that prove that small is quite clearly not always cute, such as earwigs, Verne Troyer, and most websites on mobile browsers.
Devices other than computers are accessing the web-o-tron in greater and greater numbers these days, chief among them handheld devices such as mobile phones. While the growth of handheld-related web visits in North America has been pretty small so far due in part to the horrendous pricing plans and comprehension of reality by mobile phone service providers, the massive popularity of the iPhone is showing that not only are web-capable handheld devices here to stay, but they're now also becoming the hot 'must-have' items for a growing number of people.
Seriously, try to talk to Mindflier Karina for more than five minutes without her drooling over the idea of owning an iPhone. I suggest bringing a napkin or something.
Web development people have known of this growing trend for years. In fact, we've been preparing for such eventualities with nifty contraptions like the media attribute for link tags and the @media rule in CSS sheets. In CSS3 the ante has been raised by extending the @media rule with media queries, which brings a whole cornucopia of options for device and capability-specific presentation for websites.
Yet I'm willing to wager that well over 90% of websites today have little to no options for being viewed optimally on handheld devices. This might be alright for now, with so far only a small percentage of end users using their tiny screens to view pages on a regular basis, but it goes without saying that this won't be the trend forever, and the smart web designer/developer will be pushing ahead with preparing for those users right now, instead of playing catch-up tomorrow.
So what's the big deal with looking at a website with normal stylesheets with a handheld device?
Well, mostly, size. With only a few notable exceptions, handheld devices have screens only slightly larger than a stamp, and often website designs are fixed at widths of 900 pixels or more. With the media-rich saturation of the modern Internet, a lot of these sites have visually complex designs or large images that won't fit on the tiny browsers of phones (assuming they even get loaded at all). This can turn a gorgeous website into a horrendous patchwork monster, moaning in pain and begging for a swift merciful death.
Rather than finding a shotgun and a priest, we need to be reaching for the appropriate tools of the trade.
Let's look at an example (and fictional) website, Ninjapedia. In Example #1 we see both my limitations as a designer and a page that at least loads as intended in the major browsers on a computer. However, if you were to view it in a handheld device like an Opera Mini-equipped phone, you'd find it rendering quite a bit differently. Opera provides a really nifty simulator for those of you without a browser-equipped phone. Opera Mini (and the browser on the iPhone) will try to load the normal stylesheets to begin with, so the page will show up in a fashion similar to what was intended, although (in Opera Mini's case) it'll be quite zoomed out, and the end user is forced to do a lot of zooming and panning to get all the content. If you haven't experimented with that, you'll quickly find it quite tedious. My own LG mobile phone rendered it even more horribly, making the page pretty much unviewable.
The first tool in the arsenal, then, is to make use of the link tag's media attribute to send specific device types to specific stylesheets for viewing a website. As an example:
<link rel="stylesheet" href="screen.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="handheld.css" type="text/css" media="handheld" />
The first link tag has the screen and projection types for the stylesheet, meaning it will render on regular browsers connected to monitors or projectors. The second link tag's value of handheld for the media attribute means it should (key word: should) be loaded by handheld devices. Using these media-rich link tags, then, you should see Example #2 the same on regular computers, but a much less visually ambitious (but still branded and styled) version of the page should show up on handheld devices.
Once again, note the word should. Several ambitious handheld browsers, like Opera Mini and iPhone, think they've got what it takes to be a contender, and like or a kid on Thanksgiving try to sit at the big table. They ignore handheld stylesheets entirely and proceed straight to the regular monitor sheets (such as 'screen'). They even do a very respectable job of rendering the pages. However, due to the small size of their screens, they don't usually look quite right, especially with designs fixed at large widths or utilizing large banners.
As an alternative to the media attributes on link tags, we can instead use the @media rule in CSS sheets. This largely is more of the same, but putting the media declarations in the stylesheet itself. For example:
@media screen {
rules go here
}
@media handheld {
rules go here
}
Example #3 shows this, but the results are effectively the same as Example #2. The problem is that many handheld devices are increasing in capability in rendering pages, but their screens aren't getting any larger, so to view pages effectively end-users with the devices, a ton of zooming and panning occurs. Which, for the record, gets really tedious.
Tedious is not a desirable user experience. I haven't done any usability studies to prove this, but I'm going to guess that Jared Spool and friends have some data somewhere that backs up this fact.
So how do we make the most of these tiny yet capable browsers, while still making websites pretty for big screens and usable for the tiny, incapable browsers?
Well, we start looking at the Media Queries module. Like any part of CSS3, it is not universally implemented, and probably won't be until roughly four years after a man finally lands on Mars, but several browsers (Notably, several tiny browsers) have started making use of it.
What are media queries? They're extensions to the @media rule in CSS. You can decide whether to load styles based not only on the rendering type (screen, handheld, etc) but also based on the screen size and other capabilitites. This is the perfect way to solve our problems with the capable yet tiny browsers of the world. For example, to load a group of styles for a browser attached to a device with a small screen, you could encapsulate the styles as follows:
@media all and (max-width: 400px) {
styles go here
}
This will load the stylesheet (on a capable browser) that has a screen smaller than 400px wide. So putting this all together we've got Example #4, which looks as intended in normal browsers, has a reformed appearance for small but capable browsers, and a more simplified look for normal handhelds. Hooray!
The topic of media queries gets complicated. IE8 is not currently scheduled to support any media queries, Firefox doesn't have support (yet, but should with 3.1) and Safari and Opera support them fully. So the best solution to satisfy all these browsers (And all teh strange pocket browsers of the world) is probably a more robust approach that combines link tags with media attributes, media rules and media queries. Extra work? Definitely. Worth it? If iPhone sales are any indication, it will be.
Plenty of resources are out there for taking a robust approach to making websites accessible to handheld devices. In particular Opera has plenty of reources, such as this article on how to serve the right content to mobile browsers. Go forth and get tiny!