Archive for Aug 2011

Web is not print, but web isn't web either

So people are learning that websites are not print, which is good, but here are the main points to re-convince you:

  • Print has complete control over layout and formatting; web-browsers allow users to override a lot (and do not agree on a lot of formatting).
  • Print is static, scrolling does not exist except for page folds; web is dynamic and allows for search and multiple "page-fold" mechanisms.
  • Print has more typography legacy than web; web has more usability legacy than print.

But is that the end of the story?

Control

Simple browser reality make this a simple truth; pixel-perfect does not exist and you should design for layout-flow and not layouts themselves. But this is harder than it sounds, because often you want something to look good, but you want to keep stuff simple for screen-readers and other accessibility.

An example is multiple columns; you want to keep lines short enough for people to comfortable read them (which was a print thing), but you also want a flow (which is where the web says hi). CSS3 multi-columns can provide that, but now you want to keep sub-headers and a reasonable amount of content together, avoiding rogue headers.

Forcing headers to break columns is not that scalable, because it will look ugly/unbalanced in a lot of situations and it requires "hard-coding" which headers will break. The hard part is that browsers have not really implemented the break-inside: avoid, otherwise this would be a matter of testing out header + * or similar constructs.

But what if you really want to structure stuff into specific columns? Well, there is this old HTML-tag called table. Everybody hates it for some reason, but it highlights an often forgotten golden rule: what is the nature of your "data"? If the columns matter, you are creating a table...

Shift your attention from making it look good to making it behave and react well, which is a pillar of fluid design I guess.

Static and dynamic

I have some background in print and print is awesome! You have total control and when it is done, you only have to pray to multiple gods there is no PDF-version-feature-font-disaster somewhere along the line to paper.

But websites are dynamic and it is time people really start using that; but again, keep in mind what is the real problem. I sometimes read people should optimise for search, but what if people do not know what to search for? If you are on a insurer's site, sure, search is insanely important; people know what they want or something that is similar to what they want. If you read the news or a magazine however, the problem shifts.

Articles call for a different approach I think: there is a need to know what you already read, but search is limited to re-reading something you read before. Hence there is a market here for mechanisms to keep you informed about what you have not read yet. RSS-readers and older-style (yeah, really) websites do this: they keep a record of what you have read and what's new; either by not showing old articles (RSS) or by visually marking the difference between what you have seen and what is new. What it creates is a feeling of being in control of the information, similar to turning the last page in the newspaper: I have seen it all.

There is also the matter of visibility of articles: what amount of the article is glance-able? The header? The header plus introduction? Print does not have this luxury: it has to display all or use paging (or fold) to "link" to more information. Web has the technology to display limited information in-place by using scrolling and viewports. In my opinion (and I am probably wrong) magazine and news print read comfy because I can scan every article and start reading it without having to click and if the article continues I can turn the pages. I can also "easily" remember where articles are if I care to return to them. There is still ground to explore here.

But the web is not the web as well here: we are now reading on our mobile devices more and more and we have to think about context: what does the device imply purpose-wise? Do we still want to provide introductions on the smaller screen? And on a tablet? Well, hello responsive design, nice of you to join us.

Legacy

People get use to stuff and people find out stuff. Often people find out that earlier people found out the wrong stuff. We call this entire thing legacy. And your job is to deal with it.

Print's legacy mainly lies in typography and static layout, things to make stuff look good and read well. There is not that much interactivity there so usability is limited (but it is still there!). The web nowadays gives you a blank canvas, sorta.

Now we have to realise people have gotten used to the web until now as well, which means: sometimes you just have to accept things are weird. Vertical scrolling is preferred to horizontal scrolling, no matter how fancy the latter can look.

There is still room for re-education to break legacy, similar to how touch-based interfaces are making us rethink our previous choices in interaction. If you are in the business of conversion however, forget that last line.

Finally, accessibility: web is making a LOT of content easy to reach for everybody, but often styling is messing it up and a lot of people do not know (myself included) how to fully handle it. Therefore I always try to keep my pure HTML structured and logical, similar to my point about tables: if your site follows the intention of the HTML-tag, it should be a sound starting point, should it not?