Website critique

I've just finished the layout and markup of
http://www.fietsennaarlourdes.be/index
Please give me your thoughts, ideas and critique about this website.

Cheers,
Samuel

Samuel van Laere wrote:

I've just finished the layout and markup of
http://www.fietsennaarlourdes.be/index
Please give me your thoughts, ideas and critique about this website.

Make your browser window a bit narrower, say 900 pixels. Admire how the
content overlaps the left hand image. Also note the permanent horizontal
scroll bar.

Google for three column layout but basically, float the left column left,
float the right right and give the middle one margins in pixels the same
size as the images. Get rid of all that absolute positioning.
--
Richard.

Samuel van Laere wrote:

http://www.fietsennaarlourdes.be/index

In your stylesheet:
* {
border: 0 none;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0; <-- very bad for accessibility!
padding: 0;
vertical-align: baseline;
}

This is a poor practice, even though it seems to be favored by
dee-ziners. It means having to explicitly set margin and/or padding on
every element, which only bloats the CSS with unnecessary junk. Many of
these settings are defaults anyway, so it's a waste from the start.
Better to just explicitly set margins and padding on the few elements
that may actually need it, which you'll do whether this rule is there or
not, and let the rest default. It will make the CSS trimmer, thus easier
to maintain.

And if you care about accessiblity, and I assume you do from the
"handicap" and graphic on the home page, remove outline:0. When I tab
through the links, there is no focus outline to show me where I am.


Also:
p {
letter-spacing: 1px;
}

This is strange and impairs readability, IMO. Why do it? My default
sans-serif font is perfectly readable without it.


I don't have any comments on the layout or color scheme, but did notice
the large amount of text on the home page. Can you use shorter
paragraphs or replace some of it with bullet lists, maybe some
additional subheadings or something to break up all that text. It will
improve readability.


--
Berg

Samuel van Laere wrote:

I've just finished the layout and markup of
http://www.fietsennaarlourdes.be/index
Please give me your thoughts, ideas and critique about this website.

HTML and CSS both valid. Well done.

Heh, well, the CSS is valid but has this in it

strong{ font-weight: bold;}

strong {font-weight: normal;}


When my viewport is under about 1184px, one or both of the top photos is
(at least partially) obscured. The horizontal scroll bar at smaller
widths is annoying.

You've got a perpetual vertical scroll bar as well. :-(

Beyond the fact that I don't speak Dutch, the text on the main page is
hard to read. I'd have to be pretty fascinated by your content to wade
through that middle part. I don't think the ellipses help, BTW.

Why is the left image (Tongeren) inset and the right image (Lourdes) outset?

You have something purporting to be a "statcounter" on this page, but
you didn't count my visit. If you want to know how many times your page
was downloaded, check your server logs.

Nobody wants to see how many hits your page has had except you, and if
the number is less than "a certain number", the user may lose interest
or confidence in your page. The "certain number" depends on your site
and the individual user viewing it.

A lot of the above is technical pickiness. I can't assess whether your
site will likely meet your (or your users') needs, since I can't tell
what it's for.

--
John
"Bring your guide dog to Lourdes and stay fit walking around while
you're here"
is my best guess

On 2009-05-06, Bergamot wrote:

Samuel van Laere wrote:

http://www.fietsennaarlourdes.be/index

In your stylesheet:
* {
border: 0 none;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0; <-- very bad for accessibility!
padding: 0;
vertical-align: baseline;
}

This is a poor practice, even though it seems to be favored by
dee-ziners. It means having to explicitly set margin and/or padding on
every element, which only bloats the CSS with unnecessary junk.

Sometimes it's just the opposite: setting "margin: 0; padding: 0;"
leads to a leaner stylesheet. If they are not there, I sometimes
find myself having to constantly change inappropriate defaults.

--
Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Chris F.A. Johnson wrote:

On 2009-05-06, Bergamot wrote:
Samuel van Laere wrote:
http://www.fietsennaarlourdes.be/index
In your stylesheet:
* {
margin: 0;
padding: 0;
}

This is a poor practice, even though it seems to be favored by
dee-ziners. It means having to explicitly set margin and/or padding on
every element, which only bloats the CSS with unnecessary junk.

Sometimes it's just the opposite: setting "margin: 0; padding: 0;"
leads to a leaner stylesheet. If they are not there, I sometimes
find myself having to constantly change inappropriate defaults.

Like what, for example?

--
Berg

On 2009-05-07, Bergamot wrote:

Chris F.A. Johnson wrote:
On 2009-05-06, Bergamot wrote:
Samuel van Laere wrote:
http://www.fietsennaarlourdes.be/index
In your stylesheet:
* {
margin: 0;
padding: 0;
}

This is a poor practice, even though it seems to be favored by
dee-ziners. It means having to explicitly set margin and/or padding on
every element, which only bloats the CSS with unnecessary junk.

Sometimes it's just the opposite: setting "margin: 0; padding: 0;"
leads to a leaner stylesheet. If they are not there, I sometimes
find myself having to constantly change inappropriate defaults.

Like what, for example?

Any element that has a default margin or padding, e.g., <p>, <h1>.
<h2>, etc....

--
Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Chris F.A. Johnson wrote:

On 2009-05-07, Bergamot wrote:
Chris F.A. Johnson wrote:
On 2009-05-06, Bergamot wrote:
Samuel van Laere wrote:
http://www.fietsennaarlourdes.be/index
In your stylesheet:
* {
margin: 0;
padding: 0;
}

This is a poor practice, even though it seems to be favored by
dee-ziners. It means having to explicitly set margin and/or padding on
every element, which only bloats the CSS with unnecessary junk.
Sometimes it's just the opposite: setting "margin: 0; padding: 0;"
leads to a leaner stylesheet. If they are not there, I sometimes
find myself having to constantly change inappropriate defaults.
Like what, for example?

Any element that has a default margin or padding, e.g., <p>, <h1>.
h2>, etc....

So, you set everything to margin:0; padding:0; then leave it that way?
Sounds like an unreadable blob of text to me.

However, if you then go and set new margin/padding values on all these
elements, then I see no advantage to setting them to 0 up front. The new
values would apply whether you reset them first or not.

What is the benefit of:
* {margin: 0}
p {margin-bottom: 1em}

Over just:
p {margin: 0 0 1em 0}

The latter is actually leaner plus it doesn't leave anything regarding
standard paragraph margins to the imagination. Or is there another
factor that you haven't mentioned?

--
Berg

On Wed, 06 May 2009 15:46:59 +0200, Samuel van Laere wrote:

I've just finished the layout and markup of
http://www.fietsennaarlourdes.be/index
Please give me your thoughts, ideas and critique about this website.

Cheers,
Samuel

Hi Samuel,

As others have suggested, you might want to look at a good 3 -column
layout. This one is popular and I have used it before:

http://matthewjamestaylor.com/blog/perfect-3-column.htm

My dutch isn't great, but I gather you are on a pilgrimage, which is also
a fundraiser for a seeing-eye dog organization.

I think a map would be nice on the Parcours page.

You might look at integrating a CMS like wordpress for the dagboek.

Actually, now that I think about it, perhaps you may be happier without a
3-column layout anyways. Just put the pictures into the body. Unless you
are going to add something in those columns later.

I might jazz up the sponsors page a bit - try to sell more on the "goede
doel" aspect instead of just getting a link on the page.

Also, having the site available in French (and even English) would
probably increase the number of potential sponsors/visitors.

In article <76j6hsF1dbuolU1 (AT) mid (DOT) individual.net>,
Bergamot <bergamot (AT) visi (DOT) com> wrote:

Chris F.A. Johnson wrote:
On 2009-05-07, Bergamot wrote:
Chris F.A. Johnson wrote:
On 2009-05-06, Bergamot wrote:
Samuel van Laere wrote:
http://www.fietsennaarlourdes.be/index
In your stylesheet:
* {
margin: 0;
padding: 0;
}

This is a poor practice, even though it seems to be favored by
dee-ziners. It means having to explicitly set margin and/or padding on
every element, which only bloats the CSS with unnecessary junk.

No, it does not necessarily mean this at all. The website maker might
just put in the margins and paddings that he wants more than zero for
just those elements he employs. It does not follow that there are a
gazillion of these, maybe there are only a few.

Sometimes it's just the opposite: setting "margin: 0; padding: 0;"
leads to a leaner stylesheet. If they are not there, I sometimes
find myself having to constantly change inappropriate defaults.
Like what, for example?

Any element that has a default margin or padding, e.g., <p>, <h1>.
h2>, etc....

So, you set everything to margin:0; padding:0; then leave it that way?
Sounds like an unreadable blob of text to me.

However, if you then go and set new margin/padding values on all these
elements, then I see no advantage to setting them to 0 up front. ...

That depends on the website and the author, sometimes some people find
it easier to get stuck into a job knowing all the margins and paddings
are zeroed and not lurking places to bite them in some complicated or
new layout they are trying out.

For my part, I use this only for temporary diagnostic purposes but I can
easily imagine others might find a more permanent use for it in some
limited circumstances. Or in all circumstances I suppose where they have
their own and therefore well known and understood "full" alternative to
the big defaults of the different browsers.

This latter might even help to maintain a greater level of consistency
across browsers. Who knows what margins and paddings different browsers
set to *all* the elements?

--
dorayme