Where to begin? There are W3C standards, there are User Agent vendor woes and there are the conflicting interests of various content creators. These three things contribute greatly to a subject which, just lately, has become irksome to me.
Web Design and Mobile Devices.
The Problem
I believe that it's an important area, one that should have the attention of every web designer whose work is not limited to office intranets and other dens of iniquity. It is a widely accepted fact that content is increasingly consumed through mobile devices, some have even questioned the long-term prospects of desktop computers for casual users. This makes it all the more frustrating that designing for the Mobile space is such a patchwork.
I always work to published standards (or reasonably stable drafts), as I believe all designers and developers should. I miss the xhtml2 project, but I do like HTML5. CSS3 is a dream come true, or at least it should be.
Since CSS2.1 the standard has included 'media queries' that should allow a designer to specify certain sets of rules depending on the display media in use. Considering what a boon this could be, I wonder why it does not find better support in the mobile space!
In point of fact, I have come across an excuse or two. The one that seems to really explain the behaviour that I have seen is the problem of poor implementation by designers: It seems that up until now many of the few designers who bothered with handheld styling at all were so lackadaisical that the results convinced mobile browser developers that the handheld rules were best ignored. I dread to think how badly they must have been written.
Many mobile browsers, notably Opera Mobile, now render non-handheld styles by default. So ingrained is this behaviour that the browser engine actively chooses '@media screen' as distinct from '@media handheld'. I have read that the reason for this is to provide users with a better browsing experience based on the more supported screen styling.
It probably works for some websites, even on a mobile phone. On a tablet it's likely no problem at all. But, for a layout that tries to be artistic, that spreads itself against the available screen width (note: It's important to make sure that a layout will resize to suit the widest possible range of displays.) it can be simply silly! Especially with a page designed for a landscape aspect ratio and accessed in portrait.
So it becomes necessary to replace certain rules. A browser that's ignoring handheld styles robs us of the obvious, most standards-compliant route. There is a pretty good solution though, so long as we have support for other media queries allowing the use of different rules depending on screen width and other features.
We can then use those media queries to activate certain features for large screens and others for small screens, but we shouldn't have to. It is especially troublesome because various mobile service providers supply their own browsers on smartphones, leaving open the possibility that theirs might not support either handheld styles or media queries.
What's more, the disuse of handheld stylesheets encourages developers and designers not to use them, increasing the momentum of this particular downward spiral. The mobile web space moves further from the ascribed standards; standards that many have worked so hard to improve and spread.
Some situations call for targeted styles vastly different from each other. Treated badly this could lead to unwieldy use of dimensional media queries, but there are solutions.
The Solution
A relatively easy solution is to import different stylesheets, in whole, depending on the media queries. It's standards compliant and avoids bloating the served files, but unfortunately there are UAs out there that do not select media queries and may ignore any import directive served with one. A default file can be served, but it rather negates the benefit of the technique.
We can handle the issue on the server side, attempting to determine the user agent based on the HTTP header. It's a nice approach in theory, where PHP or similar technologies serves only appropriate content. Unfortunately it isn't reliable, as the user agent string can be readily altered.
The best thing to do, then, is combine techniques. Write forgiving style sheets, use media queries for both device and dimension based differentiation and employ user agent detection on the server. It's a patchwork solution to a patchwork problem.
A lot of people won't bother, but I (and hopefully others) think that it's important to properly employ web standards. These methods allow us to target mobile devices; if the practice spreads it will be noticed by UA vendors and they will move back to standards based handheld style implementation. After all, if handhelds are the future of the internet, then the internet needs to be designed for them.
The Future
Why is it so important to support standards like this? Because we're going to need a solid foundation to build the internet of the future upon.
e-Readers are feasible, increasingly popular devices now. Some of these have, as will more in the future, network connectivity. Knowing this, people will want to use their e-Readers to access the internet. But how should that be handled? Should they follow the current trend and default to screen rendering, or should they use handheld or print styles?
Handheld
Pros
They are handheld devices.
They share the portrait aspect ratio with mobile phones.
Cons
e-Readers (esp. with e-Ink) don't handle multimedia well.
Screen
Pros
e-Readers tend to have pretty good resolution.
Cons
Again, printed v. rich media issue.
e-Readers have relatively small screens.
e-Readers are usually in portrait aspect.
Printed
Pros
e-Readers are designed to simulate printed media.
Print styles are designed for clear reading, like a book or newspaper.
Print styles aren't likely to include multimedia content.
Cons
Traditional print media wouldn't support hyperlinks, whereas e-Readers could.
I'm sure there are other pros and cons for all three of those media types, but I think my point is served; it's going to be a contentious and confusing issue when it gets attention. Some will see it as a new way to serve literature or news, others as another e-commerce vector, countless other opinions will abound. What matters is what becomes most commonplace, which may be a new media type and a matching set of style trends.
In order that that most commonplace approach may be smoothly identified and implemented it must be supported in standards. Only a standards based web, in both the desktop and mobile space, can give us the groundwork for that.
No comments:
Post a Comment