Rip apart please

[Foamcow]

I've just "finished" a couple of site templates for a client and wondered if you guys would take a look.

Let me know if you see any problems. Design crit is also welcomed but I probably can't do much about that now.

http://www.targetgroup.co.uk/clients/bpe/lender

http://www.targetgroup.co.uk/clients/bpe/consumer

They are single pages, my job was to provide a design and code template for a ColdFusion developer to use when building a site.
I should also add that some of the images are just positional comps as they are not defintely being used.
Rip away!

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[BillyRayPreachersSon]

You've got 2 nice looking sites there. A few things:

- Do you find having this at the top of each page:

<?xml version="1.0" encoding="UTF-8"?>

negates the DOCTYPE in IE? I believed it did, although you may find that you don't have any rendering issues / quirks in IE anyway.

- For the consumer page, it might be nice to get the background behind the menu bar sizing vertically. In Firefox, after increasing the font size only two stages, the menu text wraps, and is unreadable against the white background.

- For the hover behaviour fix, consider using IE-only conditional comments. Why load the script for browsers where it is not needed?

You can use:

<!-- handles drop down hover behavior in IE -->
<!--[if IE]>
   <script src="scripts/menus.js" type="text/javascript"></script>
<![endif]-->

- Depending on the content of your tables, you may want to add row grouping and column grouping attributes, and any heading attributes.

- Consider replacing some of your images with text, and use CSS background images to hide the text and display the image, where supported. Take the lender page. The image at the top could be replaced with an h1 element:

<h1 id="mainPageHeading">Speed is of the essence</h1>

and then use CSS on that element to hide the text and / or put the image in as a background image. You can test this with the "Disable All Styles" option available with the Web Developer Toolbar plugin for Firefox (Ctrl-Shift-S for the latest version).

You've done a great job on the code - neat markup, fully validating, meaningful title attributes, and access keys (although you might want to add a "Site Map" and "Accessibility" page - to explain about how to use access keys, etc). Maybe add HTML and CSS validator links at the bottom so people can have the confidence that your pages validate.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Foamcow]

Thanks Dan.

Good point about the ie conditional, but doesn't the conditional only work in IE anyway? If so then the script will load in FF etc anyway and it's only meant for IE, so it's kind of redundant if you see what I mean.

I used to have problems with the XML prologue, but the last few jobs I've done I've used it and not had any probs.
That said I'd be interested in hearing from people with pre 6 versions of IE.

The image with the text in is just a place holder, but it is worth thinking about actually so I'll look into that because it may help the guy who is actually going to be building the site.

Menu sizing... yeah, I need to do that... forgot...tsk!... b**ger!

Already done access key pages ;-) Though I am going to suggest removing most of the access key attributes and let screen reader default settings handle it. After all "we" are all about not removing control from the user, it seems to go against the grain to enforce our own access keys.
I think I'll just leave the "main" ones that jump to things like the newsfeed or login boxes.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[BillyRayPreachersSon]

The conditional comments are IE-only. Because the comment is opened before the script tag, and closed after it, FF and any other browsers will ignore the script tag totally. Only IE will parse it.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Foamcow]

Ahh I see.

Will the page still validate with the conditional then?

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[BillyRayPreachersSon]

Absolutely. As far as any user-agent (whether browser, validator, etc) is concerned, the contents of the comment can be ignored - it's just a comment.

This is the great thing about them - only IE parses the contents.

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BabyJeffy]

Very nice code, Foamy. If you code like this for every project, then make sure you adjust your rates accordingly!

Jeff

 

[sirlojik]

menu is annoying,....hover problem. why not use javascript as opposed to CSS for that.

---------------------------
Join Or Participate in my project...

https://sourceforge.net/projects/os-weblib/

 

[sirlojik]

hmmm, it probably was done with javascript. sorry abt that post but still the desired effect is not achieved. Nice looking websites tho, i like the colours for the first site. TOO professional looking, later mate

---------------------------
Join Or Participate in my project...

https://sourceforge.net/projects/os-weblib/

 

[JamesLean]

One comment I would make is on the dropdowns on the Consumer site: it would be better if the whole link area was clickable, rather than just the actual text. At the moment you have a situation where you can mouse over an empty area of a link and it highlights but nothing happens when you click.

Other than that, looks good!

--James

 

[Foamcow]

menu is annoying,....hover problem. why not use javascript as opposed to CSS for that.

Can you elaborate on that please?
The menu is done with CSS in the main with a little Javascript to accomodate Internet Explorer.
What is the specific problem you have?
What browser/OS are you using?

And I don't really want to rely on Javascript for the navigation as it impacts accessibility and crawlability besides everything else.

If you can give me some more info on the problem you have with the menu I can look into fixing it.

TOO professional looking,

errr.. yeah. Is that a bad thing? I think the client prefers professional over anything else really


[bold]JamesLean[/bold]
Good point about the link/rollovers. I will look into doing that depending on client feedback.

Thank you both for your comments. Much appreciated

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[tsdragon]

Just a couple of comments:

On the consumer site you can mouse over the words "your home" on the menu and the dropdown part will open, but your cursor isn't over it. You should try to make the width of the dropdown the width of it's name.

When you have a menu item that leads to another (sub)menu it is common practice to indicate this by putting ... on the menu item. Otherwise the submenu popping up comes as a surprise, especially since there aren't many submenus.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[Foamcow]

Actually, that's not a bad idea Tracy.
I will suggest that to the client and put it in my style guide. At the moment, I'm kind of showing "what if's" with that menu, the final content is down to someone else.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[sirlojik]

Hi, am using IE 5.5 behind a proxy. when i go to the consumer site and hover over the menu, a submenu opens, when i try to go down the submenu, it [red]disappears[/red].

i am trying to get to the 'what we do' submenu item but can't, this is probably happening during an 'onmouseout' of the parent menu.

btw, about the professional look of the site.....that's a complement. i like it when pple use flowing,simple coloured schemes to create better sites than those filled with pictures.

later

---------------------------
Join Or Participate in my project...

https://sourceforge.net/projects/os-weblib/

 

[Foamcow]

Hmm

I wonder if I overlap the submenu slightly if the problem will go away.

I'll take a look, thanks.... and thanks for the compliment too!

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[tsdragon]

I'm using an IE-based browser and I don't have any problem with the menus. The only way I can duplicate sirlojik's problem is to mouse over the part of the menu I mentioned above (the words "your home") and then try to move the mouse down. Since the dropdown menu doesn't extend to that part of the menu bar, it doesn't work. But if I move the mouse over to where the dropmenu is and move down it works like a charm.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.