Critique please, site layout for vehicle communication company

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!

Nik Coughlin wrote:

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.

--
Richard.

On 08 Jun 2009, "Nik Coughlin" <nrkn.com (AT) gmail (DOT) com> wrote:

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.

--
Neredbojias
http://www.neredbojias.org/
http://www.neredbojias.net/

In article <h0k7k6$6uc$1 (AT) news (DOT) eternal-september.org>,
"Nik Coughlin" <nrkn.com (AT) gmail (DOT) com> wrote:

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.

--
dorayme

"rf" <rf@z.invalid> wrote

Nik Coughlin wrote:
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.

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.

On Jun 8, 7:42*pm, "Nik Coughlin" <nrkn.... (AT) gmail (DOT) com> wrote:

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.

"Neredbojias" <neredbojias (AT) gmail (DOT) com> wrote

On 08 Jun 2009, "Nik Coughlin" <nrkn.com (AT) gmail (DOT) com> wrote:

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

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?

"Travis Newbury" <travisnewbury (AT) gmail (DOT) com> wrote

On Jun 8, 7:42 pm, "Nik Coughlin" <nrkn.... (AT) gmail (DOT) com> wrote:
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).

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)?

"dorayme" <doraymeRidThis (AT) optusnet (DOT) com.au> wrote

In article <h0k7k6$6uc$1 (AT) news (DOT) eternal-september.org>,
"Nik Coughlin" <nrkn.com (AT) gmail (DOT) com> wrote:

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

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


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" <nrkn.com (AT) gmail (DOT) com> wrote

"Travis Newbury" <travisnewbury (AT) gmail (DOT) com> wrote in message
news:b9194384-b71e-4f12-87a9-2651634929f2 (AT) m19g2000yqk (DOT) googlegroups.com...
On Jun 8, 7:42 pm, "Nik Coughlin" <nrkn.... (AT) gmail (DOT) com> wrote:
This is the preliminary mockup, so only dummy content, no real links,
poor
quality jpegs etc.:
http://informationage.co.nz/kingcom/

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.

Or like this?

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