Critique please, site layout for vehicle communication company

[Nik Coughlin]

This is the preliminary mockup, so only dummy content, no real links, poor
quality jpegs etc.:

http://informationage.co.nz/kingcom/

HTML validates as 4.01 strict and CSS validates apart from the
vendor-specific properties for rounded corners

TIA!

 

[rf]

This is the preliminary mockup, so only dummy content, no real links,
poor quality jpegs etc.:

http://informationage.co.nz/kingcom/

I think it's somewhat arrogant of you to tell me my browser is out of date.
If I were a prospective customer I would probably just move on to the next
site in my search results.

You have a severe case of divitus, mixed in with tables for layout.

 

[Neredbojias]

This is the preliminary mockup, so only dummy content, no real links,
poor quality jpegs etc.:

http://informationage.co.nz/kingcom/

HTML validates as 4.01 strict and CSS validates apart from the
vendor-specific properties for rounded corners

First look is pretty impressive and appealing.

May be a little dark for expected commercial site.

Why do I get a scrollbar on the menubar when I click it (ff 3.0.10)?

Would be more impressive if you could make the section heights in 1st
column same as those in other columns.

 

[dorayme]

This is the preliminary mockup, so only dummy content, no real links, poor
quality jpegs etc.:

http://informationage.co.nz/kingcom/

As expected from you, it is competent and would be quite usable, works
on all my Mac browsers (in case this is useful to you to know).

I sort of assume that in this usenet group one looks at the site as a
user. In this spirit, one thing I do notice is that while it is fluid in
useful respects to text size and window width, it does not take
advantage of the capability of website pages to use space economically.
With this type of commercial pic/caption/link info system, if there is a
fair bit of it, you might consider to allow greater "looseness" so that
the width of a big screen is utilised more, the item boxes allowed to
wrap to take up available horizontal space.

I know, it would mean some redesign! For example, the news box could
afford to be two or more *inner boxes* wide, (reverting to your one
inner box wide at smaller browser widths). Ditto the second and third
columns, products and solutions. Not suggesting that the three cols
should themselves wrap (that might be clever ... but tricky). The whole
show then would need to be loosened in respect to main horiz menu etc.
But I can imagine the same general "look" that you achieve.

 

[Nik Coughlin]

I think it's somewhat arrogant of you to tell me my browser is out of
date.
If I were a prospective customer I would probably just move on to the next
site in my search results.

The message that you saw is the standard disclaimer that I add for IE 6 and
under if the client doesn't want me to spend the extra time that it takes to
make things work properly in that terrible browser

Also, I think it's quite a polite disclaimer:

"You're using an out of date browser (released more than 7 years ago). While
we have taken care to ensure that this page is still usable, you will have a
much better experience with a modern, standards-compliant browser"

You have a severe case of divitus, mixed in with tables for layout.

I'll happily defend each and every one of those divs; they're all there for
a reason, some of them to semantically group related elements and some to
provide various graphical effects that couldn't be done otherwise.

You want graphically rich elastic layouts that scale nicely (try
text-zooming it, changing viewport size etc.), make use of alpha
transparency, round corners, etc. etc., that's what you have to do to ensure
that it works nicely across the board, thanks to the slow uptake of advanced
CSS. Someday perhaps it won't be so, but for now, that's what has to be
done.

I don't add divs lightly, and I've spent a lot of time working on various
techniques to minimize the amount of layout-shim-divs. However, one thing
that I won't do is force semantic elements to arbitrarily double as shims
based on their position in the markup, it makes maintenance a nightmare and
I prefer the consistency in keeping them separate, especially for sites that
are heavily server side generated as this will be.

Sure, I may find techniques in future that allow me to knock the odd div
out, but for the most part they're a necessary evil.

Don't you think saying "tables for layout" is a little disingenuous? I have
*one*, of a few rows, for the login form. It's arguable that it's even a
"layout table".

Thanks for looking but I guess we'll have to agree to disagree. I'm aware of
the issues that you mention but I did things that way for a reason, unless
you have some well considered alternatives rather than just blunt statements
against I'll leave it as it is.

 

[Travis Newbury]

This is the preliminary mockup, so only dummy content, no real links, poor
quality jpegs etc.:
http://informationage.co.nz/kingcom/

At first glance I liked it, but then I switched to IE and you told me
I was an idiot (which may be true, but please don't tell me). It is a
little dark for a business. the blue bar that extends the entire
width of my screen looks dumb. It kind of makes it look like there is
something strange on the page. also the scroll bar that appears in
FF.

I hate the border thing on the images. The ramp (gradient) on the
different color boxes should be the same. That will make your image
look more professional.

 

[Nik Coughlin]

May be a little dark for expected commercial site.

Maybe so. It's in line with their new branding but you have a good point.
I think a good compromise may be that where there is any signifcant amount
of text to be read, I use dark text on a light background. It would be easy
enough to do this without changing the current layout just by having another
class for some of the blue-headered boxes that gives some of them a light
coloured bg and dark text instead of the current light on dark.

Why do I get a scrollbar on the menubar when I click it (ff 3.0.10)?

That would be due to the overflow: auto; used to escape the floated list
items. I hadn't noticed that, thanks.

Would be more impressive if you could make the section heights in 1st
column same as those in other columns.

I agree, but it probably isn't viable given that the leftmost column has
paragraphs of text in it, not to mention form elements which look very
different across different browser/OS combination; it just adds too much
variability. Any suggestions?

 

[Nik Coughlin]

At first glance I liked it, but then I switched to IE and you told me
I was an idiot (which may be true, but please don't tell me).

And I thought that it was such a polite disclaimer! Apparently not.

It is a
little dark for a business.

Perhaps so, in line with their new branding, but as a couple of people have
mentioned that I think any page with a significant amount of content will be
dark text on light background, hopefully will balance. Going to keep this in
mind going forward anyway.

the blue bar that extends the entire
width of my screen looks dumb. It kind of makes it look like there is
something strange on the page.

Something more like this?

http://informationage.co.nz/kingcom/altNavigation.html

I asked a couple of other people, one of them preferred it extended across
and the other preferred the shortened version. So not sure which way to
jump at the moment, I'll let the client pick I think.

also the scroll bar that appears in
FF.

Yeah I'll fix that.

I hate the border thing on the images.

This is the black frame? You're right, I'll try it without it.

The ramp (gradient) on the
different color boxes should be the same. That will make your image
look more professional.

Do you mean the way in which the h3 background is a darker blue than the h2?
Or that there is a gradient on the h2 but not the h3 (it's just a flat
background color)?

 

[Nik Coughlin]

works on all my Mac browsers (in case this is useful to you to know).

I used browsershots and came to the same conclusion, but it's nice to have
that reinforced by someone using a live browser instead of me looking at
screenshots

I sort of assume that in this usenet group one looks at the site as a
user. In this spirit, one thing I do notice is that while it is fluid in
useful respects to text size and window width, it does not take
advantage of the capability of website pages to use space economically.
With this type of commercial pic/caption/link info system, if there is a
fair bit of it, you might consider to allow greater "looseness" so that
the width of a big screen is utilised more, the item boxes allowed to
wrap to take up available horizontal space.

They're keeping it to their top three products and solutions on the home
page, and then the rest on a deeper page showing the whole range. What you
suggest is probably very suitable for the page which shows the range, and
indeed I may try it, depending on how many they need.

The only problem with wrapping in the way that you suggest is that except at
page sizes that are a clean multiple of the item widths you have a lot of
blank space which can look horrible if it's not very carefully taken into
consideration.

I know, it would mean some redesign! For example, the news box could
afford to be two or more *inner boxes* wide, (reverting to your one
inner box wide at smaller browser widths). Ditto the second and third
columns, products and solutions. Not suggesting that the three cols
should themselves wrap (that might be clever ... but tricky). The whole
show then would need to be loosened in respect to main horiz menu etc.
But I can imagine the same general "look" that you achieve.

If there were some way to *snap* the layout elements to multiples of the
item widths as the space became available that would be quite nice. It
could probably be done reasonably easily client side, with the "horrible
looking blank space" of my previous comment as the fallback for those
without JavaScript

An interesting exercise, and could be very cool, but outside of the scope
(and budget!) of this project I'm afraid.

 

[Nik Coughlin]

Something more like this?

http://informationage.co.nz/kingcom/altNavigation.html

I asked a couple of other people, one of them preferred it extended across
and the other preferred the shortened version. So not sure which way to
jump at the moment, I'll let the client pick I think.

Or like this?

http://informationage.co.nz/kingcom/altNavigation2.html

 

[dorayme]

If there were some way to *snap* the layout elements to multiples of the
item widths as the space became available that would be quite nice. It
could probably be done reasonably easily client side, with the "horrible
looking blank space" of my previous comment as the fallback for those
without JavaScript

An interesting exercise, and could be very cool, but outside of the scope
(and budget!) of this project I'm afraid.

The solution might be to centre a block of floats inside their
containers.

<http://tinyurl.com/2jcs5r>

But, as you say, perhaps outside your budget to be attempting to get
this right

 

[Nik Coughlin]

The solution might be to centre a block of floats inside their
containers.

<http://tinyurl.com/2jcs5r>

But, as you say, perhaps outside your budget to be attempting to get
this right

Thar be JavaScript in them thar hills!

Interesting. I suspect could be onto something here, perhaps in conjunction
with this tiling technique:

http://nrkn.com/fluidTiling/

 

[David Segall]

This is the preliminary mockup, so only dummy content, no real links, poor
quality jpegs etc.:

http://informationage.co.nz/kingcom/

HTML validates as 4.01 strict and CSS validates apart from the
vendor-specific properties for rounded corners

TIA!

It is a pet peeve of mine but I think that I should be able to click
on the image or the caption to follow the link. This is especially
true on this page because the captions look like buttons. It follows
that the column headings should be links to the "more...".

If a large proportion of visitors log in I would prefer the log in to
be visible without scrolling.

 

[Andy Dingley]

This is the preliminary mockup, so only dummy content, no real links, poor
quality jpegs etc.:
http://informationage.co.nz/kingcom/

No time to review it in depth, but:

Generally, looks pretty good.

Markup. Looks like how I'd do it internally, which must be right.
<table> for forms is reasonable, even mixed in with floated
<div>s like this.

Id vs. class. I'd convert some of the "top-level" CSS selectors from
using id to using class (with HTML addition) as these are generally
easier to work with than a top-level id hogging the CSS selector
specificity

Dark? Yes. Think I'd do something about that. White text on black is
always a problem, and you could surely lift the overall brightness of
the page with a different canvas background than solid black.

Print-specific CSS. Are you using one for a controllable black on
white layout when printing? If so, then strip the menus off too. Also
any heavy-looking item borders.

Thumbnails resize dynamically (probably a good approach these days),
but I'd be inclined to make the maxiumum sizes bigger. "Typical"
monitors and display boards are pretty big these days, esp.
widescreens.

Few encoding glitches around ampersands and numeric entities. Now
these really worry me - if they're there at all, it suggests you're
not using a really good validator (e.g. Marc Guery's), and that's its
own problem.

 

[Neredbojias]

I agree, but it probably isn't viable given that the leftmost column
has paragraphs of text in it, not to mention form elements which look
very different across different browser/OS combination; it just adds
too much variability. Any suggestions?

Well, if I had a lot of time I might play around with fixed heights,
overflow hidden, position relative, display inline-block, and
bottom-positioning of a "footer" with "more" in it, but you're probably
right: it just wouldn't be worth it.