June 2004 Archives

Design Elastique

Sometimes referral logs throw up some interesting surprises.

"Hmm... what's this page... hold on a minute... this looks familiar... the Elastic Design article... translated into French!"

I don't know how good the translation is (my French stretches to "Je suis vegetarien", "combien?", "deux bieres s'il vous plait", and "Je ne parle pas francais" - and I even needed some help with that spelling), but I think this is really cool.

With another bit of help, I was amused to learn that "Traduit par Sylvain Lelievre avec autorisation de l'auteur" translates into "Translated by Sylvain Lelievre with authorization of the author". Really? I'm either losing my mind or I must have been completely blotto. Either way, I'm not fussed - nice one Sylvain.

The more people that get to read these things, the better. Anyone interested in doing a German or Spanish or Dutch or Swahili or Esperanto version?

Wednesday 16 June, 2004 ( 3:15 PM GMT) | Comments (10) / Permanent Link

Mobile CSS is a Reality

The response to the mobile CSS support test has been fantastic - thanks to everyone who has helped out. Hopefully I'm not the only one who finds these results helpful.

All in all I would say that the results are encouraging. There appears to be enough support for the handheld media type (much more than I expected) to warrant the use of a media-specific style sheet, just as you can for print. And as the mobile market increases in size and technological capability, this seems like a sensible thing to at least think about (does anyone really doubt that the mobile internet is going to play an important role in the future?), if not already practice (the future's here!).

Those devices that only support the screen media type (which is meant for large screens - desktop or laptop monitors) are the ones that will cause problems, but these seem few and far between, and, from what I can gather, something that is fast becoming a thing of the past as newer models seem to be eradicating this erroneous behaviour.

Personally, I'm not that fussed about those that do not support CSS at all - well-structured HTML should be presented quite well by default with content that is quite accessible. Besides, there isn't much that can be done about this. I also genuinely think that this lack of support won't last long. Yes, HTML browsing is a good first step, but there are those coming along in leaps and bounds...

The cutting edge PDA browsers from Microsoft and Opera (the popularity of the latter of which I think I underestimated) are making their way into phones and the way things are going, full-on mobile CSS is a reality. It's already here on some popular devices and as technology improves and becomes cheaper I can't see things going any other way than along a CSS-supported route.

So in practical terms, a mobile-specific style sheet is a viable option, but you need to take into account that, at the moment, an apparently sizable chunk of mobile browser share (Pocket IE) also apply styles that are supposed to be specific to the "screen" media type. This means you can't separate screen and handheld (and if you think you're hiding your styles from these devices by just using a screen style sheet you're sadly mistaken) and you have to take into account the cascade and overrule any screen-specific styles you don't want in your handheld design.

Just like the desktop web, users are already demanding more and expect better features. Small screen design is an area with clear practical problems when it comes to tables and spacer gifs and perfectly lends itself to web standards and CSS. Device manufacturers are realising this, now it's time for the web designers to catch on and take advantage of this burgeoning market.

Tuesday 15 June, 2004 ( 5:18 PM GMT) | Comments (21) / Permanent Link

HTML and CSS for Mobiles

Although it's chugging along rather slowly (certainly more slowly than people predicted a few years ago), with phones and PDA's becoming ever more advanced, the mobile internet is clearly going to play a big role in the future of the web.

A problem in designing web pages for these platforms is the multitude of mobile devices (both PDA's and phones) that will no doubt render pages in different ways. If web standards were fully supported then it would be possible to optimise pages for these mobile devices without changing the underlying HTML - just like providing alternative styles for print.

It all comes down the handheld media type. If that was supported then we'd be laughing - one style sheet for screen, one style sheet for print and one style sheet for mobiles, with code something like this:

<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css" />

But here's where the practical difficulties kick in. In everyday web design it's often difficult enough to get hold of a platform other than the one you're using, but when it comes to mobiles, where the hell do you start?. I understand that the handheld media type is supported by some devices and software, but I don't know to what extent. I also know that some also apply styles specifically targeted with the screen media type. Tut tut. Naughty.

Opera have a browser for the Series 60 platform, which looks great. In fact, you can see what a web page would look like on it by going to the "View" menu and selecting "Small Screen" on a regular Opera browser. It has good support for standards (including the handheld media type), as you might expect from Opera but unfortunately, I'm assuming that this isn't that popular a browser for mobiles, although it does come pre-installed on a certain new Nokia phone.

Some phones have their own built-in browser (such as the Nokia 6220), and I assume a lot of PDA's do too. The mobile version of IE is bound to be a major player, but there could well be hundreds of different mobile browsers out there. Another factor is international differences, especially with phones. Europe has quite a different market to America and parts of Asia are in a super hi-tech world of their own.

Can anyone can shed any light on mobiles and how they handle HTML and CSS? I've constructed a test page that should show how a browser deals with screen and handheld media types (this works really well with Opera), so if you've got a web-enabled phone or PDA, please take a look at the page (http://htmldog.com/test/handheld.html) and let me know how many "applied" and "not applied"'s show up.

Monday 14 June, 2004 (11:51 AM GMT) | Comments (151) / Permanent Link

Computer Book Covers are Nuts

"Hmm. I can't decide which book to buy with my pocket money. I know! I'll go with the one with the cover I like!"

People in the publishing industry know it, I know it and you know it - people will invariably, to one degree or another, judge a book by its cover.

There must be something special about web design book covers though (maybe computer books in general - I'm just going on my experience) because, well, they strike me as being kind of nuts. I'm not saying they're necessarily bad, they just, well, strike me as being different on the whole. Maybe there's some kind of special formula. I'm no expert. If anyone could enlighten me I'd be grateful...

Take "More Eric Meyer on CSS" for example. I received it in the post a while back and ripped open the packaging to be faced with the book cover. I stopped panicking when I looked around and realised I hadn't actually lost the ability to see colours with a green or blue wavelength and then I saw three Eric Meyers looking kinda mischievous. Like Michel Keaton in "Multiplicity". What? Why?

The cover to Joe Clark's "Building Accessible Websites" still confuses me. What is going on there? It's like a sadistic episode of Robotic ER or something. "OK. Clear! Stat! Let's rip open this robot's chest! Swab! Scalpel! Oh my GAAAAAD! IT'S A GAPING CHASM WITH A BOOK TITLE IN IT!"

As for that "Whatever for Dummies" ubiquitous patronising cartoon man that adorns every other cover in the computer section of a bookstore, he needs a big cartoon slap.

Young, slim, unblemished, attractive. They're usually the kind of attributes you find in people exploited to encourage people to buy one product or another. I'm guessing that pretty people sell (whether it's right or wrong is another matter - we're talking about business here). But it must be different for computer books. Why else would Wrox insist on plastering a huge photo of a balding chubby man with a big beard, not tucked away in the corner of the fifth page of the book, but POW! Right there in your face on the front cover?

Now I'd understand it more if, like certain hip-hop album covers, said beardy bloke was sitting on a throne, smoking a Cuban cigar, adorned with chunky diamond jewellery and dressed in a baggy Adidas tracksuit with one arm around a golden keyboard and one arm around a scantly-clad buxom "ho" (or three). That'd be funny. I'd buy a book with that cover even if it were about something I had no interest in. Oops. There I go judging a book by its cover...

Friday 11 June, 2004 (11:52 AM GMT) | Comments (13) / Permanent Link

All CSS Sites Look the Same

This is a statement that comes up now and then, particularly in arguments over tables vs. CSS layout.

The implication is often that this is a reason not to use CSS, but this suggests that there are somehow special graphic design limitations with the technology. At the end of the day however, CSS is not some kind of strict template system - it provides a way of manipulating every little presentational aspect of a page, so you would have to say that such an argument is false on the grounds that "the only limit is your imagination".

So where has this argument come from? I can see what people are saying - a lot of sites designed using CSS have some similar characteristics.

One specific popular technique is the use of the border property, which is neat, quick and effective and achieves an effect that is rarely used in table-based layouts (because they're such a pain in the ass) and so makes the CSS sites stick out from the crowd.

This is a bit more abstract, but it also seems to me that those attracted to web standards tend to be relatively minimalist in their approach to design and really appreciate factors such as usability. Is it just coincidence that most CSS designed sites are easy to navigate?

I'm sure there are more things that tend to crop up and people notice but, like I said, the only limit is the designer's imagination - you only need to work your way through the designs on the CSS Zen Garden to realise this. I think that a lot of CSS sites do have similar characteristics, but I don't think these are anything more than trends - preferred fashions of the moment. If you don't like that fashion, there's nothing stopping you from doing something completely different.