Website Critique

[notarypublic]

As part of a several step process, I've been tasked with updating the content and redesigning a website for an academic research institute. First, I am making a slightly revised, W3C compliant version of the current site.

Here is my revised version.

I'm having some problems with the navigation bar working in IE 6 and previous (it uses a javascript technique I'd like to replace with pure CSS if possible) and the colors/layout aren't exactly appealing, but this site will only be up in the time it takes me to make the new design - it just needs to be a placeholder site for now, because ensuring the content is up-to-date is the highest priority.

Just curious to see if anyone can find any issues with how it displays, or ideas for the redesign. I have a few mock-ups I'll post in the next few days, but launching the revised site comes first.

 

[leroy30]

The drop down lists in the menu should be wider than the actual item... so that the menu items don't wrap!

I didn't look at the code behind but from what you say above you are using javascript for that menu? To do it in CSS is easy and more compatible with some viewers turning javascript off etc.

To do it in CSS just have your main menu items as inline-block divs (display:inline-block;*display:inline;zoom:1) and set a width and height and overflow as hidden. Put the list of links in that same div below the first line and they will be hidden then use css:hover to change the height of the div or remove the overflow:hidden

Have a look in to that. If you get stuck PM me )

 

[Phreaddee]

good call on ditching the justified text!

 

[notarypublic]

good call on ditching the justified text!

The problem along with the original text is that it is very poorly written. Every usability test I ran on it indicated it was almost impossible to read (one sentence in there is 56 words) - I'm slowly going through and replacing the content with more friendly text.

And Leroy, I'm working on a better dropdown menu today - it's mostly put together with CSS and overflow:hidden, but there is a JS hack for IE 6 and lower (no matter, I tested it and it doesn't work anyway). If anyone is curious as to how to make a pure CSS dropdown menu, here is a tutorial for one that I am fairly impressed with and will be using.

 

[d a v e]

header is a bit weighty at 98k for a png - use a jpeg instead and it should be 2/3 or half that

the blue hover on the second tier of the menu looks out of place - try a lighter green or a darker shade of grey or a yellow from the banner/logo
some more space before and after headings would make the text seem less cramped and a bit more padding in then headings themselves (making the green a little larger)

split the writing up into shorter paragraphs.

either make the text flush with the side of the site or then make more of margin -somehow the text looks a little disjointed.

some (all?) of the images need some optimisation e.g. Friesen's Social Attention Lab image is 177kb when it could easily be around 20-50kb

make the banner a link to the homepage

 

[notarypublic]

header is a bit weighty at 98k for a png - use a jpeg instead and it should be 2/3 or half that

the blue hover on the second tier of the menu looks out of place - try a lighter green or a darker shade of grey or a yellow from the banner/logo
some more space before and after headings would make the text seem less cramped and a bit more padding in then headings themselves (making the green a little larger)

split the writing up into shorter paragraphs.

either make the text flush with the side of the site or then make more of margin -somehow the text looks a little disjointed.

some (all?) of the images need some optimisation e.g. Friesen's Social Attention Lab image is 177kb when it could easily be around 20-50kb

make the banner a link to the homepage

all very good points. I've been so busy working on just testing the layout and compatibility that I skipped over some of the more basic tasks. Site should be running a lot leaner within the hour.

 

[leroy30]

You can shave another 12kb off that image by making it an indexed (256 colours) .png and it will look sharper than a jpg

 

[d a v e]

You can shave another 12kb off that image by making it an indexed (256 colours) .png and it will look sharper than a jpg

but the gradient and the photo will suffer under a 256 colour palette and jpeg could be smaller filesize

png8 29k

jpeg 25kb
and jpeg from fireworks with sharpened edges (jpeg export option) at 80 quality

 

[notarypublic]

Still optimizing some images, also starting to change around some of the other aspects of the design. The images in the lab pages need to all be edited, because instead of centering them using css, the previous designer just added white space around the images in photoshop. Tsk tsk.

 

[notarypublic]

Screenshot of design after some touching up. How should I style the <h2> tags to fit in better with the <h1> ones?

 

[leroy30]

Lol @ previous designer adding whitespace in the image!

Even with the minor changes you've improved readability somewhat