You are here: Home / Dog Blog / Archives

The Redesign

Monday 16 February, 2004 (11:16AM GMT)

The HTML Dog RedesignBAM! 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.

Comments

Comment 1

I like it.

So said [Anon] on Monday 16 February, 2004 at 5:13PM GMT.

Comment 2

Great evolution! The brand has become much more defined. It is redesigns like this that are the most challenging, taking an existing design and instead of scrapping the whole thing, making it better.

The only changes that I might suggest now would be to make the right column a little wider and the margins on the center content a little more generous. But that's a matter of taste and liquid layout philosophy.

Given the choice to use a liquid layout (and not to raise that whole debate again) what resolution should we optomize a site for? This design is clearly optimized for 800x600. Would it be possible to maintain the proportions of the layout by using percentages for two or three columns, and maybe even some of the margins?

So said Nils T. Devine on Monday 16 February, 2004 at 6:42PM GMT.

Comment 3

Nize. When are ya gonna dump XHTML though?
Oh I found out what XHTML really stands for:
eXtremely overcomplicated Hyped-up Moron Language.
Heh. Funny. I think so...

So said Dante Evans on Monday 16 February, 2004 at 9:09PM GMT.

Comment 4

PTG, why don't you do what I did?
Create a DHTML Drop Down menu, and one in the sidebar.
If the browser can support DHTML and the DOM, remove the manual sidebar mrnu. That way everyone, including NOSCRIPT browsers can see only one menu. SFHE (http://geocities.com/dc_sfhe) uses that solution.

So said Dante Evans on Monday 16 February, 2004 at 10:22PM GMT.

Comment 5

Nice work. A target I will aim to achieve.

So said Andy Wheeler on Tuesday 17 February, 2004 at 12:16AM GMT.

Comment 6

I just stumbled onto this site and would really appreciate having access to the older designs
so I could catch upand understand the coolness of what is now.

So said Ishmae on Tuesday 17 February, 2004 at 6:04AM GMT.

Comment 7

Ishmae - good point. I don't suppose rambling on about how 'this' has changed from 'that' when someone doesn't know what 'that' looked like is that informative!

Try this: http://www.htmldog.com/ptg/archives/000030.php?boxer=test

Thanks for all of the (mostly) kind words, both here and from emails.

To answer a few questions:

This design *isn't* actually consciously optimised for any resolution - more about this in a future blog entry about layout.

I won't be dumping XHTML. It's the best choice, it's here to stay and it's not complicated, as anyone who reads the HTML Dog Guides will find out. I don't understand a point about XHTML being over-complicated followed by a suggestion to slap JavaScript all over the place. Although I wrote an article about dropdowns ( http://www.alistapart.com/articles/dropdowns/ ), I believe that most of the time they shouldn't be used - placing information in plain sight is more usable, dropdows inevitably hinder accessibility and from a technical point of view they are heavier and less reliable (and for consistency I don't want to offer different layouts to those that have JavaScript enabled and those that don't). Dropdowns have their place, but HTML Dog is not one of those places.

So said Patrick on Tuesday 17 February, 2004 at 10:29AM GMT.

Comment 8

Never make your user go hunting for navigation - which is what dropdowns can often do. If the user can't find it, they won't bother looking.

Make it clean and clear and they will find. And used it will be.

I could also argue til the cows come home that XHTML is the best choice myself - personally I have yet to see one real percievable benefit of adopting it. Instead I stick to HTML 4.01(mostly strict), but using well formed markup throughout.

The well-formedness is for me, the biggest benefit of XHTML in that it's in there by default (HTML 4.01 of course allowing for some sloppy practises that shouldn't be allowed in this CSS age) however until the browsers actually start dealing with XHTML properly instead of tag-soup, it's a distinction that doesn't really matter.

Oh yes and nice design BTW.

So said Andrew Bowden on Tuesday 17 February, 2004 at 1:42PM GMT.

Comment 9

I think I prefer the dynamic menus in the original design.
With the current design you have to click on the left side then the right side to navigate through the guides, which I think would get a bit annoying after awhile.

So said rbirdman on Wednesday 18 February, 2004 at 2:01AM GMT.

Comment 10

Changing the menu stystem of the Guides is one of the things I really wasn't sure about for a long time, but then decided it was for the best. I see what you're saying about having to move over to the other side of the screen, but the choice was made because I thought that the primary navigation column was often too long and unwieldy when another level opened up underneath 'HTML Beginner' and such. It was a tough call, but I thouht I should exploit that third column. I'll wait and see though. Who knows? I may well change my mind at some point in the future....

So said Patrick on Wednesday 18 February, 2004 at 12:10PM GMT.

Comment 11

Just one question.
Why are you making this whole, huge thing out of a new logo and a third column? It's hardly enough changes to post all this stuff about.
Anyway, I'm redesigning as well. I'm getting rid of the drop down menu.
My new column looked so nice I couldn't bare it being removed onload because of the drop downs. So I'm keeping it.
Mozilla has issues with it still, but I can solve them with DHTML of all things. What a lazy person I am.

So said Dante Evans on Saturday 21 February, 2004 at 4:39AM GMT.

Comment 12

Great visuals with limited resources! A perfect example of "less is more". I'm aiming for somerthing simillar with my site, http://www.individualism.ro/

So said Gabriel Mihalache on Wednesday 25 February, 2004 at 10:19AM GMT.

Comment 13

Great site!!!
Very useful and beautiful

So said Renato Carvalho on Tuesday 2 March, 2004 at 9:15PM GMT.

Comment 14

Hi guys,

great site. I like the design a lot but I am curious where I could ask some questions about how certain things were realized... Is this the right place? I can't see a forum or some other place...

So said Tenaka Khan on Tuesday 30 March, 2004 at 1:15PM GMT.

Comment 15

>>My new column looked so nice I couldn't bare it being removed onload because of the drop downs. So I'm keeping it.

Dante, don't you think a bit of modesty in your posts is called for given that you keep referring people to one of the butt-ugliest sites around? Ever heard of the margin attribute? Color coordination? Style? Jeez.

Please don't make this site look or work anything like Dante's.

So said John Gotti on Wednesday 30 June, 2004 at 5:48AM GMT.

Comment 16

Everything John Gotti said +

Dante: You use GeoCities. 'Nuff said.

So said Sue Doe Nim on Tuesday 6 July, 2004 at 2:03PM GMT.

Comment 17

FYI - I see a 1px jink left in the right column right border about 15px down in IE6.0 Win2K

So said Big T on Monday 6 September, 2004 at 11:39AM GMT.

Comment 18

This is an awesome site. I've learned so much from the content and the Japanese gardeness of the layout. Well done.

May I take a moment of your time and ask a quick question about something I just can't crack and couldn't crack before I learned xhtml/css here.

How do you make links light up like in your primary navigation column up there even if the mouse hovers next to them and not on the actual link text?

When I do it the link only highlights if the mouse is on the text and then you see the background and border and stuff. Works as it should in my central column, never works in my left and right columns.

I'd really appreciate somebody's help on that.

And again, htmldog, it's layout, content and what it stands for is a thing of beauty.

Best,

Rischen

So said Rischen on Wednesday 24 November, 2004 at 1:29AM GMT.

Comment 19

The logo deserves some kind of award

So said Jon Ramster on Friday 26 November, 2004 at 4:53PM GMT.

Comment 20

To create a menu of links that allow hover effects beyond the text, set the CSS display property of those links to "block." The links will act like any block element, filling their parent container from edge to edge.

Make sure you don't apply that style to all links though! Most links should remain inline.

-Matt

So said Matt on Thursday 9 December, 2004 at 6:02PM GMT.

Comment 21

The redesign is wonderful. It's so calm and attractive due to the use of color. I'm trully impressed :))

So said Jane on Tuesday 18 January, 2005 at 8:46AM GMT.

Comment 22

I like it, but I'd like to see some contrast between your navigation and content areas.

So said on Thursday 24 February, 2005 at 4:03PM GMT.

Comment 23

Stumbled across your site today. Fabulous design. Makes me want to tear my hair out though, thinking about how much rework my own site needs! :)

So said JY on Friday 4 March, 2005 at 4:02PM GMT.

Comment 24

Well, the simple reson to have XHTML does not goes well with little children playing with JavaScript and violating every rool just because browser lets 'em. Ah, the reason - XHTML (well formed) will be parsed by any XML parser and is much friendlier for any sort of server-side scripting beeing that .NET, Java or PHP. And if you can parse it you have all the nifty tricks that XML and especially XSLT gives you

So said bostone on Thursday 17 March, 2005 at 9:45PM GMT.

Comment 25

how did you do the showing and hiding of the tree menu without javascript?

So said ephobe on Friday 18 March, 2005 at 8:57PM GMT.

Comment 26

Roundtrip to the server. Though personally I would never hide any menus... Plus, I'm not saying that JS is bad - it has its place and purpose.

So said bostone on Sunday 20 March, 2005 at 3:50AM GMT.

Comment 27

Very beautiful site! it´s good inspiration for others to make nice and accesible sites.

So said matte on Thursday 28 July, 2005 at 12:04AM GMT.

Comment 28

I love your redesign. It's clean and simple, yet professional. The colors and images work great together.

So said patrick on Friday 5 August, 2005 at 5:51AM GMT.

Comment 29

Really nice design, but what about updates in the future?
"Monday 16 February, 2004"

So said gsyi on Wednesday 7 December, 2005 at 11:47AM GMT.

Comment 30

Oh, sorry, I´ve just overlooked your archive ...

So said gsyi on Wednesday 7 December, 2005 at 11:49AM GMT.

See Also

^ Top

SiteGround: Fast, reliable, recommended hosting.