Website Architecture makeover

[David]

It has always been a slight embarrassment that the Website Architecture site has not been either well designed, consistent or using valid markup. Now that I have a little more time on my hands, I'm giving it a makeover. It's not yet complete but I have done about 24 pages and all are valid XHTML 1.0 Strict markup and also valid CSS.

I'm not happy with the colour scheme or the hyperlink rollovers but I think the layout is pretty good. Generally it's a bit uninspiring at the moment and I'd like it to look a bit more "rich".

Anyway, take a look and let me know what you think - see it here (http://www.websitearchitecture.co.uk/index.php).

BTW, XHTML Strict is tough. I found the formatting of images particularly awkward to deal with. Also, I discovered that the target attribute to the anchor tag is not valid :o . I guess this is a nod in the direction of tabbed browsing. I suppose there must be a valid way to launch a new browser window but I haven't found it yet.

[francis]

Strict - enjoy that! There most definitely is a way to bypass the _target attribute - check out Jeremy Keith's @media presentation (http://adactio.com/atmedia2005/), which will give you a very nice DOM solution that you can alter to your heart's content (should you wish). FYI - anything deprecated in a frameset or transitional doctype is automatically excluded from a strict one, whether it be HTML or XHTML.

A lot of people dig out a pixel font and design their own W3C compliance badges - it might be an idea to do it on this site as the ones you have at the moment are clunky at best.

Are the two empty paragraphs below just because you need some height?

<div id="header"><div class="column-in">



</p>

</p>

</div></div>

If so, I'd maybe change that to a CSS image replacement (http://www.kryogenix.org/code/browser/lir/) - that way you get some text on the page as well. Or, as was discussed at @media, and is probably more sensible, if the image is a main site logo, you actually probably want the image in the page via an <img /> tag so that it's accessible (assuming you put an alt attribute in there) and whether the CSS is on or off, the image is always visible. For that reason, I'm starting to move away from image replacement for important images (such as site logos) and moving back towards 'traditional' methods of embedding images.

[David]

Good points Francis, thanks for that.

The validation logos are clunky but they are the official W3C ones. I have seen some very nice ones in the style of the RSS feed logos that are common nowdays, maybe I'll try those.

I was in 2 minds about the page logo images. On the one hand, if they are CSS backgrounds, they can be changed with each CSS if a switcher is implemented, on the other hand they do present the problems you have identified. It seems that the preferred method of implementing such stuff changes on a monthly basis at the moment. :rolleyes:

I will check out the DOM target method because it's a function I often use. The strict XHTML has mixed blessings. Most importantly, the resulting code is sqeaky clean and easily readable. On the other hand, a number of useful "features" of HTML such as the anchor target atribute have been removed, requiring a workaround. There is no going back now but I may stay with XHTML transitional for most work for the time being.

There is a great deal of satisfaction to be had from stripping the code down to its bare essentials. :geek:

[David]

To continue our discussion about target="_blank".

For the benefit of the others: I've been recoding the Website Architecture site and am validating it as XHTML 1.0 Strict. I discovered that the target attribute within the anchor tag (the one that let's you open a new browser window) is not valid in XHTML Strict. This came as a bit of a blow for me because I tend to use it quite a lot. As a rule I use it for all external links in order to keep users on my site. This seems logical and beneficial BUT I have now seen the error of my ways.

Initially, my first thought was to find a workaround that would allow me to open browser windows whilst using valid code. In fact there are a couple of options that work. But then I began to wonder why it was that target had been removed from the specification - not just for the hell of it surely?

One part of the philosophy behind XHTML is to return power (choice) to the user - the person browsing your site. The target attribute was dropped because it denies the user a choice of whether to open a window or not. Think about how you browse. Clicking on a link opens a document in the current browser window. If you want another window, simply right click and select the appropriate option - well, that's what I do.

I reasoned that by employing a workaround for target, I would be going against the spirit of XHTML. Even if the code were valid, I would be going against the basic philosophy of the standard.

So now I'm a changed man. I will not use a workaround. I simply stripped out all of the target attributes from my code and gave choice back to my users - that's what I'd want for myself afterall. B)

[Tom]

Well done, and thank you.

The wonders of strict XHTML are beyond me, though I'm sure my Latin and Maths teachers would have thought it a good thing to do.

The graphics are pleasingly fresh, just a little like a design for a milk carton. I would not say 'uninspiring ' but a zip of zing in the design could be good.

Something about the design made me think of Muji (http://www.muji.co.uk/index.htm). Their site is a little crisper - but not nearly as good as I would have exptected it to be. But I think the designs in their shops are very good - maybe a touch of hard-edged aluminium could be a framework for website architecture!

My next thought was about Zen of CSS (http://www.csszengarden.com/) but their design is too much like boutique notepaper.

A disappointment for me is that the Adsense targeting is not working as well as I had hoped. Some of the ads are enhancing the content, which is what they should do, but others seem vague. It might be worth going to 4 ads/page to give us a better idea of what is happening. Also, please let me know when you have set up the channels.

Would it be possible to put the words Website Architecture as text at the top of each page (I assume it is a bitmap)? I know you have them at the start of each page title - but this might be what is weakening the targeting of the Adsense. Google is sure to place a lot of weight on the first words in the title tags.

[David]

Thanks Tom. I have yet to finalise the colour scheme and the title/logo image. I am considering a style switcher - not sure if that's a good idea or not but it definately demonstrates the power of CSS. Maybe we could all have a go at a style sheet. I've really been twiddling with code up until now. Didn't get as much time as I had hoped last week so I'll hope to get it live this week some time. The other planned sections can easily be added as and when after that. Including my Muji clothes peg - design classic.

[James]

I like the new site David, particularly the colour scheme. It's the same palette as before I believe but I much prefer the white background.

A few comments:

I found it confusing that some of the navigation is across the top and some of it is down the left hand side - is there any rationale behind this?

The home page itself has a definition of website architecture but there is also another page with an expanded definition: http://www.websitearchitecture.co.uk/define/ Is this intentional?

http://www.websitearchitecture.co.uk/links/useability.php
The word "usability" does not have an "e" in it.

On the home page you have used a dashed underline to explain the initials SEO. This is the only page you have done this on, SEO appears throughout the site without the underline. I do not like this (ab)use of the <abbr> tag - it draws the eye to it and it can be confused with a link. If the intention is to help screen readers surely you don't have to underline it - that's anti-accessibility in my opinion. Oh yeah, and you've spelt "optimisation" wrong in the <abbr> anyway! ;)

At times I got a bit lost on the site as there is so much text and I wasn't sure which page I was on. I don't agree with images for the sake of it but wondered if it would benefit from some sympathetically placed images to break it up a bit?

Cheers

[francis]

So now I'm a changed man. I will not use a workaround. I simply stripped out all of the target attributes from my code and gave choice back to my users - that's what I'd want for myself afterall
That's what Zeldman did a year or so back, saying something like "links no longer open in new windows. If you want to do that, well, you know what to do". I'm so used to right clicking > opening in new tab that that's pretty much all I do. In fact, it really irks me when I find _target=blank on pages as it spoils my whole browsing experience.

My next thought was about Zen of CSS but their design is too much like boutique notepaper.
I take it you're referring to the default design and not one of the myriad of superb ones that have been contributed? I'm currently (not very much) enjoying Bruce Lawson (http://www.brucelawson.co.uk/)'s Geocities (http://csszengarden.com/?cssfile=http://www.tastydirt.com/zen/sample.css) version on the site.

[David]

Thanks all for your comments, particularly James for picking up some important points. There's no doubt that there is more work to do, particularly in the area of information architecture and visually improving the navigation. The navigation is entirely consistent, links along the top are global and links in the left column are local but there is no visual association between sections and I think the site needs this - maybe tabs or colour coding...

[David]

OK, the new site is now live from the root of the domain. I have given it another colour scheme. The first was a working scheme while I tweaked the coding. It's possible that I'll implement a style switcher at some point. I also very much like the fixed/fluid layout switcher at SimpleBits (http://www.simplebits.com/).

I have removed the <abbr> tag from the home page. After some thought, I agree with James. Here's an interesting article (http://www.smackthemouse.com/20040108) on the topic.

I have corrected the spellings despite the fact that, "useability" and "usability" are both valid. Although the second is more common that the first.

I have changed the clunky W3C validation buttons. I like these ones very much.

I still need to apply some Information Architecture to the site and consider how best to identify the various sections but I needed to get something up now.

I have added separators between the global navigation items. This is an accessibility issue. I have used a background image but initially tried using CSS borders. I gave this up after a few hours because of the impossible differences between Firefox and IE. Only ask me if you really want to know. The simplest of things are often the most frustrating. :angry:

More images to come...

Do let me know what you think. www.websitearchitecture.co.uk (http://www.websitearchitecture.co.uk)

[James]

Really like it David. I've seen that banner image before - it's your laptop desktop isn't it?!

Not sure I agree about the spelling of usEability being valid - Google suggests you meant usability when you search for it, and dictionary.com doesn't list it either. I wonder if it is a common mis-spelling rather than really correct? Sorry, I'm pedantic.

I like the global nav separators - nice touch.

[David]

Spot on James, it's one of my favourite wallpaper images.

As for usEability. My trusty Collins English dictionary (complete and unabridged - 6th edition 2003) lists both spellings but without "E" is listed first indicating that it is the most correct (popular?).

Pedantry is one of my favourite pastimes. Sadly, my spelling isn't up to it on most occasions which is why I keep a 3 inch thick dictionary on the shelf above my desk. :geek:

I'm still not entirely happy with the left column navigation but it's not too bad (good enough).

[James]

Here's one for you then, fellow pedant. Whilst in Cornwall last month I was amazed to see this display of ignorance. I mean, if they SELL stationery you'd at least think they could SPELL it! And yes, I do take photos of these misdemeanours ... how sad is that? :rolleyes:

http://www.websitearchitecture.co.uk/barker/forum/stationery.jpg

[David]

Yes, I just can't help it. I was standing in the checkout queue in Tescos this week (a rare event) staring at an oversize and bright red sign indicating that this till was for "10 items or less" - you'd never see that in Waitrose.

[Tom]

Very cool. One small suggestion: the background colour for the global navigation could be a dash lighter in tone and a dash less saturated to (1) freshen the graphic tone of the page (2) make the tabs more distinct (3) get closer to harmonising with the wallpaper above.

[David]

Thanks for getting us back on track Tom.

The colour is actually sampled from the image but maybe you're right that it is not representative of the image as a whole. On the other hand, I do not want to become a slave to that particular image because I am thinking about using a different image for each of the main sections of the site. I'm still fiddling with it so things are still a bit fluid.

The layout, typography and "look-and-feel" are now fixed (well, I'm happy with them). The arrangement of content is not right - need to apply some Information Architecture to this and I'm still not entirely happy with the local navigation.

I've also added a WAI AA (double A) button to the code validation buttons. The site certainly conforms to single A and, having read the recommendations, the level 2 or double A seem so subjective that they often read like good intentions rather than rules. As far as I can see, the site is of AA standard - it passes the Bobby and Cynthia says tests.

Comments welcome.