Dealing with the Mobile Webspace

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.

Steampunk: my Philosophy

Today I happened upon a post to The Steampunk Workshop, written in August, talking about Steampunk Philosophy. Copied (and lightly edited) below is the (long winded) comment that I posted there.

My post

I've found that different people have very different specific reasons for appreciating Steampunk, but there are certain things that I find quite widespread. I'm going to focus on the relationship between Steampunk and industrialism.

As we can all agree. the genre takes a great deal of inspiration from the nineteenth century in the forms of literature, technology, fashion and other elements. We often talk about taking the technology of the time to its extremes, but in some ways that is exactly what we don't do. It is real history that did that, if one considers that modern electrical power stations run on steam and that today's factories are directly descended from the steam-driven mills of those supposedly halcyon days.

The truth is that the Victorian world (perhaps particularly England and her empire) was in the throes of the Industrial Revolution, which I consider to have reached its height in the nineteenth century (feel free to correct me). The revolution came with billowing smokestacks and pulsating steam cylinders, fine clockwork and precise machining, great dreams and hopes for the future of mankind! Oh yes, these are the things we choose to remember in our genre, the best of the industrial revolution.

But ours is an era of contradiction, as this genre reflects. In the modern world we are subject to, benefactors and victims of, an industrial commercial complex that straddles the globe. People today know luxury and opportunity beyond the dreams of our ancestors, carried onward by matching technology. Still, there is much discontent. We are disenfranchised, the individual a small piece of a larger machine. Few of us are able to fully explore the opportunities that the world claims to offer, we live in the shadow of commercial industry, fed by it even as we are imprisoned.

This too links to the Industrial Revolution. Before those advances in technology, production was achieved largely by means of cottage industry. In that era, individual craftsmanship was the norm. Resources and products were scarce and expensive, without the mass production of later times, and life was hard; yet, in that dog-eat-dog world, every person had the chance for individual accomplishment. Well, more or less.

Steampunk, it seems to me, reaches back into the heart of the Industrial Revolution and tries to undo the damage that was done; we embrace the power of technology and its potential to fulfill our dreams, but we recoil at mass production and the ruination of the craftsman. It is more than an aesthetic, more than literature, it is a deep-seated urge to restore the finest of craftsmanship. This is no easy task, but is served well by the Maker culture and is, it seems to me, becoming more widespread beyond either of these subcultures.

I am well acquainted with the presence of those whose interest is purely out of fashion; there is no wrong in that, such people provide an outlet for the creatives. Similarly, there are those whose interest lies solely in Steampunk literature and art, which may speak to them of who knows what. Still, for those of us who find hope in philosophies like (or unlike) that which I have outlined or those which others have, there is the whole.