Could any guru with a spare moment take a look at my webpage, and tell me whether it will have any problems on different browsers and configurations?<br />
<br />
<br />
Webpage (<!-- m --><a class="postlink" href="http://www.netcartoon.net/ciao/main/index.htm">http://www.netcartoon.net/ciao/main/index.htm</a><!-- m -->) <br />
<br />
I put the page together in Dreamweaver using <DIV> tags for all the different content. I don't know if I have done my <DIV> tags right. Will all browsers cope with nested layers?<br />
<br />
I'm assuming that the code DW writes for the rollover and netscape re-size, will work ok on all browsers. But is there anything in the code which will cause problems for certain peope viewing?<br />
<br />
I'd really appreciate any feedback / advice you can give. Thanks.<!--content-->See <!-- m --><a class="postlink" href="http://www.delorie.com/web/lynxview.cgi?url=http%3A%2F%2Fwww.netcartoon.net%2Fciao%2Fmain%2Findex.htm">http://www.delorie.com/web/lynxview.cgi ... Findex.htm</a><!-- m --> to get an idea of how your page will seem on a non graphical browser such as an audio or Braille browser. I think that you would agree that that's not acceptable. <br />
<br />
And see <!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.netcartoon.net%2Fciao%2Fmain%2Findex.htm">http://validator.w3.org/check?uri=http% ... Findex.htm</a><!-- m --> for the official validation report for your page. <br />
<br />
Your page should work in Lynx and should pass the validator with no errors. And you should pass the checkpoints at <!-- m --><a class="postlink" href="http://www.w3.org/TR/WCAG10/full-checklist.html">http://www.w3.org/TR/WCAG10/full-checklist.html</a><!-- m -->. are numerous errors in the code. While not using the "alt" attribute to your images isn't a hanging offense, they do need to be included. The biggest problem is using ID= many times. ID can only be used once so use a CSS class instead.<br />
<br />
See the validation results:<br />
<!-- m --><a class="postlink" href="http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A%2F%2Fwww.netcartoon.net%2Fciao%2Fmain%2Findex.htm&warnings=yes&input=yes">http://www.htmlhelp.com/cgi-bin/validat ... &input=yes</a><!-- m --><!--content-->Thanks all.<br />
<br />
I will certainly do something about the ALT thing, but uing same IDs was just me being lazy at this point - I will give them all separate ID's before going live. I was just cutting and pasting. <br />
<br />
I was really most concerned about whether the layers will appear in the right place on different browsers, so thanks Dave for the NS4 check. Nice to know. I am sure I saw that something can't cope with nested layers, but maybe not.<br />
<br />
As for the Lynx thing, Charles are you really serious? I know my page looks crud, but then so does every page I tried, from Amazon to Excite. What should it look like using that browser? How can I make it still work? I know ideally it would work for Braille readers, but how many do? And since this site is about a festival of the visual arts, is it really important? <br />
<br />
Anyway, those links are excellent so thanks for the tips.<!--content-->Your page wouldn't validate at all and failed with fatal error..
<br />
<br />
its said that you needed to include a DOCTYPE<br />
<br />
here is a possible list of doctypes you can include.<br />
<br />
<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m --><!--content-->Interesting View this page.<br />
<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m --><br />
<br />
if the page is viewd in IE6+ and Mozilla 1.3,<br />
damn there is huge difference in the lay out.<br />
Go netscape...<!--content-->Every page will look 'crud' in Lynx, because it only supports very basic HTML, i.e. text and hyperlinks. The important thing is then not that it looks good, but that it can still be navigated. If you just put in alt text, then your site will be fine.<!--content-->I think particularly old browsers will appear with all your info piled up in one corner, as they don't support positioning properly. You can cut all the positioning out into an external file under the @import rule to prevent this happening. It does make your code shorter too.<br />
<br />
Dave<!--content-->Well, from a graphic design standpoint, this template is a hoot. I think both the typeface choice and the supplemental line art are perfect, complementary visuals ... especially considering this is a children's organization (sorry about the U.S. version of the spelling). The vibrant (but not overbearing) colors work very well, too. Great job on tying together a solid theme.<br />
<br />
The only weird thing I found (using Internet Explorer 5 on a Mac) was that the "background" image under "About CIAO!" jumped to the right on rollover. It looks as if you forgot to center the d-background.gif image. (That's the only one I found that jumped, by the way.)<br />
<br />
Other things you may want to consider ...<br />
<br />
After looking at the HTML source code, I'm assuming you used Dreamweaver to build this. I'm further assuming that you have the "Netscape Resize Fix" turned on. As a long-time Dreamweaver user, I've found that this supposed "fix" does more harm than good. True, it will help on the occasional extreme reload where someone shrinks the window down dramatically (say, from 1200 pixels wide to 800). But, in general, it just seems to be an annoyance for Netscape users, because it automatically reloads any page when any browser window adjustment is made. So I'd suggest removing the "fix" from your template.<br />
<br />
Also, it looks as if your overall display width is 800 pixels. While a vast majority of users are indeed on 800 x 600 monitor resolutions (or higher) at this point, the actual usable screen area is about 760 pixels by 420 pixels on a maximized 800 x 600 browser window on Windows (which is about 95% of your audience, unfortunately ... from a Mac user perspective, heh). So, to prevent images and content from getting cut off on the edge(s), I would strongly recommend dropping your overall template width down to 760 pixels or less.<br />
<br />
As for the <div> issue: While HTML 4 specs are all about layers and whatnot, I'm still in favor of using tables to organize content ... mainly because there are still some "older" browsers out there that have problems with "modern" HTML and CSS coding. Plus, the whole ID assignment can get unwieldy (as George mentioned ... but I know this was just a quick-and-dirty mock-up, too). Anyway, you may want to consider tables for content organization instead.<br />
<br />
As for Lynx, I'll echo cijori's comment: Use meaningful text descriptions in your <ALT> tags (just repeat the words that are in the GIF files), and you're fine. Non-graphical browser accommodation can only go so far before you get into "reverse discrimination," as Dave mentioned.<br />
<br />
As for W3C validation: Beyond the <DOCTYPE> issue, this thing is useless, in my opinion. I'll give the W3C props for establishing a viable Web design framework, but it seems they're no longer in touch with how real-world browsers behave and operate. Most of the things that come up as "errors" are either misidentified or inconsequential.<br />
<br />
If you're looking for a more helpful usability/accessibility analysis of your site, try Watchfire's Bobby system ...<br />
<br />
<!-- m --><a class="postlink" href="http://bobby.watchfire.com/">http://bobby.watchfire.com/</a><!-- m --><br />
<br />
Jason<!--content-->Most errors are delat with by modern browsers. However, their is the possibility that new browsers will just ignore deprecated attributes and non-standardized code.<!--content-->
<br />
<br />
Webpage (<!-- m --><a class="postlink" href="http://www.netcartoon.net/ciao/main/index.htm">http://www.netcartoon.net/ciao/main/index.htm</a><!-- m -->) <br />
<br />
I put the page together in Dreamweaver using <DIV> tags for all the different content. I don't know if I have done my <DIV> tags right. Will all browsers cope with nested layers?<br />
<br />
I'm assuming that the code DW writes for the rollover and netscape re-size, will work ok on all browsers. But is there anything in the code which will cause problems for certain peope viewing?<br />
<br />
I'd really appreciate any feedback / advice you can give. Thanks.<!--content-->See <!-- m --><a class="postlink" href="http://www.delorie.com/web/lynxview.cgi?url=http%3A%2F%2Fwww.netcartoon.net%2Fciao%2Fmain%2Findex.htm">http://www.delorie.com/web/lynxview.cgi ... Findex.htm</a><!-- m --> to get an idea of how your page will seem on a non graphical browser such as an audio or Braille browser. I think that you would agree that that's not acceptable. <br />
<br />
And see <!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.netcartoon.net%2Fciao%2Fmain%2Findex.htm">http://validator.w3.org/check?uri=http% ... Findex.htm</a><!-- m --> for the official validation report for your page. <br />
<br />
Your page should work in Lynx and should pass the validator with no errors. And you should pass the checkpoints at <!-- m --><a class="postlink" href="http://www.w3.org/TR/WCAG10/full-checklist.html">http://www.w3.org/TR/WCAG10/full-checklist.html</a><!-- m -->. are numerous errors in the code. While not using the "alt" attribute to your images isn't a hanging offense, they do need to be included. The biggest problem is using ID= many times. ID can only be used once so use a CSS class instead.<br />
<br />
See the validation results:<br />
<!-- m --><a class="postlink" href="http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A%2F%2Fwww.netcartoon.net%2Fciao%2Fmain%2Findex.htm&warnings=yes&input=yes">http://www.htmlhelp.com/cgi-bin/validat ... &input=yes</a><!-- m --><!--content-->Thanks all.<br />
<br />
I will certainly do something about the ALT thing, but uing same IDs was just me being lazy at this point - I will give them all separate ID's before going live. I was just cutting and pasting. <br />
<br />
I was really most concerned about whether the layers will appear in the right place on different browsers, so thanks Dave for the NS4 check. Nice to know. I am sure I saw that something can't cope with nested layers, but maybe not.<br />
<br />
As for the Lynx thing, Charles are you really serious? I know my page looks crud, but then so does every page I tried, from Amazon to Excite. What should it look like using that browser? How can I make it still work? I know ideally it would work for Braille readers, but how many do? And since this site is about a festival of the visual arts, is it really important? <br />
<br />
Anyway, those links are excellent so thanks for the tips.<!--content-->Your page wouldn't validate at all and failed with fatal error..
<br /><br />
its said that you needed to include a DOCTYPE<br />
<br />
here is a possible list of doctypes you can include.<br />
<br />
<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m --><!--content-->Interesting View this page.<br />
<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m --><br />
<br />
if the page is viewd in IE6+ and Mozilla 1.3,<br />
damn there is huge difference in the lay out.<br />
Go netscape...
<!--content-->Every page will look 'crud' in Lynx, because it only supports very basic HTML, i.e. text and hyperlinks. The important thing is then not that it looks good, but that it can still be navigated. If you just put in alt text, then your site will be fine.<!--content-->I think particularly old browsers will appear with all your info piled up in one corner, as they don't support positioning properly. You can cut all the positioning out into an external file under the @import rule to prevent this happening. It does make your code shorter too.<br /><br />
Dave<!--content-->Well, from a graphic design standpoint, this template is a hoot. I think both the typeface choice and the supplemental line art are perfect, complementary visuals ... especially considering this is a children's organization (sorry about the U.S. version of the spelling). The vibrant (but not overbearing) colors work very well, too. Great job on tying together a solid theme.<br />
<br />
The only weird thing I found (using Internet Explorer 5 on a Mac) was that the "background" image under "About CIAO!" jumped to the right on rollover. It looks as if you forgot to center the d-background.gif image. (That's the only one I found that jumped, by the way.)<br />
<br />
Other things you may want to consider ...<br />
<br />
After looking at the HTML source code, I'm assuming you used Dreamweaver to build this. I'm further assuming that you have the "Netscape Resize Fix" turned on. As a long-time Dreamweaver user, I've found that this supposed "fix" does more harm than good. True, it will help on the occasional extreme reload where someone shrinks the window down dramatically (say, from 1200 pixels wide to 800). But, in general, it just seems to be an annoyance for Netscape users, because it automatically reloads any page when any browser window adjustment is made. So I'd suggest removing the "fix" from your template.<br />
<br />
Also, it looks as if your overall display width is 800 pixels. While a vast majority of users are indeed on 800 x 600 monitor resolutions (or higher) at this point, the actual usable screen area is about 760 pixels by 420 pixels on a maximized 800 x 600 browser window on Windows (which is about 95% of your audience, unfortunately ... from a Mac user perspective, heh). So, to prevent images and content from getting cut off on the edge(s), I would strongly recommend dropping your overall template width down to 760 pixels or less.<br />
<br />
As for the <div> issue: While HTML 4 specs are all about layers and whatnot, I'm still in favor of using tables to organize content ... mainly because there are still some "older" browsers out there that have problems with "modern" HTML and CSS coding. Plus, the whole ID assignment can get unwieldy (as George mentioned ... but I know this was just a quick-and-dirty mock-up, too). Anyway, you may want to consider tables for content organization instead.<br />
<br />
As for Lynx, I'll echo cijori's comment: Use meaningful text descriptions in your <ALT> tags (just repeat the words that are in the GIF files), and you're fine. Non-graphical browser accommodation can only go so far before you get into "reverse discrimination," as Dave mentioned.<br />
<br />
As for W3C validation: Beyond the <DOCTYPE> issue, this thing is useless, in my opinion. I'll give the W3C props for establishing a viable Web design framework, but it seems they're no longer in touch with how real-world browsers behave and operate. Most of the things that come up as "errors" are either misidentified or inconsequential.<br />
<br />
If you're looking for a more helpful usability/accessibility analysis of your site, try Watchfire's Bobby system ...<br />
<br />
<!-- m --><a class="postlink" href="http://bobby.watchfire.com/">http://bobby.watchfire.com/</a><!-- m --><br />
<br />
Jason<!--content-->Most errors are delat with by modern browsers. However, their is the possibility that new browsers will just ignore deprecated attributes and non-standardized code.<!--content-->