[OSM-talk] Front page design

[Andrew Findlay]

On Tue, Sep 19, 2006 at 03:11:08PM +0100, Andy Robinson wrote:

> The overall colour is a bit drab... all being grey. But it may look very
> different with good images.

The advantage of gray is that you can put any images on it without
creating a horrible clash...

> The three boxes look too wide on a wide screen. May want to limit the
> maximum width that the whole page takes to keep the proportions from getting
> out of hand.

I tested from about 600px wide up to 1400px (the limit of my screen).
I would say that the boxes look fine for anything in the range
800-1400, and probably OK wider. The main reason for limiting width
is to make full-width text easier to read: having three boxes
immediately solves the problem for most people, just like having
multi-column text in a newspaper. A bigger problem could be the text
in the full-width boxes top and bottom, so it would be important to
keep the amount of text there to a minimum - perhaps limit to no more
than one line of 12pt text when the window is 1000px wide.

> It’s a great start.

Agreed. Good use of CSS to cope with a range of font sizes and window
sizes. Simple appearance with the most important jumping-off points
clearly shown.

I would suggest making the magnifying-glass image a link back to the
home page if this layout is used on any other pages. I would also
suggest making the images clickable, linking to the most obvious
destination referred to in that box.

I did find one bug in the round-box setup: if the user selects a very
large font then the round corners look very odd. Just press ctrl-+ in
Firefox or Konqueror a few times to see what I mean. Same with very
small font sizes. The use of a bullet to form the corners is clever,
but I suspect a small image would produce a more robust result: a
single image with a transparent background would probably be enough
if you can work around the IE bugs associated with transparency. (If
saving in PNG format, try not setting the background colour for
transparent pixels - this is an option in Gimp and probably other
drawing packages).

There are some XHTML errors to be fixed for maximum portability:

http://validator.w3.org/check?uri=http%3A%2F%2Fdyoh.com%2Fosm-draft-index.html

CSS is structurally OK, but the validator has some suggestions there
too:

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fdyoh.com%2Fosm-draft-index.html&usermedium=all

Andrew
-- 
-----------------------------------------------------------------------
|                 From Andrew Findlay, Skills 1st Ltd                 |
| Consultant in large-scale systems, networks, and directory services |
|     http://www.skills-1st.co.uk/                +44 1628 782565     |
-----------------------------------------------------------------------