DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Design

Reply
 
Thread Tools Display Modes
Old 01-07-2006, 03:07 PM   #1
annc
Sysop
 
annc's Avatar
 
Join Date: Oct 2004
Location: Subtropical Queensland, Australia, between the mountains and the Coral Sea
Posts: 4,436
Default Site critique please

I'm redoing a site that I first designed many years ago, and have the design and content of the home page ready for critique. It validates with the W3C, gets a 100 score on sitening and displays as expected in Safari and Firefox on the Mac, and in Firefox, Opera and Mozilla on my Windows box.

But in IE6 (of course) there are a couple of problems. For a start, the right-hand column of pics sits up into the top banner; also, if I narrow the window, the entire centre column jumps down below the left-hand menu; and the flyout menu (hover over Events to see this) is in small text. It is the same size as the main menu in all other browsers.

I'm sure I knew once how to stop the centre column sliding down in IE6, but can't remember how. The other problems in IE are a mystery to me.

Any critical comments and advice welcome.

   
__________________
annc is offline   Reply With Quote
Old 01-07-2006, 03:31 PM   #2
annc
Sysop
 
annc's Avatar
 
Join Date: Oct 2004
Location: Subtropical Queensland, Australia, between the mountains and the Coral Sea
Posts: 4,436
Default

Oh, forgot to mention – the links don't work yet.

   
__________________
annc is offline   Reply With Quote
Old 01-07-2006, 04:31 PM   #3
terrie
Staff
 
Join Date: Oct 2004
Posts: 8,929
Default

Quote:
annc: Oh, forgot to mention – the links don't work yet.
LOL!!! I was just going to post that it looks great in Netscape 7.2 but the links don't work...'-}}

Some small things:

1. Intro section: "These facilities..." is indented. Intentionally?


2. In the "Training Events" section: "Many of our members..." is indented. Intentionally? Also, is "These events..." supposed to be a para on its own or is it is sentence in the "Many of our members..." para??

3. In the "Training Events" section: "Pony dressage..." is indented. Intentionally?


Aussie terminology question: "There are about 200 stables of solid construction on the grounds..."

Here in the States, "stables" means the building. What we would say is "there are about 200 stalls of solid construction on the grounds" perhaps adding "in X number of barns/stables"...

Sooo..."stables" refers to individual horse containers ('-}}) of some sort???

Oh! One last comment...great pics! Yours?

Terrie
terrie is offline   Reply With Quote
Old 01-07-2006, 04:50 PM   #4
annc
Sysop
 
annc's Avatar
 
Join Date: Oct 2004
Location: Subtropical Queensland, Australia, between the mountains and the Coral Sea
Posts: 4,436
Default

Quote:
Originally Posted by terrie
Some small things:

1. Intro section: "These facilities..." is indented. Intentionally?


2. In the "Training Events" section: "Many of our members..." is indented. Intentionally? Also, is "These events..." supposed to be a para on its own or is it is sentence in the "Many of our members..." para??

3. In the "Training Events" section: "Pony dressage..." is indented. Intentionally?
Yes to all. Same as in print – First para after a head is flush left, all paras after that are indented.


Quote:
Originally Posted by terrie
Aussie terminology question: "There are about 200 stables of solid construction on the grounds..."

Here in the States, "stables" means the building. What we would say is "there are about 200 stalls of solid construction on the grounds" perhaps adding "in X number of barns/stables"...

Sooo..."stables" refers to individual horse containers ('-}}) of some sort???
Here they can be either. I tend to say 'box' where you say 'stall', because a stall is usually what you get at the racetrack, where there is no space for the horse to turn around. 'box' is short for 'loose box'. But stable can mean either an individual box or a stable block. We usually do say 'stable block', but not always.

Quote:
Originally Posted by terrie
Oh! One last comment...great pics! Yours?
Yes - all mine! Thanks.

   
__________________
annc is offline   Reply With Quote
Old 01-07-2006, 04:52 PM   #5
Michael Rowley
Member
 
Join Date: Jan 2005
Location: Ipswich (the one in England)
Posts: 5,105
Default

Ann:

displays as expected in Safari and Firefox on the Mac, and in Firefox, Opera and Mozilla on my Windows box

I can't offer advice on the design details, but not showing right on 90% of people's screens (simple IE 6 users) would seem to be a fault: Firefox and Opera users should be considered, but not necessarily preferentially.

On the content, a small but to me important niggle: if you want to say that the arena measures 70 m by 30 m, an x is not a good substitute for a multiplication sign (though it looks similar in sans serif), and 70x30 m is not the way to express an area. It should be 70 m × 30 m.

You Australian dressage riders do yourselves well!

   
__________________
Michael
Michael Rowley is offline   Reply With Quote
Old 01-07-2006, 05:02 PM   #6
annc
Sysop
 
annc's Avatar
 
Join Date: Oct 2004
Location: Subtropical Queensland, Australia, between the mountains and the Coral Sea
Posts: 4,436
Default

Quote:
Originally Posted by Michael Rowley
I can't offer advice on the design details, but not showing right on 90% of people's screens (simple IE 6 users) would seem to be a fault: Firefox and Opera users should be considered, but not necessarily preferentially.
I agree, Michael. that's why I've asked for help! I used to know the fix for this, but have forgotten it.

   
__________________
annc is offline   Reply With Quote
Old 01-07-2006, 05:23 PM   #7
terrie
Staff
 
Join Date: Oct 2004
Posts: 8,929
Default

Quote:
annc: Yes to all. Same as in print – First para after a head is flush left, all paras after that are indented.
Ahhh...thought that might be what's going on...I'm a flush left person myself...somewhere along the line I stopped indenting...

That said, then shouldn't "These events are also..." be indented???


>>Here they can be either. I tend to say 'box' where you say 'stall',

Interesting...we don't use "box" but I know what it means from reading.


>>because a stall is usually what you get at the racetrack, where there is no space for the horse to turn around. 'box' is short for 'loose box'.

Even more interesting because we'd call that a "standing stall" (not seen much here in the States now) and all of them at the race track are full sized boxes/stalls...


>>But stable can mean either an individual box or a stable block. We usually do say 'stable block', but not always.

I'll remember that...I've seen "stable block" in books but it's not a common term here...

Ain't English grand!!! LOL!!!


>>Yes - all mine! Thanks.

You're welcome...you've got a nice mix on the page...what are you shooting with these days? I'm really pleased with the Canon Rebel XT I bought...it's soooo nice to have an slr and being digital just sweetens the deal...'-}}

Terrie
terrie is offline   Reply With Quote
Old 01-07-2006, 10:43 PM   #8
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by annc
I'm sure I knew once how to stop the centre column sliding down in IE6, but can't remember how. The other problems in IE are a mystery to me.

Any critical comments and advice welcome.
Looking (first) with Mozilla 1.7 on Win2K...

First thing that jumps out to me is that you have some elements (like headings) that have a white background, the page (body/html) does not. Makes for a pretty messy look! The second screen shot shows how the white background of a heading even continues "under" the image. (See attachments 1 & 2.) If you want a page to have a white background you must define it that way, otherwise it will be whatever the visitor has set as their default window background (off-white for me, easier on my eyes).

Second thing I notice: the flush/indented paras you are using may be the common thing in print but is an exception on the web, where the normal way is to have all flush-left paras with some whitespace between them. There is a reason for that: a page on the web needs to be "scannable" and for that the eye needs things to "land" on. Using simple paragraph blocks makes it easier for they eye to "track" down a block of text and land on individual paragraphs. For online text it's also harder for the eye to track along lines, and having separated paragraphs makes this easier, too. Reading online (on screen) is not the same thing as reading print - different "rules" apply. Indeed on your page I find it very hard to actually read the text, the large leadingmakes it even harder to see any paragraphs at all.

Third: I don't like the amount of whitespace between the masthead and the first h3 heading, especially with the photographs on the right starting higher - I'd give both the same top margin so they line up - and possibly do teh same for the menu on the left.

Fourth: irregular image placement. The first big image (under "Dressage Activities") starts right under the h4 heading but sticks out over the h5 heading; and it seems to have a right margin, so it's not flush right. The result looks rather messy to me. The second large image (under "Pony Dressage") starts right under that heading and is flush left, no extra margin there. So I'd at least make the first image flush right within the block. Preferably also start under the h5 heading, not the h4 one. Giving both a top margin so the top is flush with the top of the paragraph might look even better. You could "tie" the images to the paragraphs by nesting them inside the paragraph and then float them, giving them a top margin of zero or maybe a few pixels to visually line them up with the top of the paragraph. Same for the first picture on the page. But this is a matter of taste, mainly.

Fifth: Even more taste: I don't like how the page footer suddenly extends over two columns - I'd either have it across all three columns or only the middle one. And there's an awful lot of whitespace there between the line (border) and the text but none at all between the text and the bottom. (Attachment 3.)

Those are all things that are immediately apparent to me, without looking at any code at all (though I did look at some of the HTML to check upon what my eyes were noting).

Now... as to some of the problems you mention. First, I find your CSS somewhat hard to read with the "hacks" in there, so I'm not sure what is active and not (I never use hacks, period) and my suggestions may not apply or work.

1. The smaller text on the flyout menu is probably caused by this:
Code:
* html ul li { 
    float: left; height: 1%;
    font-size: .8em;
    (...)
IE (and possibly other browsers!) will interpret that so a nested li will have .8 the fontsize of its containing element. You may correct that with:
Code:
li li {
    font-size: 100%;
}
Put this after the first li rule. That states that the font size of a nested li element will have the same size as whatever li it's nested in. (You'd get the same problem with nested tables, and the solution is analogous, only slightly more complicated.) Another note about the menu: "Home" should not be a link on the home page (not even one that leads to the same page!).

2. Placement of the images on the right. (Is this block intended for more navigation? If not, why call that block "rightnav"?) I note that you have a negative top margin here; negative margins tend to be problematic. This probably causes the problem in IE with the block "going up". You will have more control over vertical placement if you wrap the whole page content (all three columns, or only content and right sidebar) within a "wrapper" div. You could use this to control even spacing with respect to the page head by giving it a specific top margin, and giving it a padding of zero. The right sidebar could then simply be floated right. (In theory, at least - test!)

3. The content column is much narrower in IE (5.01) than in Mozilla, and there's a lot of space between that column and the righthand sidebar - probably also the result of the negative right margin. (Negative right margin? I don't even know how to interpret that! Extend beyond the browser window? What do you expect that to do?) This probably also causes weird behavior when you make the window narrower. Looks like IE does a different calculation for what width the center column should have (it looks like it gets the width of the widest image in it), and when that becomes larger than there is space for in the window it naturally pops down below the menu.

4. The h3 does not have so much whitespace above it in IE as it has in Mozilla. Same for the h1 in the page head: there is quite a top margin in Mozilla (so it doesn't line up with the logo) that doesn't show in IE. The cause is that different browsers have different internal stylesheets: some give headings a top margin, some don't. Solve by setting an explicit top margin (and other margins if needed) for headings - you have none defined now so you get whatever a browser has defined in its internal stylesheet.

5. In IE there is a different space between the (rather blurry!) logo and the headings in the top area. Looks like the image has a padding-right of 20 pixels; try making that a margin instead.

I also had a quickie look with Opera 7.23 - it combines some of the problems of IE and Moz: images on the right moving up into the page head, yet other values for heading margins in its internal stylesheet. And where both Moz and IE have a little space between each of the sidebar images, Opera does not; a little space is better, and you could get it by giving the images there an explicit bottom margin. But Opera also tries to be "bug-complatible" with IE, but doesn't succeed completely - which makes it hard to tweak for. I tend to tweak (minimally) for IE and then accept what it looks like in Opera, unless it's way off.

I could probably come up with more, but as you start to tweak, other things will happen as a result, and whatever I come up with may no longer apply... and we've got to keep you busy
Attached Thumbnails
Click image for larger version

Name:	hsnap108.png
Views:	119
Size:	8.5 KB
ID:	312   Click image for larger version

Name:	hsnap109.png
Views:	109
Size:	47.1 KB
ID:	313   Click image for larger version

Name:	hsnap110.png
Views:	95
Size:	955 Bytes
ID:	314  

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog

Last edited by iamback; 01-07-2006 at 10:45 PM. Reason: Attachments disappeared (why?)
iamback is offline   Reply With Quote
Old 01-08-2006, 12:21 AM   #9
annc
Sysop
 
annc's Avatar
 
Join Date: Oct 2004
Location: Subtropical Queensland, Australia, between the mountains and the Coral Sea
Posts: 4,436
Default

Quote:
Originally Posted by terrie
Ahhh...thought that might be what's going on...I'm a flush left person myself...somewhere along the line I stopped indenting...
Well, when you do magazines for a living, indenting becomes second nature, and flush left with a space above looks a bit like word-processing.

Quote:
Originally Posted by terrie
That said, then shouldn't "These events are also..." be indented???
Indeed it should! Thanks for picking that up – on all my screens, the new para didn't show at standard width, and when I narrowed the window, I was watching the behaviour of the top text and photo.

Quote:
Originally Posted by terrie
Ain't English grand!!! LOL!!!
Indeed! Life would be far less interesting if we all spoke it the same way.

Quote:
Originally Posted by terrie
what are you shooting with these days? I'm really pleased with the Canon Rebel XT I bought...it's soooo nice to have an slr and being digital just sweetens the deal...'-}}
I'm using an Olympus E-20P, which I bought nearly three years ago. It is very forgiving, and I get some great action shots with it. The lens (as always with Olympus) is very good quality, but I badly need more zoom to get decent shots from a greater distance. I find I have to stand at B or E (half way along the arena) to get 8 x 10 photos after cropping that are mostly horse and rider, and this is what I need to sell them.

The indoor at Nambour is notoriously difficult for photographs, because it is actually open-sided, and has only the minimum of artificial lighting, with darkish skylights. So anything inside tends to be underexposed unless you stop right down, and then you get blurred movement and overexposed external backgrounds, which is not what you want for dressage. At the international event (CDI-W) last year, I was very disappointed with the results, but this photo, where I carefully worked on the horse and rider in Photoshop, shows how the Olympus lens gives minimal artifacts under quite difficult conditions. When I e-mailed the mother of the rider asking permission to use the photo there, she liked it so much she bought it! I did warn her I couldn't provide a high res version, but she bought it anyway and was very happy with the prints she got from it at a photo lab.

   
__________________
annc is offline   Reply With Quote
Old 01-08-2006, 12:30 AM   #10
annc
Sysop
 
annc's Avatar
 
Join Date: Oct 2004
Location: Subtropical Queensland, Australia, between the mountains and the Coral Sea
Posts: 4,436
Default

Thanks for all that constructive criticism, Marjolein. You have given me a lot to think about (and work on!)

   
__________________
annc is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Is my site better now? zofiaphoto Web Design 19 08-24-2006 05:12 AM
WWW Site Down? HTMLAlan Web Site Building & Maintenance 13 07-23-2006 02:38 PM
Another site critique Daudio Web Design 25 03-09-2006 12:46 AM
OpenType format critique ktinkel Fonts & Typography 1 01-20-2006 04:10 PM
Yet another CSS help site annc Web Site Building & Maintenance 4 10-07-2005 10:46 PM


All times are GMT -8. The time now is 12:59 PM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.