Site Crit: http://www.tambourinewebdesign.com/web

Hi all,

This is my first CSS designed website.

Tell me what you think!

Regards,
Stephen O'Brien

"Stephen O'Brien" <stephenob (AT) iol (DOT) ie> wrote

Hi all,

This is my first CSS designed website.

Judging by the look of things, you overcharge for your services.

-Karl

On 7 May 2004 14:33:27 -0700, Stephen O'Brien <stephenob (AT) iol (DOT) ie> wrote:

Hi all,

This is my first CSS designed website.

Tell me what you think!

Regards,
Stephen O'Brien

http://www.tambourinewebdesign.com/web yields this content:

PATH_INFO not set

So I go to http://www.tambourinewebdesign.com/ and find the page.
^%^$!#$#!$^

An Irish company with lots of orange in the design, that's really odd.

CSS:

BODY {margin-left:0; margin-right:0; margin-top:0;}

You know you can use margin: 0 to set all margins to 0, right?

TABLE {font size:10pt; font-family: tahoma, arial, helvetica, sans-serif}

Never ever set screen fonts in pt. Use % or ems. Best advice - set in body
selector font-size: 100%; and use % (or em) for all other font sizes.

BODY {font size:10pt; font-family: tahoma, arial, helvetica, sans-serif}

Put the above properties in the above body definition.

A {color: 000000; font-size:10pt;}
A.use {color: FFFFFF; text-decoration: none; font-size: 12pt}
A:Hover {color: 0000FF; font-size:10pt;}
A:Hover.use { color: 000000; text-decoration: none; font-size: 12pt;}

These styles, ignoring the pt, aren't too bad. But the name "use" - how
does this apply to what you're styling? Choose class and ID names which
reflect the function of what is being styled.

FONT.use {font-size: 12pt; color: 000000}
FONT.use1 {font size:10pt; font-family: tahoma, arial, helvetica,
sans-serif}

Ok.

Why in the world are you using FONT tags in a CSS layout document? Get rid
of these. Now.

You want to use paragraph markup for paragraphs. <p>sjdjdjdjd</p>. Apply
the styles for paragraphs to p tags.

You have no <h1> on your page. I recommend one. Change your ALT for the
header image to match the actual text, and put it between <h1> and </h1>,
that would work well. Non-graphic browsers will format the ALT as a
heading.

I advise eliminating all markup which affects presentation (font, br, b,
i, big, small, whatever) and instead using markup which reflects the
MEANING of the text. Is it a heading? A Paragraph? Use that markup.

Your layout table is senseless. No need to use a table to lay out this
material. DIVs with styled borders would be much cleaner and less
cluttersome.

Where a table should actually be used is on
http://www.tambourinewebdesign.com/services.html - where you list the 3
plans and their features. This is a real table. 3 columns, 2 rows (one for
the name of the plan, one for the details).

The overall look is bland but OK. I absolutely hate the links being
smaller than the text. It's hard to read.

Overall - assuming you're just learning what you're doing, it's an OK
start. Study semantic HTML markup and the CSS box model.

Assuming you're a student learning HTML, two things. One, you're nowhere
near ready to sell your services at any price; two, ask your web design
teacher for your money back. I'm dead serious.

"Stephen O'Brien" <stephenob (AT) iol (DOT) ie> wrote

Hi all,

This is my first CSS designed website.

Tell me what you think!

being honest, i think its terrible...
--
Hung Diep
http://www.intro-spect.co.uk

Sorry all, I meant www.tambourinewebdesign.com/web/ not /web.

When you looked at tambourinewebdesign.com before it was the old
version. I was testing it at www.tambourinewebdesign.com/web/ then.
Please look at http://www.tambourinewebdesign.com/.

PS The reason PATH_INFO NOT SET appeared was because I forgot the /
after web (its a perl srcipt which feeds a template from a database.

Go easy! We're only students.

In message <58a37fec.0405080156.58ddde28 (AT) posting (DOT) google.com>, Stephen
O'Brien <stephenob (AT) iol (DOT) ie> writes
[snip]

Please look at http://www.tambourinewebdesign.com/.

[snip]

Go easy! We're only students.

Nope; you want to do this as a business don't you?

Anyway. Some initial thoughts.

The good things
-------------------
(a) The text can be resized in MSIE

(b) The design is flexible and allows the browser window to be reduced
without losing details.

(c) Uses headers in the mark-up.

It's a fairly simple, but quite attractive site which also looks and
sounds OK in non-graphical browsers.

NB. This site should be your 'showcase', showing your full design
capabilities -- so you may want to consider this aspect.

However
-----------

(a) You need to go through the entire site and fix the spelling and
grammar errors. Nothing makes a site look less-than-professional than
those kind of errors in the text.

Also, get somebody else to check the wording in the text, which can do
with some improvement .....

(b) Don't use .8em for the body text. My browser is set up so that I
expect to see the text at 100% of my settings, as will other users.

So: font-size : 100%;

(Tahoma is a large font, so if the user hasn't got it installed
(unlikely on Windows machines since Win95), Arial at .8em is going to
look very small indeed.)

(c) I don't see the point of making me scroll the centre portion of the
screen when I would expect to scroll the *page* if I need to.

(d) It would be nice to have seen an 'invisible link' at the start of
the page allowing assistive technology (screen-readers, talking
browsers, etc.) users the ability to bypass the menu and go directly to
the page content.

(e) The sites in your current portfolio exhibit various accessibility
problems, and you should aim to replace them with other sites as soon as
you can -- unless you want to put in some extra time and bring them up
to standard ;-)

(f) There's a small problem with the vertical spacing on the main
heading:
http://www.gododdin.demon.co.uk/ng/TAM1X.JPG
(unless it's meant to be that way)

Just a few initial thoughts.

regards.

--
Jake

On 8 May 2004 02:56:05 -0700, Stephen O'Brien <stephenob (AT) iol (DOT) ie> wrote:

Sorry all, I meant www.tambourinewebdesign.com/web/ not /web.

When you looked at tambourinewebdesign.com before it was the old
version. I was testing it at www.tambourinewebdesign.com/web/ then.
Please look at http://www.tambourinewebdesign.com/.

PS The reason PATH_INFO NOT SET appeared was because I forgot the /
after web (its a perl srcipt which feeds a template from a database.

Go easy! We're only students.

Seriously - it's worse than the original in two ways.

1) Home links to the home page. Why do that? NEVER have a link to the
current location, it's only going to confuse. Keep it in the list, just
remove the anchor tags.

2) Scrolling within the page - why?? It's senseless. I scroll down the
page with my scrollwheel, but this disables this. I have to actually go to
the scrollbar. That inconsideration will alienate visitors.

One thing that is improved is the appearance of links and the elimination
(thank you) of table layout. So much nicer. Now, adding in the two major
usability issues above kind of negates that.

Using font-size: 100% in the body will save you a lot of headache. Let the
text be a bit larger for the oldsters out there, please.

Have some sort of different style for visited links so users can know
where they have and haven't visited.

Stuff like "margin-bottom: 0em; margin-top: 0em; margin-left: 0em;
margin-right: 0em;" can be summed up as "margin: 0;" quite nicely. Same
with "border: solid 2px; border-color: rgb(000,000,000);" and the better
"border 2px solid black;". (Not sure why you use this long form of color
designation - #ff0080 type stuff is more compact.)

Please do fix the styles on that lower div. I have to scroll down anyhow,
why not allow me to see all the content as I do?

Go easy! We're only students.

Nope; you want to do this as a business don't you?

Good point

(a) You need to go through the entire site and fix the spelling and
grammar errors. Nothing makes a site look less-than-professional than
those kind of errors in the text.
Also, get somebody else to check the wording in the text, which can do
with some improvement .....
Will do, thanks.

(b) Don't use .8em for the body text. My browser is set up so that I
expect to see the text at 100% of my settings, as will other users.

So: font-size : 100%;

(Tahoma is a large font, so if the user hasn't got it installed
(unlikely on Windows machines since Win95), Arial at .8em is going to
look very small indeed.)

I will replace it with arial, at 100%, because tahoma is rather ugly
above .8em

(c) I don't see the point of making me scroll the centre portion of the
screen when I would expect to scroll the *page* if I need to.
Again, this will be done!

(d) It would be nice to have seen an 'invisible link' at the start of
the page allowing assistive technology (screen-readers, talking
browsers, etc.) users the ability to bypass the menu and go directly to
the page content.
I'm not entirely sure how to do this.

(e) The sites in your current portfolio exhibit various accessibility
problems, and you should aim to replace them with other sites as soon as
you can -- unless you want to put in some extra time and bring them up
to standard ;-)
Well a few newer sites are nearing completion, and considering the low

budgets of those first 3 websites (€150) , I don't think I will!

(f) There's a small problem with the vertical spacing on the main heading.
Hmmm... I'll check it up.

Many thanks for the concise notes,
Stephen

Neal <neal413 (AT) yahoo (DOT) com> wrote

On 8 May 2004 02:56:05 -0700, Stephen O'Brien <stephenob (AT) iol (DOT) ie> wrote:

Sorry all, I meant www.tambourinewebdesign.com/web/ not /web.

When you looked at tambourinewebdesign.com before it was the old
version. I was testing it at www.tambourinewebdesign.com/web/ then.
Please look at http://www.tambourinewebdesign.com/.

PS The reason PATH_INFO NOT SET appeared was because I forgot the /
after web (its a perl srcipt which feeds a template from a database.

Go easy! We're only students.


Seriously - it's worse than the original in two ways.

1) Home links to the home page. Why do that? NEVER have a link to the
current location, it's only going to confuse. Keep it in the list, just
remove the anchor tags.

2) Scrolling within the page - why?? It's senseless. I scroll down the
page with my scrollwheel, but this disables this. I have to actually go to
the scrollbar. That inconsideration will alienate visitors.

One thing that is improved is the appearance of links and the elimination
(thank you) of table layout. So much nicer. Now, adding in the two major
usability issues above kind of negates that.

Using font-size: 100% in the body will save you a lot of headache. Let the
text be a bit larger for the oldsters out there, please.

Have some sort of different style for visited links so users can know
where they have and haven't visited.

Stuff like "margin-bottom: 0em; margin-top: 0em; margin-left: 0em;
margin-right: 0em;" can be summed up as "margin: 0;" quite nicely. Same
with "border: solid 2px; border-color: rgb(000,000,000);" and the better
"border 2px solid black;". (Not sure why you use this long form of color
designation - #ff0080 type stuff is more compact.)

Please do fix the styles on that lower div. I have to scroll down anyhow,
why not allow me to see all the content as I do?

Ok. Thanks for the excellent crit, will make those changes.

With appreciation,
Stephen

In message <58a37fec.0405080906.29bc5b9b (AT) posting (DOT) google.com>, Stephen
O'Brien <stephenob (AT) iol (DOT) ie> writes
[snip]

(b) Don't use .8em for the body text. My browser is set up so that I
expect to see the text at 100% of my settings, as will other users.

So: font-size : 100%;

(Tahoma is a large font, so if the user hasn't got it installed
(unlikely on Windows machines since Win95), Arial at .8em is going to
look very small indeed.)

I will replace it with arial, at 100%, because tahoma is rather ugly
above .8em

Sounds OK

(c) I don't see the point of making me scroll the centre portion of the
screen when I would expect to scroll the *page* if I need to.
Again, this will be done!

Yes, I see you've already done this.

(d) It would be nice to have seen an 'invisible link' at the start of
the page allowing assistive technology (screen-readers, talking
browsers, etc.) users the ability to bypass the menu and go directly to
the page content.
I'm not entirely sure how to do this.

There are a number of ways of doing this. The most common is to use a
1-pixel .gif image as a link.
The image is too small to be seen in a graphics browser, but the
alternative text in the <img> i.e. ALT='Skip to main content' will be
spoken by the reader/talking browser, etc.

I hope this is clear; let me know if you need a code example.

[skip]

--
Jake