Critique CSS layout (1st go - fingers crossed)

L

lime

I've been using CSS for a while, however always using tables for the layout.

This is my first go using a CSS only layout. After many versions (about 7 of
them) this is the final version that I would like critiqued.

I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox 1.0.

http://www.limelightstudio.com.au/iss/html/

Thanks,

Helen
 
L

Leonard Blaisdell

A

Alan Cole

But think of what you have learned!


Works great in that ancient Mac browser IE5.5. And MacMozilla 1.2.1. And
it looks lovely in MacLynx.


And it even validates.

leo

I would love to critique the site, but I can never get to any of you
www/limelightstudio.com.au links. Every time I try, my browesr (FF1.0 on
Mac OSX) tries for a while and then times out.... I've tried to get to
your sites a few times now over the past few days with no joy.

Al.
 
N

Neredbojias

Without quill or qualm, lime quothed:
I've been using CSS for a while, however always using tables for the layout.

This is my first go using a CSS only layout. After many versions (about 7 of
them) this is the final version that I would like critiqued.

I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox 1.0.

http://www.limelightstudio.com.au/iss/html/

I get a horz scrollbar in IE 6 at about 850-900 pixels. Not in Moz,
though.
 
T

Titus A Ducksass - AKA broken-record

I've been using CSS for a while, however always using tables for the layout.

This is my first go using a CSS only layout. After many versions (about 7 of
them) this is the final version that I would like critiqued.

I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox 1.0.

http://www.limelightstudio.com.au/iss/html/

Thanks,

Helen
Looks good but lots of broken links.

<A message to top posters. Type your reply here>
 
T

Titus A Ducksass - AKA broken-record

Looks pretty good.

Text for the main body of the page is a bit small though.

Using a <ul> for the navigation menu would enhance its appeal to non-CSS
browsers. If you don't like the margin and bullet points that a <ul> often
carries with it, you can use CSS to remove them.

Do you have a working example of the css for this technique Toby....
I am sure you have.

<A message to top posters. Type your reply here>
 
H

Henry

lime said:
I've been using CSS for a while, however always using tables for the layout.

This is my first go using a CSS only layout. After many versions (about 7 of
them) this is the final version that I would like critiqued.

I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox 1.0.

http://www.limelightstudio.com.au/iss/html/

Thanks,

Helen


Great effort!!!

Which Dreamweaver template did you used!?

;)
 
H

Henry

Toby said:
lime wrote:




Looks pretty good.

Text for the main body of the page is a bit small though.


Still bigger than browser' menus.

Size good enough for billions pages, good enough for this bloke.

Get better glasses, Toby...

or...

adjust your browser settings...

;)
 
J

Jim Higson

lime said:
I've been using CSS for a while, however always using tables for the
layout.

This is my first go using a CSS only layout. After many versions (about 7
of them) this is the final version that I would like critiqued.

I have tested on the following Win browsers: IE6, NS6 & Mozilla Firefox
1.0.

FYI, is also fine on Konqueror 3.2
 
T

Toby Inkster

Titus said:
Do you have a working example of the css for this technique Toby....

That I do, but my example goes further than just playing with the margin
and removing bullet points. It adds pretty borders and a roll-over effect.

http://examples.tobyinkster.co.uk/css-rollovers

It's pretty thoroughly documented, so a quick read should make it obvious
which bits of CSS are relevant to the OP's page.
 
T

Toby Inkster

Henry said:
Still bigger than browser' menus.

Smaller than my browser's menu. Smaller than the main navigation. 85% the
size of my preferred font size. (My preferred font size is 12pt, which is
17px on my monitor.)
 
A

Alan J. Flavell

Toby said:
lime said:
[...]
Text for the main body of the page is a bit small though.

Indeed it is, exacerbated by low colour contrast.
Still bigger than browser' menus.

What's that supposed to mean? You have no idea what my browser menus
look like

[...]
adjust your browser settings...

That's fighting talk. I already -did- adjust my browser settings for
optimal viewing, i.e 1.0em is my preferred size for normal content,
given a reasonable foreground/background contrast and font face; and
I'm sure Toby will say he'd already chosen his preference in that
regard too.

I'm sorry, but on this group that isn't even remotely funny. You've
got a damned cheek (and so has the page author) to tell me that my
chosen default is too big, and in need of reduction to 85% (if I'm
reading the stylesheet right) -and- aggravate that by significantly
lowering the contrast.

So this is another page that's crying out for me to use my
developer-toolbar to "disable styles" for improved readability.
 
L

Lachlan Hunt

lime said:
This is my first go using a CSS only layout. After many versions (about 7 of
them) this is the final version that I would like critiqued.

http://www.limelightstudio.com.au/iss/html/

It's fairly well done from a visual perspective, especially since it's
your first go at a pure CSS layout.

* The light blue backgroud with the grey text does make it harder to
read. Try lightening the background and/or darkening the text colour.
* The Privacy Statement link needs to be a different color than the
"Last Updated ..." text. I hovered over Last Spdated, sice the colour
made it look like a link, then, since it wasn't, I didn't realise
Privacy Statement was until much later.
* Try adding more visual feedback when hovering over the navigation
list. eg. By changing the colour and/or background.


The headings also should not be written in all uppercase within the
markup. I've heard it causes some screen readers to speak all the
letters, rather than read them as words. Use Title Case Like This, and
then style them using text-transform: uppercase; I would also change
the footer to this, just to keep the links together:

_Privacy Statement_ | _Website Design by Limelight Design Studios_
Last updated: 13th November 2004

Make both of those links the same colour, but different from the Last
Updated line.

There are also some markup issues:

* Headings. There's no <h1> - <h6> elements in the entire document.
- Put the ISS logo within an <h1>
- Page title, "Welcome", in <h2>
- Then <h3> for the last two that you have in all uppercase.
* Navigation list: Use <ul> and <li> for each item.
* Remove most, if not all <br> elements, and replace them with more
semantic options. (Most will be replaced with correct <li> and <hn>
elements)
* There seems to be an excessive number of <div>s, and the main content
is incorrectly within <div id="pageTitle">, which should really be an
<h2> anyway.
 
K

kchayka

lime said:
This is my first go using a CSS only layout.

http://www.limelightstudio.com.au/iss/html/

f-up set to alt.html.critique.

Too-small font-size for body text combined with reduced contrast between
text and background colors makes it quite hard to read.

You've got mostly div soup here. Failure to use semantic markup can
create unnecessary accessibility barriers. Use "div" only when there
isn't a more appropriate element.

Your headings are a good example of what _not_ to do. You have no
heading markup at all in these pages. Instead, it's stuff like
<div id="pageTitle">Title
<p><strong>SUBHEADING</strong><br>

Proper heading markup provides navigation aids to several browsers,
among which are Opera and most screen readers. Typing all caps for the
subheading creates another problem - some screen readers may interpret
all caps as abbreviations or acronyms, and read each letter individually.

Use proper heading levels. The banner should be <h1>, pageTitle should
be <h2>, SUBHEADING should be <h3>. Use CSS to style margins, colors,
etc. If you must have all caps, do that with CSS, too, with
text-transform:uppercase.

Your navigation menu should also be list markup. See
<URL:http://www.alistapart.com/articles/taminglists/>
 
K

Kris

[QUOTE="kchayka said:
Works great in that ancient Mac browser IE5.5.

AFAIK, there is no IE 5.5 for Mac. Is that a typo?[/QUOTE]

IE/Mac goes no higher than version 5.2.3. To put things in perspective,
IE6(SP1) is older than IE/Mac 5.2.3.
 
K

kchayka

Kris said:
To put things in perspective, IE6(SP1) is older than IE/Mac 5.2.3.

How about another perspective? Mac IE 5 hasn't had any real
embellishments where its CSS capabilities are concerned. It's still
stuck on good support of CSS1 and dodgy support of CSS2. Overflow is
quite broken. Handling inline lists is dreadful. I could go on, but I won't.

It may well have been ahead of its time when it was first released, but
it has most certainly fallen rather far behind the pack. Its bugs and
deficiencies have given me, personally, more trouble than IE6 has.
 
B

Brian

Kris said:
IE/Mac goes no higher than version 5.2.3. To put things in
perspective, IE6(SP1) is older than IE/Mac 5.2.3.

True enough, but AIUI, IE/Mac 5.2.3 contains fairly minor changes from
IE 5.2 and, in turn, 5.1, also for the Mac. Whereas IE Win 6.0 contains
fairly substantial changes from 5.5 Win. Mind, I'm not arguing that 6.0
is a better browser. In some ways, Mac 5.x is a better browser, most
notably in support of important standards. No, not CSS! I'm talking
about trivial things like interworking protocols defining content type
and such. You know, thoese pesky security concerns. ;-)

Still, IE 5.x Mac is a fairly old browser.
 
B

Brian

Lachlan said:
* Headings. There's no <h1> - <h6> elements in the entire document.
- Put the ISS logo within an <h1>

That sounds good, but only for the home page.
- Page title, "Welcome", in <h2>

Not so sure about that. "Welcome" is not much of a heading, is it? It
doesn't separate parts of the document. The whole page is a welcome
- Then <h3> for the last two that you have in all uppercase.

I'd make those <h2>.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top