Site Ratings & Reviews - Horizon Design Critique

Author

Horizon Design Critique

Marc Bradshaw

2005-07-05, 11:31 pm

I would appreciate a critique of the design at the URL below.

http://preview.horizonlt.com/

Username: horizon
Password: leisureTrust

I know the design breaks when you increase the font size, and that fixed
font sizes have been used when variable ones should have been instead.

Any advice on how to fix these problems would be appreciated.

Thanks in advance.

Marc

Cien

2005-07-05, 11:31 pm

"Marc Bradshaw" <mbradshaw@beasolutions.com> wrote in message
news:1120603788.16685.0@echo.uk.clara.net...
>I would appreciate a critique of the design at the URL below.
>
> http://preview.horizonlt.com/
>
> Username: horizon
> Password: leisureTrust
>
> I know the design breaks when you increase the font size, and that fixed
> font sizes have been used when variable ones should have been instead.
>
> Any advice on how to fix these problems would be appreciated.
>
> Thanks in advance.
>
> Marc

Looks really good! The color scheme is very pleasing. My only gripe is that
the menu feels a bit crowded. Maybe put some space between the top and
bottom row.
--
Cien's Paint Shop Pro
http://www.cienpsp.com

kchayka

2005-07-12, 12:06 am

Marc Bradshaw wrote:
>
> http://preview.horizonlt.com/
>
> I know the design breaks when you increase the font size,

Sure does! :)

> Any advice on how to fix these problems would be appreciated.

Stop setting the dimensions of text blocks in px units. px are for
elements like graphics, which have known, fixed dimensions. Text size
cannot be controlled like that, so px is not an appropriate unit.

If you set dimensions in em units instead, they will adjust with
variations in text size. However, be mindful of the effect things like
varying window size have on overflow or line wrapping conditions. Also
note that absolutely positioning text blocks is often doomed to failure,
usually when it depends on a particular text size or x/y coordinates to
achieve the desired results. Stick with static positioning whenever
possible.

BTW, this newsgroup isn't the best place to get advice on CSS. You'll be
better off going to comp.infosystems.www.authoring.stylesheets or alt.html

We now return to our regularly scheduled critique...

The page source shows you're well on your way to creating a big pile of
"div soup". Is every bit of text wrapped in its own div with its own id?
I don't see any heading or paragraph markup at all, just a bunch of divs
and a couple lists.

You can probably get rid of a lot of those excess divs and simplify the
code just by using more semantic markup. That makes for simpler
maintenance in the long run, which is always a boon. Using descendent
rules in your stylesheet rather than slapping a class or id selector on
every element would help a lot, too.

Some of the colors need addressing
- You have not set any overall (body) background color. My browser
default color, which is not white, shows through. It is not attractive.
- Several images of text use white foreground on a light blue
background. It's unreadable, especially with those teensy font sizes in
the graphics. See
<URL:http://www.juicystudio.com/services/colourcontrast.asp>

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Disco Octopus

2005-07-12, 12:06 am

Marc Bradshaw wrote :
> I would appreciate a critique of the design at the URL below.
>
> http://preview.horizonlt.com/
>
> Username: horizon
> Password: leisureTrust
>
> I know the design breaks when you increase the font size, and that fixed font
> sizes have been used when variable ones should have been instead.
>
> Any advice on how to fix these problems would be appreciated.
>
> Thanks in advance.
>
> Marc

Looks nice.

I can imagine that some of the info on your site may be nice to have
printed out (price lists, addresses, etc) I would suggest that you
cater for a printed version of the pages.

The way it prints now is the "Content here" is actually printed on the
second page. I would like to see the content printed on the first
page, and in fact, the content should be the only thing printed ...
maybe a logo too, but certainly no menus, or search fields, etc.

--
the beef jerky team :
http://www.choicebeefjerky.com.au/distributors.html
not a beef jerky web site : http://mycoolwheels.com/vote.cmks
if you pay for your gym memebership, use it

Marc Bradshaw

2005-07-12, 12:06 am

Disco Octopus wrote:
> I can imagine that some of the info on your site may be nice to have
> printed out (price lists, addresses, etc) I would suggest that you cater
> for a printed version of the pages.

This is what the 'print page' button is for - it'll take users to a
version of that page with simply the logo, content, and a back link.

Thanks for your input.

Marc

Marc Bradshaw

2005-07-12, 12:06 am

Cien wrote:
> Looks really good! The color scheme is very pleasing. My only gripe is that
> the menu feels a bit crowded. Maybe put some space between the top and
> bottom row.

Thanks, I had planned this.

Marc

Marc Bradshaw

2005-07-12, 12:06 am

kchayka wrote:
> Stop setting the dimensions of text blocks in px units. px are for
> elements like graphics, which have known, fixed dimensions. Text size
> cannot be controlled like that, so px is not an appropriate unit.
>
> If you set dimensions in em units instead, they will adjust with
> variations in text size. However, be mindful of the effect things like
> varying window size have on overflow or line wrapping conditions. Also
> note that absolutely positioning text blocks is often doomed to failure,
> usually when it depends on a particular text size or x/y coordinates to
> achieve the desired results. Stick with static positioning whenever
> possible.

The design was produced for us by an external company, because we don't
have any designers on our staff - just developers (coders). They tend
to produce lovely looking designs, but aren't great when it comes to
converting them into HTML and CSS.

I plan to re-do the HTML and CSS and incorporate their images.

> The page source shows you're well on your way to creating a big pile of
> "div soup". Is every bit of text wrapped in its own div with its own id?
> I don't see any heading or paragraph markup at all, just a bunch of divs
> and a couple lists.

Exactly my point. See above.

> maintenance in the long run, which is always a boon. Using descendent
> rules in your stylesheet rather than slapping a class or id selector on
> every element would help a lot, too.

Descendant rules? Do you mean like...

#header ul li {

}

?

> - You have not set any overall (body) background color. My browser
> default color, which is not white, shows through. It is not attractive.

Well spotted, I hadn't noticed that one. Thanks.

> - Several images of text use white foreground on a light blue
> background. It's unreadable, especially with those teensy font sizes in
> the graphics. See
> <URL:http://www.juicystudio.com/services/colourcontrast.asp>

I'll replace the white text with a darker colour. Thanks for your input.

Marc

Marc Bradshaw

2005-07-12, 12:06 am

SpaceGirl wrote:
> Nice and clean, but it feels a bit... empty to me. Have you looked at
> some other Health Club (Gyms) sites? These places are about people... so
> to completely miss having any people on a design like this seems
> clinical and distant (to me). Personally I would be more attacted to a
> friendlier, more personal design.

Thanks for those thoughts. I'll incorporate these sorts of images into
the content. We were trying to keep the design as image-low as possible
and I guess we overlooked this.

Marc

kchayka

2005-07-12, 12:06 am

Marc Bradshaw wrote:

> kchayka wrote:
>
>
> I plan to re-do the HTML and CSS and incorporate their images.

That is often the best thing to do - let a designer design, but let a
coder implement it. :)

>
> Descendant rules? Do you mean like...
>
> #header ul li {

Yup. There is rarely a good reason to have a class or id selector on
every element. It just adds unnecessary clutter to the HTML and doesn't
make the CSS any easier to manage. It can even make it more difficult.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

kchayka

2005-07-12, 12:06 am

Marc Bradshaw wrote:

> Disco Octopus wrote:
>
> This is what the 'print page' button is for

You can do the same thing simply with a print stylesheet - no extra HTML
or server-side code necessary. Print stylesheets are supported by all
the major browsers these days, and many minor ones, too.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Marc Bradshaw

2005-07-15, 10:16 am

Marc Bradshaw wrote:
> I would appreciate a critique of the design at the URL below.
>
> http://preview.horizonlt.com/
>
> Username: horizon
> Password: leisureTrust

I've partly redone this design, taking your comments into account, but
am having some problems. I would appreciate it if anyone who has a
minute could have a look...?

I need the menu div on the left, content div in the middle, the updates
div on the right, and the footer div at the bottom, but can't seem to
get them to do as they should.

Thanks in advance.

Marc

Marc Bradshaw

2005-07-15, 10:16 am

Marc Bradshaw wrote:
>
> I've partly redone this design, taking your comments into account, but
> am having some problems. I would appreciate it if anyone who has a
> minute could have a look...?

I have produced a work around (using absolute positioning) for the
problem I was having, but it's still not perfect - I'd appreciate your
suggestions and comments.

Thanks.

Marc