10 replies [Last post]
Roy Evans
Offline
Regular
Last seen: 15 years 4 weeks ago
Joined: 2004-11-18
Posts: 15
Points: 0

Hi all

I've almost completed a site for a client that uses CSS-P and I would really welcome any comments on this. I still haven't quite gotten my head around all the possibilities and peculiarities, but would appreciate your input.

The site is at http://www.kaboodle-ltd.com/hbg

Thanks in advance

Roy

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 31 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Any criticism gratefully received

It is a nice looking site. However, I am worried about the human cloning of executive and staff that is evident on: http://kaboodle-ltd.com/hbg/about_team.php Its illegal, you know . . . Laughing out loud

A couple of small comments about the overall useability. Make your top logo a link to your homepage, the "home" is at the bottom in the list of submenu items on the left on all pages accessed through the main horizontal nav.(the horizontal nav would normally have a [home] if you followed general convention) I know you have Home in the footer and all that, but departures from convention can be unsettling to users.

The design in IE5.5 works, it just doesn't center as intended. If you search this forum you will find numerous posts on CSS centering techniques.

There is a fair bit of specifing properties that are redundant to the default for a particular tag. You also use properties that don't really apply like a vertical-align:top; which does not apply to a div - it is for td. A validator won't pick up that sort of thing. You also haven't used any of the shorthand available for margin, borders, font and stuff. It makes things more compact if you shorthand your properties.

As for the CSS listing. Do your self a favour for future maintainence and always apply the following:

  • Use lower case - while CSS is not case-sensitve, per se some manipulations of css may be case sensitive so it makes sense to avoid any problems.
  • Develop a practice of doing your CSS-P first. I often just do the structural part of ids or classes in one section, and then any presentational color or font styling later (or in a separate sheet).
  • Within code blocks, proceed from the structural/positional determinants, then dimensions, and then finally presentational information. e.g. display|position|(top,right,bottom,left)|float| width|height|margin|border|padding |color|background|font. . .
  • Comment your code extensively if you have anything complicated you are doing positionally, or if you are using hacks where other codeblocks have dependencies or vice versa
DE

[/]

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Roy Evans
Offline
Regular
Last seen: 15 years 4 weeks ago
Joined: 2004-11-18
Posts: 15
Points: 0

Any criticism gratefully received

Many thanks David - much appreciated. I forgot to mention the fact that the Company is a division of the Stepford Wives Assn Laughing out loud

It's really interesting what you said about the order of things in the CSS - I made the mistake of letting Dreamweaver do things for me, but shall watch for this in future. That said, some of the class elements were placed deliberately next the div elements with which they were associated purely to make things easier in Dreamweaver. I think I should become less dependent.....

Also interested in the shorthand - is there somewhere you can point me in the direction of that could help with this.

Again, thanks for the comments, I'm really very grateful.

Roy

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 31 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Any criticism gratefully received

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

wisbin
Offline
Enthusiast
Netherlands
Last seen: 15 years 7 weeks ago
Netherlands
Joined: 2004-10-28
Posts: 71
Points: 0

Re: Any criticism gratefully received

Roy Evans wrote:
I would really welcome any comments on this. I still haven't quite gotten my head around all the possibilities and peculiarities, but would appreciate your input.

The site is at http://www.kaboodle-ltd.com/hbg


Hi Roy,

I love the design and it is nice to browse. To add some happiness to the user experience, you could consider putting an active-state on the chosen section, to see where you are.

I would also add some white-space (padding/margin) on the #pagecontent and/or #footer to make the layout less crowdy, but that could be subjective.

...and I think the "contact us" and the "about us" are almost the same, maybe you can use the first one as the home button Tongue

nice job!

cheers

Roy Evans
Offline
Regular
Last seen: 15 years 4 weeks ago
Joined: 2004-11-18
Posts: 15
Points: 0

Re: Any criticism gratefully received

Wisbin, many thanks for the comments.

I would love to put active states on the pages as well, but I was a bit selfish on this - all the navigation elements are server side includes so I only have to update one file should there be changes. If you know of a way that could combine both, that would be the best of all worlds and I would be forever in your debt!!!

Take your point about some of the spacing and will do something on this. The full test site is now up at:

http://www.hbgassist.com/newsite/index.asp

Thanks again!

Roy

Wranga
Offline
Regular
Last seen: 10 years 31 weeks ago
Joined: 2004-11-21
Posts: 22
Points: 0

Any criticism gratefully received

Nice design. Personally, I would mark-up an unordered list for the link bar at the top and then make it graphical using CSS. But don't worry about me, I'm a semantics freak Wink

Also, the layout screws up a bit after the font is increased past a certain size. You might want to fix that up.

Roy Evans
Offline
Regular
Last seen: 15 years 4 weeks ago
Joined: 2004-11-18
Posts: 15
Points: 0

Any criticism gratefully received

Funny you should say that Wranga, as I'm about to start work on a new site where I'll be doing just that with the navbar - some great tutorials on here gave me hope that I could do it!

You mention that the site screws up when the font size is increased - how would I go about making sure this doesn't happen?

Thanks for the comments - sorry if some of my questions seem a little basic. It's a steep learning curve for me, but I'll get there!

Roy

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 17 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Any criticism gratefully received

I don't like the mouseover effects on the top link (the bit that turns the images blue).

What could be better is either greyscaled images, which color up, or a simple underline under the text.

Verschwindende wrote:
  • CSS doesn't make pies

Wranga
Offline
Regular
Last seen: 10 years 31 weeks ago
Joined: 2004-11-21
Posts: 22
Points: 0

Any criticism gratefully received

Roy Evans wrote:
You mention that the site screws up when the font size is increased - how would I go about making sure this doesn't happen?

I'm looking at your style-sheet, from what I can tell the problem is that you set the height of the text at the bottom. I would try to find another way or it flows into the footer if you increase the size too much.

Roy Evans
Offline
Regular
Last seen: 15 years 4 weeks ago
Joined: 2004-11-18
Posts: 15
Points: 0

Any criticism gratefully received

Thanks wranga - added to the list of things I need to sort before launching the site properly. All of this has really been useful and a big thanks to everyone.

Next site check coming soon!

Roy