Click to See Complete Forum and Search --> : Webnauts Net redesign need a site review to improve
Webnauts
01-02-2005, 07:51 PM
My web site redesign is completed, and I need a review for the following issues:
1. XHTML and CSS MarkUp
2. OS and Browsers compatibility
3. Accessibility
4. Navigation
5. Usability
6. Discoverability (SEO)
7. Credibility
URL: http://www.webnauts.net/
Thanks in advance for your warmly appreciated kind support.
Jupac
01-02-2005, 08:19 PM
Very nice i like it ^^
Webnauts
01-03-2005, 06:26 PM
Thanks Lakers01.
Anyone else some comments/suggestions/critiques please?
Ben Rogers
01-03-2005, 07:35 PM
You should identify the image header with a top level header tag
<div>Seminars in:</div> ? Isn't this supposed to be a header?
Navigation should come in the markup after the content... come on now, absolute positioning doesn't bite. ;)
<br />
<span class="footerLHSRB">© 2001-2005, Webnauts Net Worldwide - All rights reserved.</span>
<br />
<span class="footerLHS">- Designing with Accessibility and Usability in Mind -</span>
<br />
<span class="footerLHS">Last modified: Jan 03, 2005</span> That just seemes messy to me. Why not just use 3 divs? Also, classitis.
<br /></div>Er... padding-bottom, anyone?
I don't know what to do to it, but the left sidebar isn't immediately recognizable as navigation.
On the left navigation, you should set the a elements to display: block, to obey Fitt's law.
Your <title>s are a tad long; googlebombed.
Consider uncrufting your URLs.
It's a nice design, and the markup is, for the most part, clean. Just a few things that need a little patching up. ;)
PeOfEo
01-03-2005, 08:43 PM
Well it is passing all of the major accessibility tests and it is very easy to navigate on lynx.
Also, how come your logo is in an anchor tag? That seems to be pointless. I really can't think of any reason why you would need that.
Also,
<dt><a id="section" href="http://www.section508.gov" title="Web site of the US Section 508 of the Rehabilitation Act"><img class="left" src="images/section_508.gif" alt="Emblem of Section 508" width="57" height="57" /></a>Section 508 of the Rehabilitation Act</dt>
It seems like you would also want to use a header tag with this.
Other then that, all I can say is that you did not indent and that makes it easier to read ;)
Also, Ben, I think divs in this situation would just add clutter. The <br/> element is not to be used for position between block level elements, but it is find for creating a line break between inline elements.
edit: AND PURPLE AND ORANGE ARE NOT MY FAVORITE COLORS... GRRRR.
Also, I have a very small horizontal scroll bar on my browser (at all window sizes/resolutions). I am on firefox.
Ben Rogers
01-03-2005, 08:48 PM
Originally posted by PeOfEo
Also, Ben, I think divs in this situation would just add clutter. The <br/> element is not to be used for position between block level elements, but it is find for creating a line break between inline elements. I'm saying use it to remove clutter - he's dividing them up, ne?So <div class="footerLHSRB">© 2001-2005, Webnauts Net Worldwide - All rights reserved.</div>
<div>- Designing with Accessibility and Usability in Mind -</div>
<div>Last modified: Jan 03, 2005</div> instead of <br />
<span class="footerLHSRB">© 2001-2005, Webnauts Net Worldwide - All rights reserved.</span>
<br />
<span class="footerLHS">- Designing with Accessibility and Usability in Mind -</span>
<br />
<span class="footerLHS">Last modified: Jan 03, 2005</span>
PeOfEo
01-03-2005, 08:51 PM
Originally posted by Ben R.
I'm saying use it to remove clutter - he's dividing them up, ne?So <div class="footerLHSRB">© 2001-2005, Webnauts Net Worldwide - All rights reserved.</div>
<div>- Designing with Accessibility and Usability in Mind -</div>
<div>Last modified: Jan 03, 2005</div> instead of <br />
<span class="footerLHSRB">© 2001-2005, Webnauts Net Worldwide - All rights reserved.</span>
<br />
<span class="footerLHS">- Designing with Accessibility and Usability in Mind -</span>
<br />
<span class="footerLHS">Last modified: Jan 03, 2005</span> But the second is more semantically correct. Why would you want extra block level elements floating around that you might still have to style to get on separate lines?
Webnauts
01-03-2005, 09:00 PM
Ben thanks for you kind suggestions. Please go on...
:)
I appreciate more, honest and hard critiques.
I am already tweaking the footer and I am reducing my title length for Google.com, even if I had positions today:
usability consulting pos. 7
web usability consulting pos. 3
web usability consultant pos. 10
accessibility consulting pos. 65
And its improving incredibly everyday.
Originally posted by Ben R.
[B][list] You should identify the image header with a top level header tag
<div>Seminars in:</div> ? Isn't this supposed to be a header?
Navigation should come in the markup after the content... come on now, absolute positioning doesn't bite. ;)
Navigation is preferred after the markup but skip links are a viable alternative when the design doesn't afford absolute positioning. If I absolutely place my nav, then it will be removed from the flow and I won't be able to keep anything below it.
Something else?
Neczy
01-03-2005, 09:11 PM
Originally posted by Webnauts
Navigation is preferred after the markup but skip links are a viable alternative when the design doesn't afford absolute positioning. If I absolutely place my nav, then it will be removed from the flow and I won't be able to keep anything below it.
Perhaps I am misinterperting what you are saying, but you don't need to absolutely position anything to get the navigation to be below the content. A simple float will suffice.
Ben Rogers
01-03-2005, 09:13 PM
Webnauts - Well, I know what you mean, but using them once in a title, and then in headers and links should work just as well- if it really helps that much, it's only my personal preference to have clear, concise titles- I can't think from the mind of a client. The navigation thing is another personal pet peeve... but, until I can download Jaws and see what the skip navigation links are like, I'll drop it.
Peo - I still think it's being divided, and thus <div>s are correct. They're block level by default, and the footer calls for the use of divs, as far as I'm concerned.
Webnauts
01-03-2005, 09:36 PM
Originally posted by Ben R.
Peo - I still think it's being divided, and thus <div>s are correct. They're block level by default, and the footer calls for the use of divs, as far as I'm concerned.
What about trying <p> tags?
Ben Rogers
01-03-2005, 10:02 PM
Originally posted by Webnauts
What about trying <p> tags? Well... I'd go with div. You're simply dividing it up, they're not really paragraphs.
Webnauts
01-03-2005, 10:08 PM
Originally posted by Ben R.
Well... I'd go with div. You're simply dividing it up, they're not really paragraphs.
Thanks Ben. I guess I will do for divs. Thanks a lot.
And if you have time, continue beating me up if you feel like! :D
Robert Wellock
01-05-2005, 09:34 AM
Happy New Year.
Having the left hand navigation hyperlink links in black isn't really suitable enough for WAI AAA I know you use the bullets but you'ld need a different font, underline of colour for them to really stand out.
Also I would suggest making better use of the CSS a:focus to highlight the hyperlinks more strongly if you tab through them using a keyboard.
Neither of these two following site show a really good example of the focus but as you'll appreciate they are slightly better than just the dotted line.
http://www.xhtmlcoder.com/worthvalley/
http://www.xhtmlcoder.com/beck/
Also those side heading, i.e. 'Articles about:', 'Navigate this page:' and 'Featured Sites:' should really be either h3 or have a <strong> surrounding them they are semantically more important that just a styled <div>.
There's nothing wrong with having the <p> surround the copyright footer a <div> is just a generic style container and conveys no real meaning.
Ben Rogers
01-05-2005, 03:29 PM
Originally posted by Robert Wellock
There's nothing wrong with having the <p> surround the copyright footer a <div> is just a generic style container and conveys no real meaning. Yes, that's right- they convey no meaning; the <p> does. Maybe I'm getting a bit too abstract here, but they're not paragraphs, it's just some text that needs to be divided up for usability/legibility purposes. The rest, as can be seen by my last list, I agree with.
Webnauts
01-05-2005, 08:10 PM
Originally posted by Robert Wellock
Happy New Year.
Having the left hand navigation hyperlink links in black isn't really suitable enough for WAI AAA I know you use the bullets but you'ld need a different font, underline of colour for them to really stand out.
Also I would suggest making better use of the CSS a:focus to highlight the hyperlinks more strongly if you tab through them using a keyboard.
Neither of these two following site show a really good example of the focus but as you'll appreciate they are slightly better than just the dotted line.
http://www.xhtmlcoder.com/worthvalley/
http://www.xhtmlcoder.com/beck/
Also those side heading, i.e. 'Articles about:', 'Navigate this page:' and 'Featured Sites:' should really be either h3 or have a <strong> surrounding them they are semantically more important that just a styled <div>.
There's nothing wrong with having the <p> surround the copyright footer a <div> is just a generic style container and conveys no real meaning.
What do I do when I need more than 6 header tags on one page?
Ben Rogers
01-05-2005, 08:39 PM
Originally posted by Webnauts
What do I do when I need more than 6 header tags on one page? What do you mean? You're not numbering them. It's kind of like nesting; think of it like that. For example...<h1>Page title</h1>
<h2>Site name</h2>
<h3>Ducks</h3>
<p>...</p>
<h3>Chickens</h3>
<p>...</p>
<h2>Navigation</h2>
<h3>Misc.</h3>
<ul>nav</ul>
<h3>Recent</h3>
<ul>nav</ul>
<div>footer</div> Does that make it clearer?
Webnauts
01-05-2005, 09:15 PM
Originally posted by Ben R.
What do you mean? You're not numbering them. It's kind of like nesting; think of it like that. For example...<h1>Page title</h1>
<h2>Site name</h2>
<h3>Ducks</h3>
<p>...</p>
<h3>Chickens</h3>
<p>...</p>
<h2>Navigation</h2>
<h3>Misc.</h3>
<ul>nav</ul>
<h3>Recent</h3>
<ul>nav</ul>
<div>footer</div> Does that make it clearer?
Ben wouldn't his hurt SEO. And would that be semantically right?
Ben Rogers
01-05-2005, 09:33 PM
Originally posted by Webnauts
Ben wouldn't his hurt SEO. And would that be semantically right? What are you talking about? True search engines pay more attention to headers, this'd only help you. And yes, this is semantically correct, using headers.