Critique and Suggestions please

Hi All,

A long time ago someone helped design a website for HSNSG with me and now I
decided it was time for me to take the plunge and make it strict with CSS
etc.

www.hsnsg.org.uk

I am now a professional web designer. I am a java programmer by trade so
please be gentle although I am open to suggestions etc.

A few errors I already know about but not sure what to do.

http://www.hsnsg.org.uk/meetus.shtml
Appears OK in Mozilla Firefox with the pictures to the side and text on the
other side but doesn't display correctly in IE.

http://www.hsnsg.org.uk/links.shtml
http://www.hsnsg.org.uk/linksparents.shtml
I'm not happy with the way the links pages look but am not sure how to
change this about. It currently doesn't validate. Complains about using
same ID for <div> many times. How can I get a similar effect working
correctly. Maybe putting a dashed lines around each box will help?

http://www.hsnsg.org.uk/dvd.shtml
I want a secure safe way to submit details through the form. Any
suggestions?

http://www.hsnsg.org.uk/photos.shtml
Doesn't validate due to me using JavaScript to open and resize a new window.
Any better ways to do this? I have removed a lot of the code and validated
it as much as I can for one of the photo gallery pages
(http://www.hsnsg.org.uk/photos/plays...2/photos.shtml) but haven't
bothered with the others yet until I decide what I'm doing with this
section.

Thanks in advance everyone :-)

Jamie

http://www.hsnsg.org.uk/links.shtml
http://www.hsnsg.org.uk/linksparents.shtml
I'm not happy with the way the links pages look but am not sure how to
change this about. It currently doesn't validate. Complains about using
same ID for <div> many times. How can I get a similar effect working
correctly. Maybe putting a dashed lines around each box will help?

I have fixed part fo this by using div class instead of div id. I am still
not 100% happy with the way it looks so any suggestions please.

"Jamie Allison" <jamie (AT) jamieallison (DOT) co.uk> wrote:

www.hsnsg.org.uk

Comments on home page only.

Good bits:

It looks nice, colours are good, flexible design.

Bad bits:

XHTML in any flavour served as text/html is silly:
http://www.spartanicus.utvinternet.ie/no-xhtml.htm

Serving XHTML 1.1 as text/html violates W3C guidelines, the exemption
that XHTML that follows Appendix C guidelines may be served as text/html
only applies to XHTML 1.0.

"This site will look much better in a browser that supports web standards, but it is accessible to any browser or Internet device."

Anyone accessing your site using a non CSS capable browser is doing so
deliberately and knowingly, ergo there is no need for the lecture. Note
also that I saw that message whilst using a browser "that supports web
standards", vague and undefined as that term is in the first place.

Besides, accessing the site sans CSS should only result in a loss of
decoration, it should work regardless.

Your alt content is wrong, decorative images such as the sun, 3 children
and picture of the centre are all decorative and should have empty alt
content (alt=""), the "logo" suffix on the HSNSG should be removed, on
the home page that image should be the <h1> content, the arrow image is
again decorative.

Placing "Welcome" on a home page is amateurish, implied and patronising.

"Our aims are:" should be shortened to "Our aims" and marked up as a
level 2 header.

Links to the same page should be avoided.

Using the full url for link href attributes needlessly increases the
size of the document.

The footer content doesn't belong under the "Our aims" header, it should
be disassociated from it.

CSS:

IE4 and NS4 are nigh irrelevant, it is a waste of time testing in these
browsers and coding workarounds. Using @import to import all the
stylesheets hides the CSS from these browsers which makes the site
perfectly usable, that's plenty.

--
Spartanicus

Comments on home page only.

Good bits:

It looks nice, colours are good, flexible design.

Glad you think so :-)

Bad bits:

XHTML in any flavour served as text/html is silly:
http://www.spartanicus.utvinternet.ie/no-xhtml.htm

Serving XHTML 1.1 as text/html violates W3C guidelines, the exemption
that XHTML that follows Appendix C guidelines may be served as text/html
only applies to XHTML 1.0.

I'll have a good old read over that.

"This site will look much better in a browser that supports web standards,
but it is accessible to any browser or Internet device."

Would you suggest i just removed the <div id="oldbrowser"> section?

Anyone accessing your site using a non CSS capable browser is doing so
deliberately and knowingly, ergo there is no need for the lecture. Note
also that I saw that message whilst using a browser "that supports web
standards", vague and undefined as that term is in the first place.

Besides, accessing the site sans CSS should only result in a loss of
decoration, it should work regardless.

Would removing <div id="oldbrowser"> sort this?

Your alt content is wrong, decorative images such as the sun, 3 children
and picture of the centre are all decorative and should have empty alt
content (alt=""), the "logo" suffix on the HSNSG should be removed, on
the home page that image should be the <h1> content, the arrow image is
again decorative.

What is the reason for putting blank alt tags?

Placing "Welcome" on a home page is amateurish, implied and patronising.

Changed

"Our aims are:" should be shortened to "Our aims" and marked up as a
level 2 header.

Changed

Links to the same page should be avoided.

Using the full url for link href attributes needlessly increases the
size of the document.

I us Server Side includes to include the same navigation panel on every
page. A lot of pages are in different directories etc so this is why i have
had to put the full URLs in, unless there is some other way to get around
this.

The footer content doesn't belong under the "Our aims" header, it should
be disassociated from it.

You think i should move the footer downover and put some of the background
green between it and the main content? Is the HR not enough?

CSS:

IE4 and NS4 are nigh irrelevant, it is a waste of time testing in these
browsers and coding workarounds. Using @import to import all the
stylesheets hides the CSS from these browsers which makes the site
perfectly usable, that's plenty.

Thanks.

--
Spartanicus

Jamie

Jamie Allison wrote:

Links to the same page should be avoided.

Using the full url for link href attributes needlessly increases the
size of the document.

I us Server Side includes to include the same navigation panel on every
page. A lot of pages are in different directories etc so this is why i have
had to put the full URLs in, unless there is some other way to get around
this.

Remove the "http://www.hsnsg.org.uk" part. Start the link with "/", the

document root. For example:

http://www.hsnsg.org.uk/index.shtml ==> /index.shtml

This has the advantage that you can maintain a local copy of the site
without changing a thing.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

"Jim Moe" <jmm-list.AXSPAMGN (AT) sohnen-moe (DOT) com> wrote

Jamie Allison wrote:

Links to the same page should be avoided.

Using the full url for link href attributes needlessly increases the
size of the document.

I us Server Side includes to include the same navigation panel on every
page. A lot of pages are in different directories etc so this is why i
have
had to put the full URLs in, unless there is some other way to get around
this.

Remove the "http://www.hsnsg.org.uk" part. Start the link with "/", the
document root. For example:

http://www.hsnsg.org.uk/index.shtml ==> /index.shtml

Thanks, done now.

This has the advantage that you can maintain a local copy of the site
without changing a thing.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

"Jamie Allison" <jamie (AT) jamieallison (DOT) co.uk> wrote

Hi All,

A long time ago someone helped design a website for HSNSG with me and now
I decided it was time for me to take the plunge and make it strict with
CSS etc.

www.hsnsg.org.uk

I am now a professional web designer. I am a java programmer by trade so
please be gentle although I am open to suggestions etc.

meant to say i am NOT a web designer.... lol

A few errors I already know about but not sure what to do.

http://www.hsnsg.org.uk/meetus.shtml
Appears OK in Mozilla Firefox with the pictures to the side and text on
the other side but doesn't display correctly in IE.

http://www.hsnsg.org.uk/links.shtml
http://www.hsnsg.org.uk/linksparents.shtml
I'm not happy with the way the links pages look but am not sure how to
change this about. It currently doesn't validate. Complains about using
same ID for <div> many times. How can I get a similar effect working
correctly. Maybe putting a dashed lines around each box will help?

http://www.hsnsg.org.uk/dvd.shtml
I want a secure safe way to submit details through the form. Any
suggestions?

http://www.hsnsg.org.uk/photos.shtml
Doesn't validate due to me using JavaScript to open and resize a new
window. Any better ways to do this? I have removed a lot of the code and
validated it as much as I can for one of the photo gallery pages
(http://www.hsnsg.org.uk/photos/plays...2/photos.shtml) but
haven't bothered with the others yet until I decide what I'm doing with
this section.

Thanks in advance everyone :-)

Jamie

Jamie Allison wrote:

http://www.hsnsg.org.uk/meetus.shtml
Appears OK in Mozilla Firefox with the pictures to the side and text
on the other side but doesn't display correctly in IE.

Does not work in Firefox (1.5.0.5) for me. The ladies' images flash for
a very short instant, then disappear.

Suggestions:
1. place the images in a <span> and float the span. Start the span after
a couple of lines of the text, and within the paragraph.
Example at this page of mine:
http://countryrode.com/service/service.php

Notice there are no <table>s on the page.

2. drop the justified text; it is harder to read than normal
ragged-right text.

--
-bts
-Warning: I brake for lawn deer

"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote

Jamie Allison wrote:

http://www.hsnsg.org.uk/meetus.shtml
Appears OK in Mozilla Firefox with the pictures to the side and text
on the other side but doesn't display correctly in IE.

Does not work in Firefox (1.5.0.5) for me. The ladies' images flash for
a very short instant, then disappear.

hmm, strange cause it worked for me although i did havea table which i have
now removed.

Suggestions:
1. place the images in a <span> and float the span. Start the span after
a couple of lines of the text, and within the paragraph.
Example at this page of mine:
http://countryrode.com/service/service.php

Notice there are no <table>s on the page.

I've took a look at your code and done mine the same with

<h2>Person Name</h2>
<p>
<span class="imgright>
<img>
</span>

some text here
</p>

My problem now is that when i do another one of these below but with imgleft
instead of imgright the text title from the bottom one ends up to the side
of the top picture.

I would like to have:

---------------------------------------
one image left and writting right
---------------------------------------
blank line
---------------------------------------
one image right and writting left
---------------------------------------
blank line
---------------------------------------
one image left and writting right
---------------------------------------
blank line
---------------------------------------
one image right and writting left
---------------------------------------

Any ideas what i am doing wrong here?

2. drop the justified text; it is harder to read than normal
ragged-right text.

--
-bts
-Warning: I brake for lawn deer

Jamie Allison wrote:

"Beauregard T. Shagnasty" <a.nony.mous (AT) example (DOT) invalid> wrote in message
news:Nmqyg.492349$Fs1.4878 (AT) bgtnsc05-news (DOT) ops.worldnet.att.net...
Suggestions:
1. place the images in a <span> and float the span. Start the span after
a couple of lines of the text, and within the paragraph.
Example at this page of mine:
http://countryrode.com/service/service.php

Notice there are no <table>s on the page.

I've took a look at your code and done mine the same with

h2>Person Name</h2
p
span class="imgright
img
/span

some text here
/p

My problem now is that when i do another one of these below but with imgleft
instead of imgright the text title from the bottom one ends up to the side
of the top picture.

I would like to have:
....
Any ideas what i am doing wrong here?

Looks as if you missed the: class="clear"
on the heading elements.

..clear {
clear: both;
}

--
-bts
-Warning: I brake for lawn deer