February 2004 Archives

Redesign: Advertising

This is just a quick one because these Redesign entries are going on a bit too long for my liking....

Firstly, to justify advertising on HTML Dog. This site is read by thousands every day and at this point it seems sensible to attempt to claw back some of the cash I've put into this project (at least to cover hosting charges), and, I thought, at the same time why not exploit the reach of HTML Dog to promote something more important than web design...

Google Ads? Just say no kids. After signing up and trying them out and not feeling comfortable one iota all of the way through the process I decided not to do it. Why? Because they're so damned inflexible, that's why. They're almost there (the fact that they're text ads and fantastically relevant to the content of a page) but while there's a big splodge of shonky JavaScript that pukes out a fixed-width, fixed-height ad I aint gonna want it. Please Googlemen, let's be able to sort these out server-side so that they can seamlessly become part of the HTML and please let me be able to size the fonts relatively if I so choose.

So what's the alternative? Annoyingly there are no decent ad programmes out there that let me do what I want. Maybe there will at some time in the future. But for now, I've opted to be a TopStyle affiliate because it seems to be a relevant product to advertise on this site and, well, I do genuinely believe it's great. The best tool for making HTML and CSS pages in fact. So go on. Let's help each other. Buy a copy.

And as for the IFAW advert thing, well, there are a number of sites that pump out content absolutely gratis and say "Y'know, if you like this stuff then make a contribution. To me." kind of like a collection box at a museum. It's not that I'm rolling in it or anything, but I figure I can do my bit by asking that if someone finds HTML Dog useful, instead of donating to the HTML Dog Fund, donate a little to a very worthy charity. So go on. Let's help those little animals. Make a donation.

Wednesday 25 February, 2004 (11:10 AM GMT) | Comments (3) / Permanent Link

Redesign: Usability

Here's the thing: the easier something is to use, the more likely it is that someone will use it and so the more successful it should be.

It seems to me that a great number of web designers roll their eyes at the sound of Jakob Nielsen and use terms such as 'Nielsenist' or 'Nielsenism' in a jokingly derogatory way, often implying that following Nielsen's advice will lead to something that is unnecessarily extreme and usually uninteresting to look at. That Nielsen's own site looks like a close relative to Teletext doesn't help.

The thing is, useit.com does its job spiffingly - ultimate web usability is over-the-top zero-graphics uninteresting to look at pages that load like lightning and take the user straight into the content. But most of us have to live in the real world - a world obsessed with image.

Visual appeal is a necessary 'evil' that is very important to the success of a modern website and it must have a carefully arranged marriage with usability.

There are certain aspects of the HTML Dog redesign that have probably hindered usability to a tiny degree, in particular the graphical header and logo but the idea is that although usability has been compromised slightly, the end result is something that should be more successful long term (as discussed recently). On the other hand, the CSS file has been reduced by around 25% and many graphical elements have been pulled out so pages should load even faster and in that respect usability will have been increased.

Building web pages with web standards has one massive (often unintentional) advantage - it heightens usability. This is because structured HTML with a dollop of CSS will lead to lighter, faster pages than old-school methodologies. I'm not the only one who has talked about rebuilding existing web pages and reducing file sizes by around 75%, leading to a web page that is four times quicker to load. Web standards should also lead to greater consistency in design (from a central CSS file), better reliability and much improved accessibility.

Personally, I think that usability is the single most important element of web design. Web design isn't just about technology and art, it's about psychology.

And having said that, in many ways Nielsen is like Freud - many may lambast him, but the fundamental principles that he has championed are commonplace and applied by practitioners as second nature.

Monday 23 February, 2004 ( 3:09 PM GMT) | Comments (15) / Permanent Link

Redesign: Branding

One of the biggest and most immediately obvious changes that was made in the redesign was the establishment of a much stronger brand. The term 'brand' might sound a bit too commercial, but basically I wanted HTML Dog to be more recognisable and to do that I wanted to establish a firm identity, particularly through a good logo.

The 'dog tag' idea of having a dog inside a less-than and greater-than symbol has been around from the start - originally it was a collie. The collie tended to be in the background and not on every page. She was a shy bitch. But now the confident boxer has muscled in and demands to be prominent on every page. He's a strong dog and he's here to stay.

Usability is extremely important, but one of the criticisms of usability main man Jakob Nielsen, for whom I have a lot of time, is that he fails to recognise the importance of branding. There is an argument that any graphical elements (by which I mean images) impend usability because they are so big in file size compared to quality textual content, but the benefits of branding (usually long term) should, in most cases, lead to a more successful web site than a plain, unbranded, nondescript one (such as Nielsen's useit.com).

After saying how much I hate graphical text, the 'htmldog.com' at the top of the page is now an image instead of functional text. I think this is justified because of the very specific style I wanted to achieve that I didn't feel I could adequately replicate with CSS. It is not only the dog tag picture that makes up the logo, but also the text so it needed to be very precise for the same reason that the type in the Amazon and Google logos need to be precise - to establish a solid, unquestionable, lucid, instantly recognisable brand.

I saw no reason to use anything other than functional text for the tagline however, so this remains as it was. I did think about changing it to 'The Web Designer's Best Friend' though...

Thursday 19 February, 2004 ( 2:46 PM GMT) | Comments (3) / Permanent Link

Redesign: Layout and Presentation

Layout

Without wanting to fall into the heated layout debate (again), I thought it would be worth briefly mentioning a few things about the HTML Dog layout and the thought processes behind making such decisions in general.

Just as I was leaning towards using a fixed-width layout I re-opted to stick with fluid (I prefer the term 'fluid' to 'liquid' simply because it rhymes with 'fixed'). I won't repeat previous arguments, I'll just say that trade-offs have to be made with whichever method you use and I felt that fluid was best for HTML Dog, but, y'know, it's not a universal thing - I'm still not saying one is better than the other. Uh oh... I think I'm slipping into fixed/fluid argument territory...

The layout remains elastic (apart from the height of the header, due to its newly pixel-based construction) because not only do I think it's damned funky, I still believe it offers great advantages, particularly in the area of accessibility. The third column does cause some problems when it comes to elasticity in that the larger the font-size (and therefore left and right column width) the more compressed the central content area becomes. Due to the fluid nature of the central area however, it can at least slim right down before it starts to break. This example highlights further benefits of using fluid over fixed elements when it comes to elastic methodology.

Templates and Style Guides

A number of templates for the content-area were formulated following a strict style guide. Style guides and templates are an essential tool in constructing a website (even if they're just in your head) and they become increasingly important the larger the site gets - consistency is good. I tried to keep with much of the previous style of the content area, which already had a great deal of thought go into it, regarding how to highlight things such as code, examples, notes and the all important headings and subheadings. The biggest overhaul was in how to break down areas. Previously, there were a number of boxes that contained, for example, the main heading and you-are-here-jobbo, the blog entry, the comments and the form for posting a comment. Now they are all augmented into one area and broken up with solid or dotted lines. Personally, I think this is clearer and works much better.

Some comments have already been made about the use of grey text (for highlighting a comment author and date for example) and that its lower contrast with the background is a bad thing. On one hand this does decrease usability because it is harder to read, but I think it also increases usability because it makes it stand out from the comment itself. There we go with trade-offs again.

Of course, one of the things that makes style guides that much easier to implement and maintain is CSS - just one little change in a single file and a change in style is made across the entire site.

The Future

One of the things at the back of my mind is that it is becoming increasingly necessary to keep an eye on what's around the corner and how users may be surfing the web in the near future (even now). The rise and increasing popularity of sophisticated mobile phones that incorporate PDA style displays means that access to websites is forever moving into arenas other than the desktop (or laptop). Smaller devices with smaller screens bring specific implications with regard page layouts. Although the PC isn't going anywhere anytime soon, the need to accommodate a wider array of screen sizes is creeping up on us. Just as many are starting to think that we can begin to worry less about resolutions as small as 800x600, it could well be that we actually have to start thinking about resolutions that are becoming even smaller.

Wednesday 18 February, 2004 (12:04 PM GMT) | Comments (9) / Permanent Link

The Redesign

The HTML Dog Redesign BAM! And here it is. The newly redesigned HTML Dog.

Over the next few days I'll be posting a series of entries on the Dog Blog explaining the reasons behind aspects of the redesign. I have certainly enjoyed (and learned from) reading how others came to certain design decisions and I'm hoping that discussion of this redesign will be of some interest - not only in finding out about this particular site, but also in taking the opportunity to look at some areas of web design in general. The way I see it, it's looking at something big from a smaller, familiar point-of-view. It's kind of like HTML Dog is Tom Cruise and the world of web design is Japanese cultural history.

Some elements of the original design remain, such as the primary navigation, the content-area style, the colour scheme (although I have been more strict, using a smaller palette) and the general minimalism. The bits that have remained survive because I think they work well. In the words of Rubens Barichello this is more of an evolution than a revolution.

The redesign reduces bandwidth by doing away with most graphical elements and giving the CSS file liposuction. Less tangible aspects such as usability, accessibility, branding and search engine optimisation have also hopefully been improved but the catalyst for the redesign itself was the need for a third column.

The Third Column

The HTML Tag Reference already employed a third column, but it didn't really fit in and I was never happy with the way it looked. It has been clear that a second level of navigation was needed elsewhere too, most notably in the Dog Blog and the forthcoming CSS Property Reference. Furthermore, a clearly defined area such as a third column could also be utilised to promote both areas of the site and external interests.

A three-column layout is a completely different beast to the two-column species and it was going to be difficult to force a third column into a two-column layout. A different approach was required to tame the evolving Dog. It needed to be clear that the content of the third column was part of the particular section the user was in rather than site wide (something that I think the old Tag Reference column didn't do particularly well). Another navigation aide, the 'breadcrumb' (which I would rather call the 'You-are-here jobbo', as a breadcrumb suggests the path a user has taken to reach the current page rather than the section and subsection structure of the current page), was a logical choice to hold everything together and, as you can see now, the third column, along with the content area sits underneath it.

It was clear that the incorporation of a third column was going to take quite a bit of restructuring so I thought I might as well just go for it and do the whole redesign thing. As this dawned on me, other aspects were pushed into the frame and in forthcoming entries I'll address layout, branding, accessibility, usability and search engine optimisation.

It's taken longer than I anticipated (as these things always seem to do) and it was a case of having a long list of priorities that I completely ignored but I think the whole effort has been worth it. Please let me know what you think.

Monday 16 February, 2004 (11:16 AM GMT) | Comments (30) / Permanent Link

The Definition of HTML

HTML stands for HyperText Markup Language, but it can imply much more.

I'm raising this point following arguments over the term, how I use it and what it can mean, and more specific questions along the lines of "why is HTML Dog called HTML Dog when it's about XHTML and CSS?". So here's my interpretation of 'HTML' and the reasons behind the 'HTML' in HTML Dog.

Firstly, the slightly smaller point about XHTML. Let's get this straight - XHTML is HTML. I'm not saying anything as specific as XHTML is HTML 4 or whatever, simply that XHTML, by its very definition, if a form of HTML - it's eXtensible HTML. XHTML is HTML just as a green banana is still a banana.

HTML is a much more recognisable abbreviation than XHTML and it has become a part of everyday language. That 'HTML' is more recognisable (particularly to beginners) was reason enough to call the website HTML Dog instead of XHTML Dog.

My next point is perhaps a bigger and more controversial one. It is that the term 'HTML' can also imply 'HTML and CSS'.

Whether right or wrong, modern HTML is intrinsically linked with CSS and when people who know what they are talking about talk of 'HTML' they often mean 'HTML and CSS'. For example, the 'official' job titles I have gone by over the years have been 'HTML Developer' or something similar. The jobs I find nowadays are for similarly titled roles. But these jobs always require knowledge and application of CSS.

HTML has become a shorthand term that may be historically and logically incorrect (when it comes to describing CSS) but can validly describe and be understood as XHTML and CSS.

Friday 13 February, 2004 (10:29 AM GMT) | Comments (7) / Permanent Link

Styling acronym and abbr

It has become a common practice to style acronym and abbr elements with a dotted underline (using the CSS border-bottom: 1px dotted). Even my browser has a default dotted underline style for these elements.

One of the changes I am thinking about making in the forthcoming redesign is to completely remove this styling for the reason that not only do I believe it is not very useful, I think it can be misleading.

Underlined elements, in whatever form, still speak to many "I am a link". It is my guess that more people will mistakenly believe this styling to be a link than people who understand it to signify an abbreviation.

It could be that it is simply a contrasting style to surrounding text that makes an element stand out as a link. Indeed, the underline is not as necessary as it once was and many sites now have non-underlined links which are differentiated from the rest of the non-linked text by a different colour.

My thoughts are to still use the elements (which was never any question), but to simply and solely apply the style of cursor: help so that when a user hovers over the abbreviation, it has the same effect as before. The problem, of course, is that there is nothing to suggest that there is any further information is there in the first place.

But is it the right thing to take away an attempted standardised style? The wholesale, widespread understanding of such a feature would be great, but while it faces such mighty competition for recognition from the attention-seeking link I can't see that happening.

Wednesday 11 February, 2004 ( 9:49 AM GMT) | Comments (14) / Permanent Link

I Hate Graphical Text

The title of this entry is perhaps a little over-the-top. There is, of course, a place for graphical, pixel-constructed text over functional text, namely in branding and when highly stylised text is required.

This is perhaps an obvious rant to make, but the use of graphical text when functional text can do the job just as well, if not much better is rife.

Graphical text has incredible accessibility problems - not only in terms of being read by screen readers but in the fact that it is completely unscalable in most browsers, so preventing a hard-of-sight user from zooming in to read something more clearly.

On a much more basic level, it isn't just a problem with accessibility, but a problem with file size. A heading made of functional text and styled with CSS is going to measure double-figure bytes in size, whereas equivalent graphical text can easily be thousands of bytes in size. So this means longer download times and decreased usability.

So when is graphical text all right?

When it's big for a start.

When it's for branding, which is the strongest argument for graphical text.

When highly stylised text that can not be achieved with CSS is required.

The last point is probably the most controversial and certainly the most vague. The argument over whether something is 'necessary' is obviously a subjective one. Whereas one person may say that the usability and accessibility benefits of functional text outweigh the need for a certain graphic, another person may say that the graphics are a necessity for the visual design. Unfortunately, I think that some web designers too readily opt for the latter without really exploring the options.

The bottom line is that when CSS styled text can be used, it should be used. The argument, I suppose, is over the word 'can'.

Monday 9 February, 2004 ( 1:05 PM GMT) | Comments (5) / Permanent Link

New Site Search

A site-search has been added to the HTML Dog website opening up a whole new navigational universe for you crazy adventurous web design people to enjoy.

Thanks to Atomz, you can now search for content across the Guides, Reference and Dog Blog sections as well as every other page in the site (there's about 150 of them at the moment I think).

It comes ahead of a complete site redesign that I have been working on. While fiddling about with the search feature I figured I might just as well add it in now. So here it is. Ka-blam.

Wednesday 4 February, 2004 ( 3:17 PM GMT) | Comments (2) / Permanent Link

TV ads and Information Architecture

Hey! Woo! TV style adverts in-between web pages. How very special.

So. Let's see... You expect me, with my humble modem (with a download rate of 5-7k a second) to wait about five minutes to see a 30 second video clip of something I have no interest in?

OK, I admit, I do see the point in advertising, even the need for it, but things are getting a little out of hand.

Even with a broadband internet connection the wait is too long. But even with the option to skip the advert, the most important flaw to this whole idea is that putting adverts in-between web pages (that is, when you navigate somewhere you get a full-page advert first) breaks the flow of surfing.

I used to frequent a certain popular music web site. But then it started taking me to pages I never wanted to go to - namely adverts that I either had to watch or select 'skip' to get to the page I asked for. I really couldn't be bothered with the hassle (and we're only talking about a few more seconds of my time here) so I stopped going there and went somewhere else.

This stupendously stupid idea highlights an important principle in web design: The quicker it is for a user to find the information they are looking for, the more successful a site will be.

This isn't just a case of page design, whereby lighter (and therefore quicker to download) pages can be achieved by using Web Standard HTML and CSS for example, it is also a case of site design. Information Architecture.

It comes down to the good old '2 click' rule, whereby users are rarely interested in getting to the information the want in more that two 'clicks'. The case for specifically two 'clicks' is debatable, but it is certainly a fact that the harder a user has to work (as in the more 'clicks' they have to make) to find information, the less likely they are to look for it.

Putting something unexpected and requiring further unexpected work at the destination of a link is plainly foolhardy.

Tuesday 3 February, 2004 ( 1:35 PM GMT) | Comments (7) / Permanent Link

Speaking at PaWS

PaWS - PHP and Web Standards, UK 2004 I will be speaking at the PHP and Web Standards conference near Manchester in the UK at the end of the month.

The two talks will be on the subjects of 'Take HTML Seriously!' which I have ranted about before and a general explanation of the Web Standards philosophy of separating Structure (HTML) and Presentation (CSS).

The timetable and details of sessions has been released, showing Web Standards clearly playing Robin to PHP's Batman, with 35 PHP related sessions to just 10 sessions directly related to Web Standards. Clearly, this is more of a PHP-focussed conference, but I think that Web Standards should be very relevant to PHP coders and hopefully the Standards talks will be of just as much interest to the audience as the specific PHP talks.

I've never spoken at a conference before and I anticipate nervousness to kick in as the event draws nearer, but I'm confident about what I'm talking about and I'm looking forward to it. Obviously, I'm a strong advocate of Web Standards, but I'm also a big fan of PHP (I've used it for HTML Dog, amongst other sites) and I'm hoping that the conference will beneficial to me just as I hope my contribution will be beneficial to others.

Monday 2 February, 2004 (10:54 AM GMT) | Comments (0) / Permanent Link