Prototype needs critical analysis

@tonyhApr 17.2004

Hi Guys,

I’ve finished a prototype of the site I’ve been developing with all the advice given over the last few weeks from you.

~~[URL=http://people.uleth.ca/~tony.hughes/BGCmovie/]~~Bubblegum Crisis: The Movie[/URL]

I don’t want you to pull any punches. I need to know what’s wrong and how to fix or improve it.

Some known problems:

~~[list]~~

~~[*]~~

Cross-browser compliant JavaScript

~~[*]~~

Lighter background images and text color

~~[*]~~

Accessible tables and tables rewriten as lists

~~[*]~~

Validate all pages

[/list]

I haven’t validated all the pages because this is a prototype and I know it has errors. Thus the critique.

It’s my understanding that to make an accessible table the <thead> must be used. And ~~[URL=http://www.w3schools.com/tags/tag_thead.asp]~~W3Schools[/URL] claims if <thead> is used so does <tbody> and <tfoot>. I need an example of a table that uses these, as I have never used them before. Furthermore, once looking through the site, please tell meif tables are needed at all, I may be able to avoid this issue all together.

to post a comment

HTML

9 Comments(s) _↴

@IncaWarriorApr 17.2004 — #basically <thead><tr><th>.....</tr></thead> is the top row of the table with all the headings then <tbody> </tbody> is around all the content. I never use <tfoot>

@PhillMcApr 17.2004 — #Your images are WAY too large! You've got 300 K's worth on first page, I suggest you optimze them.

@tonyhauthorApr 17.2004 — #[i]Originally posted by PhillMc [/i]

[B]Your images are WAY too large! You've got 300 K's worth on first page, I suggest you optimze them. [/B][/QUOTE]
I know that images are among the issues. And I have asked about optimization [URL=http://forums.webdeveloper.com/showthread.php?s=&threadid=32708]here[/URL] and no one has replied.

I use photoshop, but I'm not aware of any optimization features that allow [I]same[/I] quality at lower file size. I was hoping there would be an online or open source utlity that will help in this regard.

I'm surprised that no one has any issues with scrolling yet :rolleyes: .

@PhillMcApr 17.2004 — #I'm surprised that no one has any issues with scrolling yet .[/QUOTE]

Havn't gotten there yet, lol.

Its not the same quality, though. You have to trade quality to get a smaller file, trick is to find a quality that doesnt murder the size and isnt really noticable to the human eye. ImageReady, Part of PS 7, is the tool that I recommend ?

@Paul_JrApr 17.2004 — #[i]Originally posted by tonyh [/i]

[B]I'm surprised that no one has any issues with scrolling yet :rolleyes: . [/B][/QUOTE]
Anything lower than 1024*768 you can't see all of the page, since the overflow is set to hidden.

@PhillMcApr 18.2004 — #lol, I didn't even think about that. I did think it a bit large considering the site took up most of the screen in 1280x1024 ?

@tonyhauthorApr 18.2004 — #[i]Originally posted by Paul Jr [/i]

[B]Anything lower than 1024*768 you can't see all of the page, since the overflow is set to hidden. [/B][/QUOTE]
I am aware of this as well, there is some odd functionality with the client scrollbars if JavaScript is enabled. In order to remove this bizare phenomenom I had to make the body overflow hidden. I intend to remove the hidden overflow for the official site, even if this oddity persists.

If you are using a resolution smaller than 1024x768 chances are you are going to reduce the text size as well. The site is designed to resize for this reason alone, well and to enlarge text with larger resolutions too.

I'm more concerned if this site is considered accessible or not. Validation isn't, as I know once I get the tables fixed or removed and some other content rewritten that it will validate. The only time the CSS won't validate is if JS is enabled. The primary concern is if the custom scrollbar is "too incumbersome" and what changes need to be made to make it easier to use. I highly recommend those critiquing the site to read the Site FAQ for more info.

But, I will consider every recommendation made for the site.

@zingmatterApr 18.2004 — #For your splash screen (which I generally think are unecessary and should be avoided) that image might be smaller if if were a .gif image rather than a jpeg. If you have photoshop 7 then try out various options using the 'Save for web' function.

On the mail pages I see the background image is complete although it mostly covered by the menu and content - so why not save some memory by putting only the minimum of image on to the page.

Just some thoughts - otherwise I thought it quite a good site - though do you really need the mouse-over scroll thing? I been scrolling things on computers for years in the normal way and found it satisfactory - so why re-invent it?

Cheers

@tonyhauthorApr 18.2004 — #[i]Originally posted by zingmatter [/i]

[B]For your splash screen (which I generally think are unecessary and should be avoided) that image might be smaller if if were a .gif image rather than a jpeg.[/b][/quote]
The Splash screen will include links other than 'Enter' in future updates, including a link to Flash.

[b]If you have photoshop 7 then try out various options using the 'Save for web' function.[/b][/quote]
I've tried to use this in the past with unsatisfactory results. But, I'll retry this and ImageReady when I redesign the background images.

[b]On the mail pages I see the background image is complete although it mostly covered by the menu and content - so why not save some memory by putting only the minimum of image on to the page.[/b][/quote]
The background images are spliced up around the black background as it is.

[b]Just some thoughts - otherwise I thought it quite a good site - though do you really need the mouse-over scroll thing? I been scrolling things on computers for years in the normal way and found it satisfactory - so why re-invent it?

Cheers [/B][/QUOTE]
Thank you. What can I say, I don't care for the grey default scrollbars in an already stylized page. And I am aware that coloring the scrollbar is a taboo. Maybe redesigning it as a custom scrollbar is a taboo too. Here's what it says regarding scrolling in the FAQ:

[b]How do you scroll with JavaScript enabled?[/b]

The custom scroll bar on the right of the content is divided up into five sections:

[b]Refresh[/b]: the circlular button with the curved arrow can be clicked with the mouse to return the content back to the top and reset the scroll speed to default.

[b]Scroll Up[/b]: the square button with the up arrow can be hovered with the cursor to scroll the text up the same as the browser's vertical scroll bar.

[b]Decrease Speed[/b]: the top half of the rectangular bar can be clicked with the mouse to decrease the scrolling speed. The speed can be adjusted up to five times with additional clicks.

[b]Increase Speed[/b]: the bottom half of the rectangular bar can be clicked with the mouse to increase the scrolling speed. The speed can be adjusted up to five times with additional clicks.

[b]Scroll Down[/b]: the square button with the down arrow can be hovered with the cursor to scroll the text down the same as the browser's vertical scroll bar.

Netscape 6+, and most likely all browsers using the Gecko Engine, calculate CSS properties differently than Internet Explorer. Thus, you'll find that scrolling may seem "bumpy" in NS compared to IE. A search for an optimized solution will continue and apologies for the inconvenience.

This type of scolling is not necessary, and normal scrollbars can be used by disabling JavaScript. The purpose of the scroll bar is explained above, but it is also designed to emulate scrolling often seen in Flash sites. The idea was to try and make the transition from the XHTML site to a future Flash site as seamless as possible.[/quote]
Should I redesign the page without the custom scrollbar? I can't seem to get the script to be cross-browser compatible anyways. I know that colored scrollbars are propietary, but is it really that bad?

Edit: I just realized that I [b]CANNOT[/b] remove the scrolling JavaScript unless someone can tell me how I can get Vladdy's multi-menu to be accessed above the content without placing overflow: hidden on it in NS?

It's a double edge. Vladdy's menu won't work in IE without JS because of it's 'behavior' property used to emulate W3C hover and JS is required for the links to be accessed above the content in NS, but the menu itself will work without JS. As said, if someone can explain how to do this without overflow: hidden I will not use it.

Also in #HTML _↴

html stylesheets different look on different resolutions Script to Random Pull a link each reload from a Database of 100 links

Success!

Help @tonyh spread the word by sharing this article on Twitter...

Tweet This

Prototype needs critical analysis

9 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Prototype needs critical analysis

9 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #HTML _↴