Website Architecture Redesign

[David]

I'm currently in the process of redesigning our rather tired-looking Website Architecture site. The main intention is to promote the MA programme and attract new students.

I've spent about a day and a half and now have a template page ready for review. The visual design is primarily typographic and I have tried to keep the markup slim and semantic although I'm sure there must be a better way to markup the footer content (anyone?). The CSS should also be neat and arranged thematically. The page content is currently notional but not a million miles away. I haven't yet added any specific accessibility features.

I've checked the page in IE7, IE8, Firefox 3 and Safari 4. All are good. For some reason, Opera is losing the top border on the footer (need to investigate). I still need to check IE6 and Chrome.

Code validates but I have a problem with encoding and http headers that needs sorting.

I would be grateful for any comments before taking it any further.

http://www.websitearchitecture.co.uk/index-test.php

Later: As this is a web design site, I thought it might be fun to include a CSS style switcher with an option for users to "Redesign this site". See what you think.

[David]

OK, I'm now done fiddling with the new design and declare myself happy with it.

Any comments would be really helpful as I've now got to the point where (having stared at it for days) it's difficult to be objective. Bear in mind this is supposed to be a design exemplar so please be critical.

Thanks

55

[David]

I've had a reply (by email) from Kash saying that the design is generally good and professional looking but that the masthead should look more like this:

56

What do you think?

[David]

I'm now starting to think about the site content and I'd like to include as much useful information for prospective students as possible. What sort of information should be included and (now that you are students) what sort of information would have been useful to you when considering this programme and what do you now know that you wish you'd known before starting?

Thanks.

[David]

We've talked about the fact that clicking on the site logo should take the user to the homepage and I've even suggested that the text "Home" link may not even be required. The author of this article (http://www.csskarma.com/blog/analyzing-home/) seems to feel the same way.

Currently, I tend to add "Home" to a utility navigation rather than have it on main/global navigation. Recently, I noticed a new trend where the text "Home" link was removed and replaced by a :hover effect on the site logo in order to give user feedback and some confirmation that this is a link to the homepage. That's the approach I've taken with the new WA site. It required just a little extra markup but I think it's worthwhile and all done in CSS (no JavaScript).

Comments welcome. :)

[David]

Well, I thought this thread might elicit some discussion but as it is it's turned into a blog. Never mind.

This is the first completely new design I've tried since IE8 and I have to say that it's only now that I realise how poor IE7 really is. For example, I thought all was going so well with the layout but it seems that because IE7 does not fully support inline-block, the footer is all over the place, despite being fine in all other browsers I've checked :angry:. Still looking for a good solution. The problem with a float is that the footer div collapses. I could use a height but I want the footer to expand as new links are added in the future...

A note about IE6: I'm not even bothering to check IE6 and am taking the approach that I've seen promoted recently, which is to use a conditional statement to serve IE6 and very simple stylesheet. This avoids plenty of problems.

Later: here's the article (http://forabeautifulweb.com/blog/about/universal_internet_explorer_6_css) by Andy Clarke on the Universal stylesheet for IE6 (I couldn't find it earlier).

[James]

the footer is all over the place, despite being fine in all other browsers I've checked :angry:. Still looking for a good solution. The problem with a float is that the footer div collapses. I could use a height but I want the footer to expand as new links are added in the future....

Not looked at the site in detail, but I will do so. Could the problem above be fixed using "min-height" instead of "height"? It should expand OK then.

IE6 does not support "min-height", but "height" behaves like min-height in IE6 so put that in your conditional sheet.

[David]

Browser check complete:

IE8 = good
IE7 = as good as...
Firefox = good except for the 1px border issue but only visible on mouseover of top navigation item.
Safari = good
Chrome = good
Opera = good except that top and bottom footer borders only display on link mouseover.

IE6 = deal with separately

[rob]

Few points from me

1. I like the title as is.

2. The CSS template with the white background, I am not keen on the red menu text to the right, it distracts me too much. I also rate the white template my least favourite, with the blue as my favourite, then the grey.

3. The thin line that separates the sections is a good idea although at the bottom the fact that "School of Architecture and Construction" goes past the vertical line bugs me; even though it does appear in a separate block. Maybe that is me being picky.

[David]

IE6 does not support "min-height", but "height" behaves like min-height in IE6 so put that in your conditional sheet.

Thanks James, I already decided that I'll just use "height" because "min-height" still causes the content to overflow. All is fine, it just means that in the (unlikely) event that I want to add more links to the lists in the footer, I need to remember to change the height value.


Few points from me

1. I like the title as is.

2. The CSS template with the white background, I am not keen on the red menu text to the right, it distracts me too much. I also rate the white template my least favourite, with the blue as my favourite, then the grey.

3. The thin line that separates the sections is a good idea although at the bottom the fact that "School of Architecture and Construction" goes past the vertical line bugs me; even though it does appear in a separate block. Maybe that is me being picky.

1. So do I :)

2. Hmm, the reason for the colour is that I wanted to give it visual weight because it's not in a "standard" location (horizontal navbar). I quite like it but then again I've been staring at it for days.

3. I know what you mean but there was never an intention to line it through. One benefit is that it fills the whitespace and gives a better visual balance to the footer.

Thanks both for your comments.

What do you think about the "Home" solution?

[David]

Oh boy! Just when I thought I was happy with my design, Smashing Magazine publish the results of their typographic web design comp (http://www.smashingmagazine.com/2009/07/08/free-typographic-xhtmlcss-layouts-for-your-designs/). Some of the results are really beautiful. I may just have to make a few minor tweaks...

[David]

OK, that's it, I'm done. I've learned some very interesting things about drop-caps but I'll save that for another thread.

The final version has a few typographic tweaks, fewer colours (always a good thing), a more generous gutter and a modified logo. I've made some concessions to Rob in the main nav and footer and I think they are improvements.

So, unless you spot any obvious howlers, this is it:

57

Now I can get on with building the site...

[rob]

Thanks James, I already decided that I'll just use "height" because "min-height" still causes the content to overflow. All is fine, it just means that in the (unlikely) event that I want to add more links to the lists in the footer, I need to remember to change the height value.



1. So do I :)

2. Hmm, the reason for the colour is that I wanted to give it visual weight because it's not in a "standard" location (horizontal navbar). I quite like it but then again I've been staring at it for days.

3. I know what you mean but there was never an intention to line it through. One benefit is that it fills the whitespace and gives a better visual balance to the footer.

Thanks both for your comments.

What do you think about the "Home" solution?


I like the idea of just the hover, I would suggest that you try making the little house appear as the dot of the i when you over, something quirky! just a thought

[David]

OK, the site is now live at www.websitearchitecture.co.uk (http://www.websitearchitecture.co.uk) much rigorous testing would be much appreciated although even "very nice" would do.

I still have a few things to tidy up. The two alternate stylesheets need kicking into shape and I need to add some accessibility features. I had planned a sitemap but I probably only need an XML one for the spiders as the main site consists of just 8 pages, all of which are accessed from the main navigation.

I'm sure I'll think of a few other things...

[Mia]

Hi,

Sorry for taking a while to reply spending all hours on Urban Foodie.

I love the overall design, the masthead is perfect as it is - the layering effect is subtle and carefully balanced and evokes the stylishness of the V&A for me so I say keep it!

Personally the grey is my favourite of the options, but I would say that, next the white then the blue - I guess what that says is it is all a matter of taste. I think having the options is an excellent practical demonstration of CSS.

Like James the navigation is bothering me a bit too, however, I feel like it isn't saying navigation to me - it looks too much like the rest of the content. I'm not sure what would make it work, maybe some depth like the css images have...

The other thing that I would comment on is the width, it feels rather tight, I know that you will be designing for 1024 but even at that width there is room to flow into on the side and so many of us have wider screens. I'm not suggesting fluid width as I don't want to give you a headache, but maybe you could go just a few hundred pixels wider on the page to allow it to breathe a bit better?

That's my tuppence worth, overall I really like the typographical treatment, elegant and deceptively simple. And although it is a content heavy site (as it need to be) it is broken up well to allow for easy scanning.

[David]

Thanks for the comments Mia, I'll consider those points.

[David]

The other thing that I would comment on is the width, it feels rather tight, I know that you will be designing for 1024 but even at that width there is room to flow into on the side and so many of us have wider screens. I'm not suggesting fluid width as I don't want to give you a headache, but maybe you could go just a few hundred pixels wider on the page to allow it to breathe a bit better?

Thank you Mia, you are right. I've adjusted the main content column width and it feels a lot more relaxed. It also means I can resolve the nasty juxtaposition of the "MA" and "W" that was bothering me. A lot better now.

However, I'm still clinging on to the navigation as is. I don't want to introduce any buttons or background colours and I think the combination of color and italic style give it enough emphasis to indicate it's purpose.

58

[David]

Well the new site is now complete in terms of design, function and content. As you can see, I've also ported the design over to the forum. I did add a site map and accessibility features because it means I can use the site as a reference in my teaching (I'm sure you're all sick of seeing CADTutor by now :p)

Tom feels that there should be more images and I sort of agree so I may add something pretty to the "Our philosophy" page. Do we need some smiling faces on the homepage? Do I need to add mugshots of Tom and me? Would that make the place more welcoming? I'd value your comments.

Anyway, other than the images issue, that's it, I'm done. *Brushes dust off hands*.

64

[rob]

Mugshots are a very good idea.

From past experience/feedback from students it pays to have images of the tutors who will be teaching on the course, helps create familiarity prior to arrival

[David]

Mugshots are a very good idea.


Thanks Rob, that's what I figured. I just have to convince Tom ;)

[David]

Of course, the problem with being your own client is that you never know when to stop. :lol:

A few minor improvements and I will add some mugshots in due course but...

65

At least I've resisted the temptation to rewrite all my classes so that they conform with the new HTML5 tags. :p

[Mia]

I agree with Rob, the personal touch is always welcome on a website.

[David]

Before the redesign, the site keyword strategy was unclear. I settled on the keywords/phrase "study web design london". The keyphrase "web design" is highly contested and it was unlikely I'd get anywhere with that.

When the site launched we were nowhere on Google for my chosen phrase. We are now 11th, at the top of page 2. Obviously, we need to be on page 1 but I'm hopeful that we'll get there over the next few months. On Bing we're currently 14th (page 2). On Yahoo! we're currently No.1!!!

On Ask we're 3rd for the question "where can I study web design in london?"

The next challenge is to work the keyword "course" into the strategy. Currently we're nowhere for "Web Design Courses London".

[David]

A weeek and a half on, there has been some progress. For the search phrase "study web design london" we are now 9th on Google, 3rd on Bing and still 1st on Yahoo.

However, I suspect that most people are more likely to search for "web design courses london" so I need to get the "course" keyword in there despite the fact that we don't use that term to describe our "programme". It's a bit of a conundrum.

[David]

Search phrase: study web design london

Google: 6th
Bing: 2nd
Yahoo: 1st

Search phrase: web design courses london

Google: page 11
Bing: page 4
Yahoo: page 4

PageRank is just 3 and that's unlikely to grow much without SEM.

I haven't done any off-page SEM, so I'm quite pleased with the on-page SEO.

[David]

I've never been 100% happy with the masthead for our site and so I left it in a sort of OK state, intending to revisit it later. I've been inspired to tweak it by a a section in Dan Cederholm's new book "Handcrafted CSS". There, he echos Robert Bringhurst's guideline for typography, "...use the best available ampersand".

So, I've replaced the Georgia ampersand with the more decorative Palatino ampersand. It required a little jigging to get it to work but overall I'm much happier with this version than I was with the previous one.

99

[Mia]

Excellent - I think it is a real improvement, even if people don't consciously notice I think it feels better.

[David]

Excellent - I think it is a real improvement, even if people don't consciously notice I think it feels better.

Yes, it's a subtle change but it seems to result in a "fuller", "warmer" feel to the design. Most likely that will not be obvious and I doubt that anyone would have noticed if I hadn't pointed it out but lots of small, progressive improvements to a design can add up over the medium to long term. I'm still not 100% happy with it but I'm now 5% happier than I was.

[David]

OK, I've upgraded our masthead using Rawlinson 2.0 Medium from Terminal Design (http://www.terminaldesign.com/) - possibly my favourite font foundry.

The original serif font was Georgia and although it's good for body text, it was never intended as a display face. Rawlinson is a much more elegant design with more detail and an even better ampersand.
125

[David]

Search phrase: study web design london

Google: 6th
Bing: 2nd
Yahoo: 1st

Search phrase: web design courses london

Google: page 11
Bing: page 4
Yahoo: page 4

PageRank is just 3 and that's unlikely to grow much without SEM.

I haven't done any off-page SEM, so I'm quite pleased with the on-page SEO.

So, the SEO stats from last October are above and the current stats are below:

Search phrase: study web design london

Google: 1st
Bing: 1st
Yahoo: 2nd

Search phrase: web design courses london

Google: page 4
Bing: nowhere
Yahoo: nowhere

PageRank: 4

In general, it's looking good, particularly on Google but something has gone drastically wrong with the "courses" keyword strategy on Bing and Yahoo! My feeling is that they must be giving more weight to <title> and <h1> and less weight to first <p>.

However, all this is completely academic if the improved SEO has no physical effect - but it has. This year the number of applications is more than 4 times what it was last year and we have already filled our quota.

It's now exactly 1 year on from the launch of the new site and my feeling is that it has been a success in achieving its aim of recruiting more students to the programme.

[David]

This year's tweak of our Website Architecture website is just about complete. I've tightened up the logo (the text had drifted away from the ampersand) and added a subtle drop shadow, I've removed the italicised text, changed the body font from Georgia to Cambria and brightened the dull colours. I also added a sprinkling of jQuery and CSS3 for good measure. In addition, there's a new page on the site (Preparing to study). I've had some useful information in response to my request from David, Casey and Annop but I'll add anything more when I receive the other responses.

http://www.websitearchitecture.co.uk/forum/attachments/watson/webarch2011.png

Comments welcome.

[jenaleigh]

]Hi David

I have been meaning to send you some feedback but have been so, so busy! I will do it as soon as I can. :)

I like the new design. The colours are a lot more vibrant and I think the Cambria copy looks nice. The only thing I noticed is that the "Web design bookshelf" link breaks onto a second line in some resolutions and looks a bit out of place.

http://www.jenabirch.co.uk/web-design-bookshelf.png :blink:

[David]

Thanks for the comments Jena. I broke the "bookshelf" line yesterday but thought I'd mended it. However, it occurred to me that it was the wrong phrase in any case. For SEO purposes. "Web Design Books" seems like a much better option - so that's what it is now called. I like lateral solutions. :)

[James]

Nice subtle improvement David. I don't like the "swaying" navigation links but that's just a personal opinion.

BTW - have you considered a new domain name? The course hasn't been called "Website Architecture" for a few years now?

[David]

Nice subtle improvement David. I don't like the "swaying" navigation links but that's just a personal opinion.

BTW - have you considered a new domain name? The course hasn't been called "Website Architecture" for a few years now?

I'm unsure about the navigation effect. I liked the idea but not sure about the actuality of it. Also, it looks crap in IE7 - weird rendering bug.

I'm not inclined to change the domain name. For me, it still represents what we do and it seems pretty well embeded in terms of SEO etc.

[David]

Oops! The forum just got a makeover - hopefully, it now looks more like a part of the site. The skinning of a vBulletin forum can make a grown man cry and it's only that I know it so well that I was able to do this in just a few hours. I have a love/hate relationship with vBulletin but recently, the hate has risen to the surface and I've been looking very carefully at IPB - I like what I see - this could lead to divorce...