January 2004 Archives

Mad CSS Demonstration

'Unofficial' CSS Zen Garden entries don't often get the attention they deserve. I don't know how long the 'Revealed' design by Kaare Byberg has been around, but it's quite spectacular.

One of the reasons it isn't an 'official' design is because of its 'Special Effects' that just won't work as intended under Internet Explorer. So to get the most of this and to see CSS really work for its money, you'll need to look at it in a browser such as Mozilla or Opera.

Wednesday 28 January, 2004 ( 5:11 PM GMT) | Comments (2) / Permanent Link

HTML vs. Flash

Which is better? HTML or Flash?
This is a question that seems to arise now and then but the thing is, it's a daft question. HTML and Flash are completely different technologies for completely different situations. But the argument continues. Even an editor of one of the UK's top selling internet magazines recently made a sweeping comment that Flash was better than HTML.

HTML (and CSS) is best suited to content-based sites whereas Flash is best used for animated multi-media demonstrations. Both have their place. And of course, sites need not be one thing or the other; Flash is often put to good use as an element within an HTML page.

The idea of having a Flash-based BBC News website is ludicrous. It would be unnecessarily complex for such text-based content. Likewise, HTML may not be considered as adequate for promotional sites for music artists for example, where the delivery of multi-media content such as audio or video in a visually engaging, interactive interface is paramount.

Tuesday 27 January, 2004 ( 5:18 PM GMT) | Comments (11) / Permanent Link

Updated Links Page

I've added some links to the HTML Dog external links page.

There are about 20 new links to various sites which I think should be useful to web designers. Notable additions include web logs Whitespace, Asterisk and 456 Berea Street, design resources Max Design, Dithered's CSS Filters and the Mezzoblue CSS Crib Sheet and also a few other bits and bobs such as the usability site GUUUI and mailing lists such as CSS-Discuss.

Any further suggestions?

Although it's not in the links page (due to its time-specific nature), I also think it's worth mentioning the PHP and Web Standards convention (PaWS) in Manchester, UK next month. Looks like it could be fun.

Thursday 22 January, 2004 (12:08 PM GMT) | Comments (2) / Permanent Link

Artistic Developers

Web standards are technical and yet a great number of web designers at the forefront of standards advocacy are expert graphic designers.

The professional set up that I have most regularly come across is a graphic designer who will mock up a web page in Photoshop and a coder who will then take that mock-up and turn it into a functional web page using HTML and CSS.

This seems to make sense. I have some vague recollection from studying psychology years ago that people do tend to have either technical or artistic brains. And in fact casual observation reveals that I can fit most of the people I know into vaguely artistic or technical groups.

Obviously, things aren't as black and white as one person being 'artistic' and another 'technical' - there are grey areas, but I think it is certainly rare to come across a person who has a good (as in professional standard) eye for design and a detailed grasp of web technology.

Jeffrey Zeldman, Doug Bowman, Dan Cederholm, Andy Budd and Dave Shea to name just a handful could all work as graphic designers, but they all have a deep understanding of the technology behind the graphics and they are all regular contributors to the web design and development community.

The future of web development is being lead by artists.

I don't think it's a bad thing. But it is intriguing.

Friday 16 January, 2004 ( 4:41 PM GMT) | Comments (6) / Permanent Link

Meaning? Structure? Content?

There are three similar terms that are used to describe the philosophy of HTML and CSS web standards: 'The separation of meaning and presentation', 'The separation of structure and presentation' and 'The separation of content and presentation'. They all seem to be used pretty much interchangeably, but do they really mean the same thing? Obviously, 'meaning', 'structure' and 'content' do mean completely different things, but in this context, suggesting that HTML should be used for these things and these things only (while CSS does all the presentation), are they interchangeable?

I'm not going to provide an answer. I am one of the guilty ones who have used the terms interchangeably without much thought. A more precise phrase might be 'The separation of structured, meaningful content and presentation' or maybe even 'The separation of everything from presentation' (?!).

I'm confusing myself as I think about it...

Wednesday 14 January, 2004 (12:57 PM GMT) | Comments (6) / Permanent Link

A List Apart: Elastic Design

A List Apart screenshot and a whole loada rubber bands 'Elastic Design', my second article for A List Apart (the first being 'Suckerfish Dropdowns' with Dan Webb), explains the concept of using relative values in CSS to achieve 'elastic' elements (such as text or even layout) that will expand or contract depending on the users text size settings.

It goes hand in hand with the 'Elastic Lawn' CSS Zen Garden design I did recently, which demonstrates the elastic approach.

Personally, I like Elastic Design. It's something I've been using for years - not only with text, but also with layout because I think it has real usability and accessibility benefits that if done the right way should not compromise graphic design.

Not everyone's going to like it - there's plenty of debate surrounding fixed vs. liquid layouts already and I'm sure there is plenty to argue over on the topic of their elastic cousin.

Friday 9 January, 2004 ( 5:28 PM GMT) | Comments (4) / Permanent Link

Mystical Yellow Form Fields

I have received a number of emails asking why certain form fields on HTML Dog have a yellow background.

"Eh?" was my initial dumbfounded response. There's nothing in the CSS of the website that sets the colour of form elements. But I even saw it with my own eyes on someone else's computer - there it was, a form field with a pale yellow background. Not all form fields, just one apparently randomly coloured input box.

Is this due to different versions of Windows? Odd releases of Internet Explorer? Well no, as it turns out the culprit is the Google Toolbar, that widget thing that you download from Google that adds a search box and some other stuff to Internet Explorer.

There is an 'AutoFill' option on the Google Toolbar (switched on by default), that will 'helpfully' highlight form fields with certain names such as 'email' or 'name'. The only thing is, I don't think that's particularly helpful. No software program can possibly know what are the most important fields to draw to a users attention. As the designer, I should choose how to best highlight areas and what methods I use to attract users to areas that I think are important. I certainly don't want an automated tool messing up a carefully thought out design.

As so many people use IE and the Google Toolbar is undoubtedly popular amongst those users, this is a real issue for web designers.

Jenseng has more information that includes some JavaScript workarounds, but I think the best and most simple method is to just use names that the Google Toolbar won't recognise.

Monday 5 January, 2004 (12:37 PM GMT) | Comments (96) / Permanent Link