Critique Please... My 1st proper 'CSS' attempt

#1

I've finally had the time to try a CSS layout based page properly, and
after reading posts here and at alt.html lately have tried my best to
make the page validate and also conform as much as possible to
accessibility guidelines.

So far I've only built one page and would like your comments so that I
can take your suggestions onboard before going any further.

http://www.gustoclothing.co.uk

TIA

Al.

--
Alan Cole. E-mail: justal at lineone dot net
http://www.forces-of-nature.co.uk [Coastal Sports]
http://www.tsunami-site-design.co.uk [Website Design]
http://tinyurl.com/64xrd [Plusnet ISP]

#2

On Thu, 25 Nov 2004 17:12:50 +0000, Alan Cole <justal (AT) lineone (DOT) net> wrote:

Quote:

I've finally had the time to try a CSS layout based page properly, and
after reading posts here and at alt.html lately have tried my best to
make the page validate and also conform as much as possible to
accessibility guidelines.

So far I've only built one page and would like your comments so that I
can take your suggestions onboard before going any further.

http://www.gustoclothing.co.uk

sans-serif is theproper name of the generic font. And you don't need to
restate the font-family list each time, it will be inherited. If you want
to change the size, just set font-size in the descendant element.

Your menu won't resize in IE.

Overall, too much reliance on pixels. Fixed-width designs waste space in
wider UAs and force a horizontal scrollbar in narrower ones. I'd size the
width of content areas in ems, and things which don't need to be in
columns can be full-width. And avoid justified text - it's a little hard
to read that way.

Some possible color-matching issues between the graphic corners and the
UA-generated background colors.

Overall - good color contrast, not a bad design. Maybe the orange header
is a bit too bright, but if it matches your product it works.

#3

Alan Cole wrote:

Quote:

I've finally had the time to try a CSS layout based page properly,
and after reading posts here and at alt.html lately have tried my
best to make the page validate and also conform as much as possible
to accessibility guidelines.

I think you should strive for a fluid design, as you have with this site:
http://www.tsunami-site-design.co.uk/
but using CSS of course.

What's with all the <span>s inside the <h1> and all the <p>s?

Your CSS looks overly complex, and uses pixel sizes (which means all
your IE visitors won't be able to resize the text). Use percentages,
and for the body, 100%.

Quote:

So far I've only built one page and would like your comments so
that I can take your suggestions onboard before going any further.

http://www.gustoclothing.co.uk

--
-bts
-This space intentionally left blank.

#4

"Alan Cole" <justal (AT) lineone (DOT) net> wrote

Quote:

I've finally had the time to try a CSS layout based page properly, and
after reading posts here and at alt.html lately have tried my best to
make the page validate and also conform as much as possible to
accessibility guidelines.

So far I've only built one page and would like your comments so that I
can take your suggestions onboard before going any further.

http://www.gustoclothing.co.uk

Looks good...but.

Two comments. Er... three.

1. Your container divs are fixed in size and therefore you get into major
overlap in text if you resize it.
2. The font for the grapical section headings looks too old fashioned for
the obviously current/street look of the site.
3. Promoting yourself is one thing but your link and logo at page bottom are
too obvious and large. A little distracting from your client's message.

Jay Gilmore

#5

In article <opsh065vvo6v6656 (AT) news (DOT) individual.net>,
Neal <neal413 (AT) yahoo (DOT) com> wrote:

Quote:

http://www.gustoclothing.co.uk

sans-serif is theproper name of the generic font. And you don't need to
restate the font-family list each time, it will be inherited. If you want
to change the size, just set font-size in the descendant element.

OK, I'll sort that out. That should reduce the filesize of the css file
which seemed a little too big to me.. Probably due to lots of fiddling
to get it to work how I wanted during the learning process, I'm sure
lots of it can be disposed of to create a more efficient css file.

Quote:

Your menu won't resize in IE.

Oops... I meant to change those font-sizes to % values. Will do so,
thanks.

Quote:

Overall, too much reliance on pixels. Fixed-width designs waste space in
wider UAs and force a horizontal scrollbar in narrower ones. I'd size the
width of content areas in ems, and things which don't need to be in
columns can be full-width. And avoid justified text - it's a little hard
to read that way.

I know, most of the other sites I build are more fluid, but I wanted to
get the rounded edges to each of the main content boxes. This meant the
tops and bottoms of each one ended up being a graphic. I did try
splitting these up into 3 smaller graphics that would allow the boxes to
be fluid, but couldn't work out how to do it.... I think I was trying to
approach it with my 'old-fashioned' table layout brain. I'll have to
work on the fluidity side of things on my next project.

How would I go about making the main text section more fluid whilst
still keeping the rounded edges?

Quote:

Some possible color-matching issues between the graphic corners and the
UA-generated background colors.

Hmmm... I knew I should have stuck with web-safe colours, but I was
given some specific artwork by the client so had to stick with her
'corporate colours'. I'll have to sort the colours out to websafe ones
and see what she thinks.

Quote:

Overall - good color contrast, not a bad design. Maybe the orange header
is a bit too bright, but if it matches your product it works.

I had no control over that at all...That is the colour of her logo (and
even her shop is painted that colour) so the orange HAD to stay!

Thanks for your comments... I've now got some work to keep me occupied
tonight!

Al.

--
Alan Cole. E-mail: justal at lineone dot net
http://www.forces-of-nature.co.uk [Coastal Sports]
http://www.tsunami-site-design.co.uk [Website Design]
http://tinyurl.com/64xrd [Plusnet ISP]

#6

In message <justal-4145F7.17125025112004 (AT) ptn-nntp-reader01 (DOT) plus.net>,
Alan Cole <justal (AT) lineone (DOT) net> writes

Quote:

I've finally had the time to try a CSS layout based page properly, and
after reading posts here and at alt.html lately have tried my best to
make the page validate and also conform as much as possible to
accessibility guidelines.

So far I've only built one page and would like your comments so that I
can take your suggestions onboard before going any further.

http://www.gustoclothing.co.uk

TIA

Al.

Consider the CSS you use when substituting a graphic for a heading:

(a) If you use "#gusto_leftcol h3.news span { display: none; }", then
"Latest News" will be invisible to most assistive technology (AT) UAs
(i.e. screen-readers, talking-browsers, etc.) as they will honour the
{display:none;}

(b) If, however, you use your other technique :
h3
{
text-indent: -2000px;
margin: 0;
padding: 0;
}

this will work for AT UAs, but the headings will be invisible to anybody
using a graphics browser with image download turned off.

-------------------------------------------

You might want to read (if you haven't already):

http://www.stopdesign.com/articles/replace_text/

regards.

--
Jake

#7

Alan Cole wrote:

Quote:

I wanted
to get the rounded edges to each of the main content boxes. This
meant the tops and bottoms of each one ended up being a graphic. I
did try splitting these up into 3 smaller graphics that would allow
the boxes to be fluid, but couldn't work out how to do it.... I think

Hi Alan,

There are lots of ways to do this. Here is one:

http://www.nrkn.com/stretchyDiv/
http://www.nrkn.com/stretchyDiv/left.gif
http://www.nrkn.com/stretchyDiv/right.gif

#8

On Thu, 25 Nov 2004 17:58:55 +0000, Alan Cole <justal (AT) lineone (DOT) net> wrote:

Quote:

How would I go about making the main text section more fluid whilst
still keeping the rounded edges?

See [http://www.alistapart.com/articles/customcorners/] and
[http://www.alistapart.com/articles/customcorners2/].

Quote:

Some possible color-matching issues between the graphic corners and the
UA-generated background colors.

Hmmm... I knew I should have stuck with web-safe colours, but I was
given some specific artwork by the client so had to stick with her
'corporate colours'. I'll have to sort the colours out to websafe ones
and see what she thinks.

I find different browsers do different things, and I have yet to sort it
all out myself.

#9

In article <v9IxtFj2VmpBFwwa (AT) gododdin (DOT) demon.co.uk>,
jake <jake (AT) gododdin (DOT) demon.co.uk> wrote:

Quote:

Consider the CSS you use when substituting a graphic for a heading:

(a) If you use "#gusto_leftcol h3.news span { display: none; }", then
"Latest News" will be invisible to most assistive technology (AT) UAs
(i.e. screen-readers, talking-browsers, etc.) as they will honour the
{display:none;}

(b) If, however, you use your other technique :
h3
{
text-indent: -2000px;
margin: 0;
padding: 0;
}

this will work for AT UAs, but the headings will be invisible to anybody
using a graphics browser with image download turned off.

-------------------------------------------

You might want to read (if you haven't already):

http://www.stopdesign.com/articles/replace_text/

regards.

Thanks, I'll have a good read through that article later, but your point
seems valid. I'm sure the "#gusto_leftcol h3.news span { display: none;
}" got there as a quick way to change the textual heading into a graphic
while I was working things out, but if screen readers etc will also
ignore the text then I'll change all instances to the other technique
using a large -ve text-indent.... Although that always seems like a bit
of a 'cheat' to me?

Al.

--
Alan Cole. E-mail: justal at lineone dot net
http://www.forces-of-nature.co.uk [Coastal Sports]
http://www.tsunami-site-design.co.uk [Website Design]
http://tinyurl.com/64xrd [Plusnet ISP]

#10

In article <j_upd.11631$9A.254163 (AT) news (DOT) xtra.co.nz>,
"Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote:

Quote:

Alan Cole wrote:
I wanted
to get the rounded edges to each of the main content boxes. This
meant the tops and bottoms of each one ended up being a graphic. I
did try splitting these up into 3 smaller graphics that would allow
the boxes to be fluid, but couldn't work out how to do it.... I think

Hi Alan,

There are lots of ways to do this. Here is one:

http://www.nrkn.com/stretchyDiv/
http://www.nrkn.com/stretchyDiv/left.gif
http://www.nrkn.com/stretchyDiv/right.gif

Cool, that looks quite easy. And I'll also have a good read and 'play'
with the [http://www.alistapart.com/articles/customcorners/] article
Neal suggested.

Thanks for that, I'm quite excited that I might be able to make the page
fluid after all.

Thanks.

Al.

--
Alan Cole. E-mail: justal at lineone dot net
http://www.forces-of-nature.co.uk [Coastal Sports]
http://www.tsunami-site-design.co.uk [Website Design]
http://tinyurl.com/64xrd [Plusnet ISP]