You are here: Home / Dog Blog / Archives

Redesign: Layout and Presentation

Wednesday 18 February, 2004 (12:04PM GMT)


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.


Comment 1

I like your Redesign very much. It keeps the simple style of the site and adds functuality with the third column. The 'you are here'-hint is also very useful, espacially when one has linked a subpage instead of the homepage of your website. And the using of some images for design purposes (e.g. the rounded corners at the top and bottom of the content area) is imho a good idea, especially because the site is still full accesible and readable if one turns the images of in oneselves browser.
But there are also some things I want to critisise. Firstly, there is no print layout at all. The Website remains in it's layout when you print it, which can be annoying because two thirds are taken up by the left and right navigation colums which lets long texts take much pages even if the user doesn't need these two colums at all. Secondly, why don't you use the link-tags to mirror the relationship of the individual pages among ech other?
But after all your site is still very good as the content hasn't really changed since the redesign :).
Sorry for my maybe not so good English, but my first language ist German as I have told you before, remember?

So said Maximilian Baumgart on Wednesday 18 February, 2004 at 12:56PM GMT.

Comment 2

A little off topic, perhaps, but the validator is complaining about the comment form below. You appear to have given it its identifier by 'name' rather than 'id', which it doesn't like.

So said Mark Harmstone on Wednesday 18 February, 2004 at 1:14PM GMT.

Comment 3

I too like the redesign very much.

I agree with Maximilian that you should use link tags where possible (I am just working out the mechanics of adding them to my site too).

I have just one, slight, criticism - and it's only a subjective one: I do not like the way the gray bar (at the top and bottom of the content area) ends at the window edge. I feel these should be closed off before the edge.

Why? Well there's a subliminal effect (for me anyway). I keep getting the impression that I need to scroll horizontally and I couldn't figure out why until I realised that it's the gray bars - they seem to suggest a further content to the right.

Of course, it could just be me! ;-)

So said DarkBlue on Wednesday 18 February, 2004 at 1:20PM GMT.

Comment 4

Maximillian - I remember! Thanks for pointing out about the print thing. Something that completely slipped my mind even though I've got it written down on the things I should have done....! I've now added a few things to the CSS to make it more printer friendly. I'll work on something a bit better when I have time.

Mark - Thanks for that. I've fixed the problem and now all should be hunky dorey.

And Mr. DarkBlue! Interesting point. I'm not sure really. That's something I hadn't thought of. I won't change it just yet, but I'll certainly keep it in mind.

So said Patrick on Wednesday 18 February, 2004 at 1:36PM GMT.

Comment 5

Whoa! That phone is nuts

So said Chris on Wednesday 18 February, 2004 at 4:18PM GMT.

Comment 6

Looks great... but fluid doesn't rhyme with fixed :p

So said haze on Thursday 19 February, 2004 at 12:38AM GMT.

Comment 7

Sure it does... erm... they both begin with 'f'... erm.... okay okay. I looked up 'rhyme' in the dictionary to see if I could somehow squeeze my claim into the official definition like a square peg in a round hole. Okay. Fine. I got it wrong. BUT YOU KNOW WHAT I MEAN!!!

So said Patrick on Thursday 19 February, 2004 at 9:49AM GMT.

Comment 8

Fluid or Fixed....thats kind of illiteration which is the poor cousin of rhyme. Oh well, it's a good job your not a rapper.

So said Dan W on Thursday 19 February, 2004 at 1:15PM GMT.

Comment 9

Alliteration. "Fixed" and "fluid" are alliterative.

And the site looks good. What's with that elephant in your logo? ;)

So said Neal on Saturday 21 February, 2004 at 8:17PM GMT.

See Also

^ Top

SiteGround: Fast, reliable, recommended hosting.