site crit please 3

[Dweezel]

I'd like some feedback on this site please:

http://www.robhayes.co.uk

It's not quite finished, but is in it's final location now. Some of the things I still have to do include changing the text in the downloads section, resizing the logo a little ( needs to be a bit longer so it fits better in it's space I think ), and a few tweeks to the graphics.

I've built a php/mysql content management system for the site. All of the content loads from a database with the exception of the downloads section, I'm just finishing that part of the CMS.

The site is really a little too tall for this kind of design. People viewing on small screens at lower resolutions will get a double scrollbar (outer browser window, and inner Iframe scrollbars ) which will probably be annoying.

The vertical size of the page was dictated to a certain degree by some of the graphics I've used. The guitar graphic on the downloads page was a design that I did to be used on some flyers, and because of a few Photoshop saving mishaps, changing the dimensions of the graphic other than scaling wasn't possible.

I tried scaling down, but it spoiled the overall effect. I wanted the graphics to be a main feature of the site, and scaling them down to make the vertical size ideal (about 500px) made them too small. An inherent problem of using graphics for a site design that weren't designed specifically for the job I suppose.

Most of the development time for this site was spent in Photoshop. As you can see there is a different graphic on each page, and I also designed a couple of wallpapers.

I'm going to add a short explanation on how to set a desktop background on your computer (apparently there are some people that don't know - my siter for one ). I'll probably make it a small pop up from within the wallpapers section.

I'm having some IE5 difficulties in the Gallery section. The Iframes code seems to be doing something strange with size of the tables I think. I'll have to debug it this weekend, but if anyone knows what's causing it let me know.

Anyway, all comments and suggestions appreciated. I've got no control over content, but if you have any suggestions about what's written on the site I'll pass them on to Rob.

 

[BillyRayPreachersSon]

The contact link on the downloads page goes to "contact.html" instead of "contact.php" - which causes a "page not found" error.

At small or large font sizes in Firefox, the contact page looks pretty bad (lots of black squares appear, and the alignment is all out). Consider laying this page out a different way.

You should also not be specifying a unit value for image widths or heights in the HTML attributes. Remove the "px". The unit specifier is needed for CSS only.

Apart from that, it looks quite good.

Dan



[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[Dweezel]

Thanks for the tips Dan.

I've changed that contact link to contact.php. Nice catch.

I'll get rid of all the px's later today.

I'm intrigued as to why the text size should effect the spacing of table cells in Mozilla, though it clearly does.

Thanks again Dan.

 

[dipita]

Nice work - I really like the use of black/white and the brown. It's very clear and catching. Like the contact page and images use. Looks quite good to me.

 

[ChrisHunt]

Looks pretty slick to me. A few comments...
[ul]
[li]I think the rollover effect on the menu bar is a little too subtle. I didn't notice it at all at first.
[/li]
[li]Under the hood - Whenever you use images to display text - i.e. your logo, menu and rob's signature - you should use the [tt]alt[/tt] attribute to show the text to those who can't see the image. If you want to stop IE showing that alternative text in a tooltip, add a [tt]title=""[/tt] as well.
[/li]
[li]On the front page...

<div class="itemdivider">
Hi, and welcome to my new site. If you've been waiting for the site to launch then sorry for the delay. Robhayes.co.uk has been under development for some months but is finally complete. Hopefully you'll agree that it was worth the wait.</div><div class='itemdivider'>
I'm currently working on my first album, ...

[tt]<div class='itemdivider'>[/tt]? What's wrong with [tt]<p>[/tt]?
[/li]
[li]I'd look into CSS-based methods of showing the scrolling text area on the Bio page (or redesigning it so as not to require scrolling at all). Using an [tt]<iframe>[/tt] will get search engines sending the occasional visitor to

http://www.robhayes.co.uk/bioload.php

(maybe quite a few visitors, since engines prefer pages with lots of text in them), from where they can't reach the rest of the site.
[/li]
[li]Content-wise, you don't seem to have anywhere on the site that tells me where Rob is going to be performing. I think you need a page, driven by a calendar system in your CMS where Rob can enter upcoming gigs, so (potential) fans know where to catch him live.[/li]
[/ul]

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Dweezel]

Dipita : Thanks a lot.

Dan : I've got rid of all the px's in the xhtml. I'll work on sorting out the contact page layout to avoid text resizing issues tomorrow. Thanks for your help.

Chris: Thanks a lot for your detailed comments. I better take them one at a time.

1. I was going for an understated effect with the rollovers, but on my monitor they're easily noticable. Could anyone who posts a reply to this thread after this tell me how the 'black to brown' rollover effect looks on their monitors.
Could be my monitor settings. I haven't calibrated in about a year.

2. Thanks, I've now given all of the images with text on the necessary alt text and an empty title attribute.

3. This text is fetched from the database. I start off with a <div class='itemdivider'> ,then print the database text and then close with </div>. After I've fetched the text from the database and before it's printed to this page I use nl2br() in php to convert newlines to <br /> tags and then use str_replace() to convert the <br /> tags to '</div><div class='itemdivider'>'.

I didn't use <p> tags because they gave me too much vertical space between the paragraphs. But as to why I didn't just use <p> tags and then edit their margins in the CSS I have no idea. I was probably coding it a 3AM with severe sleep deprivation .


4. Thanks for the search engine tip. I'll change them to scrolling div's at the weekend I think.

5. Yeah he'll need something like this in the future. He isn't going to be playing live for some time as he's too busy with school and his album. When he does though, a section of the site to show when and where he's performing will be needed, and the calendar CMS system you suggested sounds like a good idea. I'll pass the idea on to Rob and see what he thinks.

Thanks a lot Chris.

This has been a really helpful crit so far. Anyone else?

 

[theEclipse]

dweezel-

Nice design. generally I am not a fan of the centered "micro browser" as I call it, but I like this implementation; it serves the sites content well.

I really like the contacts page....I might make the form fields outline alittle darker....2 shades or so.... I am curious about the background-color:transparent css trick. Is that part of the css2 spec? I dont know as that I have ever seen it before. Also...nice pen graphic.

On the links page, I notice that you have the css coded in the page. This might make future updates to the template aggervating. also, the links dont open up in a new window. I am undecided as to wether or not this is expected behavior or not anymore. It used to be that all links to outside of your site should open up in a new window....but that led to the popup revolution. I am undecided.

On the downloads page, I noticed that some of the file links have an underline and arrow while some dont.

On the home page, I might move the "Rob" signature more over towards the "thanks," at first I thought it was just left off completly. You might also be able to move the salutation instead.

As for the mousovers, they are abit unnoticable. I try and stay away from mouseovers that really change alot....so as not to be obnoxious but I would make those abit more red.

Page looks nice. I like the graphics work. specially the eye on the front page and the contact page.



Robert Carpenter
"You and I have need of the strongest spell that can be found to wake us from the evil enchantment of worldliness." - C.S. Lewis (The Weight of Glory)

robert (at) robertcarpenter (dot) net

http://www.robertcarpenter.net

 

[ChrisHunt]

It used to be that all links to outside of your site should open up in a new window...

It used to be common practice, it was never good practice. The notion that using new windows would stop people leaving your site is a false one - if I want to leave your site, I'm going to. Your rudeness in opening a new window I didn't ask for just means I'm less likely to come back.

It's also a bad idea from an accessibility viewpoint, see

http://diveintoaccessibility.org/day_16_not_opening_new_windows.html

By the way, Dweezel, I understand why you've not got any gig dates on the site right now - but remember to leave enough space to add it as a menu item later on. It looks pretty tight right now.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[PaulBricker]

I'm sure the average user does understand the Back button and that in many cases it works as advertised, but from someone who Googles alot, I always find a few sites that you can't back out of. You end up having to dump the site and reGoogle(sic) your info. I personally prefer links that open in a new window. It doesn't mess with my original link in any way and is no more a hassle closing it than clicking a Back button.
Just my two cents worth.

Paul

 

[Dweezel]

Robert:
Thanks a lot for your comments.

Setting the background-color to transparent is CSS1.

Thanks for spotting the mistake I made on the downloads page. I must have done this while making the 'alt' and 'title' edits that Chris suggested above. I was copying and pasting code between image tags and I must have added an extra closing tag to some of the download links without noticing, which is what was causing the problem. Thanks.

The internal styles on the links page relate only to that page. I could put them in an external file but I'll probably leave them as they are.

I initially aligned the signature to the right because I thought it gave a better balance to the page but on reflection, with the 'Thanks' aligned on the left it does make more sense as you suggested to put the sig on the left to. I've moved it over.

Thanks again Robert.

Chris:
I was thinking about dividing the news section into 'news' and 'press' anyway using a dhtml dropdown menu. I think I could add a 'gig dates' item to that dropdown menu.

I'll adjust the colour of the rollovers. I'll keep it subtle but if users are having trouble seeing the effect then I must have taken the subtlety a bit to far.


As to the link opening in the same or a new window debate, I don't really have a strong opinion on it one way or the other. Though I don't think I've ever used target=_blank when linking to another site.

Thanks again to everyone that's replied.