The Future is here!
Media convergence seems to have defined itself as an internet-television thing, but it
is so much bigger than that. It is more about the flow of information through a single conduit,
broadband internet, for delivery to not only desktop computers and television sets, but game consoles,
PVRs, set-top boxes, high-definition displays, electronic billboards, kiosks and yes, you
guessed it...mobile handheld devices that come in all shapes and sizes equipped with an evolving
array of features and capabilities.
Virtual Deja vu.
I've logged hundreds of hours since I started this project
"site-seeing" mobile-friendly web sites, in order to examine the methodologies others were using to
port existing web content from full-size sites to a small-screen, device-friendly format to seek
possible solutions for ongoing annoyances, and get a better sense of the environment as a whole.
Over time, after searching every mobile-friendly site I knew to exist, a sense of deja vu emerged.
The mobile web environment is very reminiscent of the pioneer days of the early World Wide Web, only
compounded by more complex challenges.
As were the early web sites of yore, mobile-friendly sites are mainly textual and most lack any
of the engaging qualities we've come to expect from the web. Mobile-formatted sites are not easy to find,
beyond the dozen or so link directories at mobile portals and magazine sites. I also found that most of
mobile-friendly sites contained only a fraction of the content at their full-size counterparts. Blogs
are another story. Subject intense, but lots of content!
WML, SVG, CSS, XHTML, SMIL...so, what's the difference?
As is true with any
emerging technology where development is still immature, learning to design and reformat
mobile-friendly content for even a 240px x 320px pda screen requires a dramatic restructuring of the
entire site structure. As I found out, it not as easy as it looks! If you could only take an existing web page and magically
shrink it down to fit a tiny screen.
In the early days of the web, that's what print media wanted us to do to display a printed document on
the web. It also took a while for them to understand why it took much longer (and therefore cost
more money) to code html to format the page layout for the web than the 5 minutes it took them to
type the draft in Word on the computer. We have come a long way since then, as we now know that people
interact with web content differently than they do with printed content.
Apply magic. Remove image bloat and stir vigorously.
Fast forward to 2004. Similar dilemma. Only now, the same media people, seasoned in the ways of the web,
want us to refit existing web content to the small screen.
SVG (scalable vector graphic) format and subset mark-up languages of the ubiquitous XML are the magic
ingredients for the scalability of content to big and small screens alike...AND MORE! XHTML and CSS together
will liquify layouts like a shape-shifter! SMIL is a multimedia markup used for layout display and
time sequencing of audio and video content. WML enables navigation on mobile appliances without input
devices, and gives multiple functions to a small number of buttons on a cell phone. There are
dozens of hybrid mark-up languages. Visit the comprehensive W3C
site for more in-depth information.
Scalability is only half the story.
For mobile interface design, throw everything you know about designing web interfaces out the window.
Now. Oh, you can keep the page scroll option, but use it sparingly. Any handheld owner will tell you,
the most tiring, time-wasting, annoying task when web browsing on a handheld is relentless scrolling
to read or view content. The worst is horizontal scrolling.
Although the structure and task naming metaphors of WML are based on the card deck principle, compact layering
of mobile interfaces using depth of content to form the hierarchy of data display gives the user control over
how much or how little information he wants about any particular topic without having to slog through scroll
after scroll on a page for a highlight of information. Global navigation visible on every page is ideal, but
not practical, given the sparse amount of real estate available on a small screen. The tab metaphor running
vertically along the edge of the screen is a suggested way to manage efficient navigation.
In mobile interface design, there must be far less reliance on images. Creative use of color used with
CSS replaces the dependence on images to visually engage the visitor. Another thing that has not changed.
The 8-second rule still applies. If images are too large and makes the visitor wait, he's gone...
When I started this whole mobile dev project, I had absolutely no idea which protocol to follow. My first
couple of weeks were spent web researching and forum lurking to learn about ALL of them, and many more
than are mentioned! Aesthetics and good design are important to usability. Mobile web sites don't HAVE to be
ugly, but for now, most of them are. It's folks like you and me that have to change that!
