The Great Lines

[francis]

I was asked to put a site together for a couple of colleagues who have a band and have been invited to play the South By South West fesitval in Texas next month. It's taken a few hours of playing around, not really knowing what I (or they, really) wanted. I'll freely admit that it looks fairly, er, Bentley-ish but it was a bit of a rush job. Anyway, it's here (http://www.thegreatlines.co.uk/). Comments?!

[David]

Er, how long have you got? :lol:

1. I assume you're not bothering to code this for IE - looks fine in Firefox but frankly I think you ought to consider your majority audience.

http://www.websitearchitecture.co.uk/watson/postimages/thegreatlines.jpg

2. The background blue is very distracting. It is an intense colour and grabs the attention over the low-key grey content area. I suggest you replace the blue with a tonal variation of one of the other colours you have used.

3. The masthead title is not easily readable over the background image (even though you've used a lighter band). I suggest making the background image darker and the text lighter.

4. I like the mustard/green/grey colour combination but the brown is just one colour too many. I suggest you replace the brown with a dark grey like the colour of the "SXSW" text. In total you have used 7 different colours for various elements on the page and that's probably 4 too many.

5. You have a combination of centred, left justified and indented text and this makes the page look messy. I suggest you left justify the masthead text and move the nav text in to the right so that they align. Then do the same with the "Band News" box - left justify the header and lose the indent so that it all aligns.

6. I like the border and drop-shadow around the images.

7. On pages such as "Biography" I'd like to see a slightly wider margin so that text isn't so close to the content box edge. This will work well in combination with point 5 (above).

8. I think you probably ought to have a <h1> tag on the home page and maybe a short paragraph of introductory text. I'm thinking of SEO as well as offering better intormation for users.

Asside from that it's fine. Needless to say, the code looks super. ;)

[francis]

Bastard IE - I've recoded that site 3 times for that browser. It works fine in everything else - I added the box on the homepage yesterday and it's completely arsed up an entire page. Again. Looks like I'll be turning on the PC again, then. Someone should that piece of crap browser round the back and quietly shoot it; put us out of its misery.

I really struggled trying to get a text colour that worked - probably the only thing I didn't try was darkening the image.

Anyway, looks like some tweaking is in order.

[francis]

Right - colours changed for the news box, background, links, Hn tags; indentation removed; padding added to content; banner tweaked; code hacked for IE.

That horse looks awfully familiar... (http://www.b3ta.com/board/4281335)

[James]

I think it looks a lot better now - a few comments:

1. Still a bit "blocky" on the eye like Bentley, but the latest revision is much more pleasing.

2. That annoying Mozilla "feature" where pages with a scrollbar jump when you move from a page without a scrollbar. You told me this was a known Mozilla problem yonks ago but it's still happening in Firefox 1.0. Not your site's fault but irritating.

3. Is it really necessary to have a "?" Tooltip thingy for obvious initials like UK, USA and Blvd? I'm not a fan of this, if an abbreviation needs explanation then either write it in full or explain it once (in brackets) when first used.

4. How about breaking up the biography with some images? I was put off by its length.

5. I spotted a couple of typos and inconsistencies - want me to proof read it?

Hope this helps.

[David]

A big improvement Francis. However, a few more points...

1. The background colour is still too strong and pulls attention away from the content area. Also, your foil/highlight green stripe is totally swamped by the green background whereas it really should stand out. In the example below I've used your dark grey colour for the background.

2. The page will look much better if you can align text wherever possible - in the example below I've shifted the nav bar text to the right and the masthead text to the left in order to align with the body text.

3. I don't like the background gradient in the content area. It is rather subtle but it makes it difficult to get a good colour balance overall and I just find it distracting.

4. The Avante Garde masthead font is an improvement over the Times Roman but I think you should experiment with a few other font faces before settling on this - it is rather common :P and you might be able to give the site a more "bespoke" feel if you go for something less obvious.

http://www.websitearchitecture.co.uk/watson/postimages/greatlines01.gif http://www.websitearchitecture.co.uk/watson/postimages/greatlines02.gif


It's getting better all the tiiime...

[francis]

Cheers for the feedback. James - if you want to proof read it, then be my guest! I've cleaned a lot of it up, but haven't really sat down with it.

The Moz feature is, interestingly, also in Safari. Can't remember about Opera, but it seems as though IE is possibly the only browser to consistently show a scrollbar area even when one isn't needed. Personally I think that it is better that way - the Moz orgainisation, IIRC, argue that CSS3 will bring a "scrollbar showing" rule that will allow authors to decide on the behaviour of that, but they don't seem to be implementing it as they have done with other CSS3 properties.

? tooltop "thingy" - I can change the cursor but the tooltip thingy has to stay - W3C acccessibility guidelines - all acronyms and abbrievitaitons must, on their first instance on a page, be explained. It's far nicer to present this as a tooltip than it would be to do USA (United States of America). Either way it feels deeply patronising for such as obvious abbreviation, but thems the rules.

David - I probablyy should change the font - I'll have a root around the PC and see what I've got on there. Any idea if True Type fonts can be whacked on a Mac (Phil?) If so, my font library will be coming accross.

The gradient on the content has started to annoy me as well - it started off okay, but now it's just annoying. It nearly got the chop this morning but I went running instead (sooo cold).

The background does look better darker, I'll have to have a further play.

Cheers.

[James]

? tooltop "thingy" - I can change the cursor but the tooltip thingy has to stay - W3C acccessibility guidelines - all acronyms and abbrievitaitons must, on their first instance on a page, be explained.

OK, but do you really have to explain UK and USA - they are used in common language. I don't think this is an accessibility issue at all. SXSW maybe, but not UK USA.

[Phil]

Any idea if True Type fonts can be whacked on a Mac

yes. drag the .TTF to /library/fonts