OT - Top Web Design Mistakes
Douglas Kerr
following article when producing roadgeek-oriented websites in the new year.
http://www.useit.com/alertbox/20021223.html
Steve Anderson
Thanks for the link... there's always something new we can all learn in
web design.
Have a fufilling, well traveled 2003!
-- Steve Anderson
http://www.nycroads.com
http://www.phillyroads.com
http://www.bostonroads.com
Brian Polidoro
1 - no prices - I'm not selling anything
2 - inflexible search engines - I don't have one
3 - Horizontal scrolling - I do try and stay away from this. CSS gives a good way to handle this by using percents instead of hard
coded pixels for widths. This way you can make a table take 50% of the screen width and it won't go off the screen. Unless you
make the browser very small, which is stupid anyway.
4- Fixed font sizes - I usually don't use them. An example of where I do is highway shields. Making the route number any larger
would mean it doesn't fit in the shield.
5. Blocks of text - like Adam Prince says: Spice it up with some pics.
6. Javascript in links - I especially hate this one. That doesn't mean I hate javascript. I like javascript. But popups give
javascript a bad name. That's what I hate.
7. bad FAQs - I don't have one.
8. Email address collection - I don't collect email addys.
9. Long URLs - no problem here for me.
10. Mailto links - I've used three ways for this. Use a mailbox image. The link says 'email me'. Or the link says 'contact'.
Actually the last example probably should have a contact page because it doesn't necessarily mean email. Contact could mean phone
number, snail mail address or even IM contact info.
Good link Doug. I especially liked the cartoon illustrations that go with each point.
I also looked the other lists link there and I saw this one from 6 years ago and they still hold true:
http://www.useit.com/alertbox/9605.html
1. Using frames - I've come close to using frames a few times lately but haven't used them recently. The last one I used was a
floating frame which I admit was poor design. But I didn't know better then.
2. Gratuitous Use of Bleeding-Edge Technology - I don't use things like CSS or javascript to attract users. I use it to make things
easier for me to maintain or easier navigation.
3. Scrolling Text, Marquees, and Constantly Running Animations - none here.
4. Complex URLs - similar to #9 above
5. Orphan Pages - depending on how what you include in this category - my endpages could fit here. There's currently no indication
of what the pages are a part of except the URL. My new design already includes the site title for each page.
6. Long Scrolling Pages - As was added this is less of a problem now. But this is why I changed my PA road sites page. It had
gotten way to long.
7. Lack of Navigation Support - Always a big concern
8. Non-Standard Link Colors - I go back and forth on this one. I think it dated because so many people change their link colors
now. And yet there are still new users to the web all of the time. And having standard link colors (or underlining) is helpful to
them. My mom is an example. She got her first computer for christmas. And while she's had some computer exposure at work she
hasn't had internet exposure.
9. Outdated Information - It's tough to keep up with this with end pages. There are so many of them. I don't even have that many
yet. But the as an example the MD 117 east end sign is gone due to construction. So we'll if one is there when it's done.
10. Overly Long Download Times - Thumbnails for photos is a big one here, as we've seen - I've thought about using them but I'm
looking to make other changes first. And those would make changing over to thumbnails much easier afterward.
These were revisited here : http://www.useit.com/alertbox/990502.html
And there's more here to look at. Again a good link. Alert box is in my favorites now.
--
Brian Polidoro
Index of My Road Related Sites - http://mahn0.tripod.com
"Douglas Kerr" <dke...@oswego.eduHORMEL> wrote in message news:HroP9.180397$a8.1...@news4.srv.hcvlny.cv.net...
| For general information and self-improvement, consider some topics in the
| following article when producing roadgeek-oriented websites in the new year.
|
| http://www.useit.com/alertbox/20021223.html
|
|
-----= Posted via Newsfeed.Com, Uncensored Usenet News =-----
http://www.newsfeed.com - The #1 Newsgroup Service in the World!
-----== 100,000 Groups! - 19 Servers! - Unlimited Download! =-----
Sherman Cahal
news:3e10...@post.newsfeed.com...
I find some of these "Do Not's" full of crap.
> 1 - no prices - I'm not selling anything
Ditto.
> 2 - inflexible search engines - I don't have one
Ditto.
> 3 - Horizontal scrolling - I do try and stay away from this. CSS gives a
good way to handle this by using percents instead of hard
> coded pixels for widths. This way you can make a table take 50% of the
screen width and it won't go off the screen. Unless you
> make the browser very small, which is stupid anyway.
CSS doesn't do the percent widths, that's just regular HTML code.
> 4- Fixed font sizes - I usually don't use them. An example of where I do
is highway shields. Making the route number any larger
> would mean it doesn't fit in the shield.
I find that if you use variable font sizes, the page becomes ugly and the
text does not fit into the table, etc... I use a smaller font to keep the
design looking excellent and not cluttered as you will get with a big font
size. I might implement a button that raises the font (via CSS and Cookies
of course) up one notch.
> 5. Blocks of text - like Adam Prince says: Spice it up with some pics.
Ditto, but sometimes not possible if you don't have pictures.
> 6. Javascript in links - I especially hate this one. That doesn't mean I
hate javascript. I like javascript. But popups give
> javascript a bad name. That's what I hate.
I use javascript only if I want a link to open up in a new window at a
specified size (eg. choosing options or viewing a picture).
> 7. bad FAQs - I don't have one.
Ditto.
> 8. Email address collection - I don't collect email addys.
Ditto.
> 9. Long URLs - no problem here for me.
I use long URL's, because they are efficent and good PHP coding practice.
The "page.php3?page=XXXXXXX" allows me to use *one* page (page.php3) with
all HTML links coming afterward ("?page=XXXXXXX"). That, when redesigning my
web-site, only gives me *one* page to redesign (page.php3) instead of
dozens, and makes redesigning my web-site very easy as it takes only minutes
versus hours and days the old method.
> 10. Mailto links - I've used three ways for this. Use a mailbox image.
The link says 'email me'. Or the link says 'contact'.
> Actually the last example probably should have a contact page because it
doesn't necessarily mean email. Contact could mean phone
> number, snail mail address or even IM contact info.
Mailto links I use on action of clicking my name.
> 1. Using frames - I've come close to using frames a few times lately but
haven't used them recently. The last one I used was a
> floating frame which I admit was poor design. But I didn't know better
then.
I don't use frames anymore becuase they are harder to manage. I use tables
and layers now.
> 2. Gratuitous Use of Bleeding-Edge Technology - I don't use things like
CSS or javascript to attract users. I use it to make things
> easier for me to maintain or easier navigation.
I use it to maintain a fresh and attractive web-design that is easy to
manage and update and redesign.
> 3. Scrolling Text, Marquees, and Constantly Running Animations - none
here.
Never ---
> 4. Complex URLs - similar to #9 above
Look at #9.
> 5. Orphan Pages - depending on how what you include in this category - my
endpages could fit here. There's currently no indication
> of what the pages are a part of except the URL. My new design already
includes the site title for each page.
>
> 6. Long Scrolling Pages - As was added this is less of a problem now. But
this is why I changed my PA road sites page. It had
> gotten way to long.
Can't avoid it sometimes.
> 7. Lack of Navigation Support - Always a big concern
None here.
> 8. Non-Standard Link Colors - I go back and forth on this one. I think it
dated because so many people change their link colors
> now. And yet there are still new users to the web all of the time. And
having standard link colors (or underlining) is helpful to
> them. My mom is an example. She got her first computer for christmas.
And while she's had some computer exposure at work she
> hasn't had internet exposure.
I think that using the bland blue and purple links stiffle creativity and
make web-designs ugly. I use a varying of colors but I make my links known
by placing them in a t able with a different colored background or
something.
> 9. Outdated Information - It's tough to keep up with this with end pages.
There are so many of them. I don't even have that many
> yet. But the as an example the MD 117 east end sign is gone due to
construction. So we'll if one is there when it's done.
> 10. Overly Long Download Times - Thumbnails for photos is a big one here,
as we've seen - I've thought about using them but I'm
> looking to make other changes first. And those would make changing over
to thumbnails much easier afterward.
I use thumbnails and compress my pictures w/o losing quality.
> These were revisited here : http://www.useit.com/alertbox/990502.html
>
> And there's more here to look at. Again a good link. Alert box is in my
favorites now.
> --
> Brian Polidoro
> Index of My Road Related Sites - http://mahn0.tripod.com
>
>
> "Douglas Kerr" <dke...@oswego.eduHORMEL> wrote in message
news:HroP9.180397$a8.1...@news4.srv.hcvlny.cv.net...
> | For general information and self-improvement, consider some topics in
the
> | following article when producing roadgeek-oriented websites in the new
year.
> |
> | http://www.useit.com/alertbox/20021223.html
> |
> |
>
>
>
>
> -----= Posted via Newsfeed.Com, Uncensored Usenet News =-----
> http://www.newsfeed.com - The #1 Newsgroup Service in the World!
> -----== 100,000 Groups! - 19 Servers! - Unlimited Download! =-----
>
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 80,000 Newsgroups - 16 Different Servers! =-----
Brian Polidoro
"Sherman Cahal" <she...@cahaltech.com> wrote in message news:3e10d...@corp.newsgroups.com...
| CSS doesn't do the percent widths, that's just regular HTML code.
Uh yes it does do percent widths: (From CSS1)
5.5.23 'width'
Value: <length> | <percentage> | auto
http://www.w3.org/TR/REC-CSS1#width
I forgot HTML does do percent widths. It's the browser I love to hate Netscape 4 that doesn't do percent widths in CSS.
| I find that if you use variable font sizes, the page becomes ugly and the
| text does not fit into the table, etc... I use a smaller font to keep the
| design looking excellent and not cluttered as you will get with a big font
| size. I might implement a button that raises the font (via CSS and Cookies
| of course) up one notch.
Variable font sizes are recommended for accessibility for people with poor vision. Accessibility is one thing that WC3 stresses in
CSS which is why things like Aural styles were added in CSS2.
Also what seems like a good size to you may be too large in smaller resolutions and too small at higher resolutions. So users need
to be able to change the font size. Tables will resize themselves to fit their content. Although if you specify both a width and
height, fitting content in a table becomes a problem. A solution Microsoft petitioned WC3 to add to CSS is that ... be used when
the content of a container cannot fit in that container because it's size is set. So leaving either the height or the width
flexible for containers is advisable. I leave the height flexible because of the horizontal scrolling problem will come up if the
width is flexible and the height is not. A web page should be flexible. It's not supposed to be static like a picture.
| I use long URL's, because they are efficent and good PHP coding practice.
| The "page.php3?page=XXXXXXX" allows me to use *one* page (page.php3) with
| all HTML links coming afterward ("?page=XXXXXXX"). That, when redesigning my
| web-site, only gives me *one* page to redesign (page.php3) instead of
| dozens, and makes redesigning my web-site very easy as it takes only minutes
| versus hours and days the old method.
I'm going to be using JavaScript to do same thing. The setup of the page is made using a JavaScript function. The end pages have
no visible HTML content. They contain data in the head about the end and pass the data to the function which writes the content of
the document. So only one JS file needs to be edited. And the user doesn't even know the difference unless they view the source or
they have JavaScript disabled. There's no difference to the URL. XML can do the same thing as well using XSL. But it's still in
that bleeding edge technology category or I'd be using XML. And I can host the JavaScript on any server even free sites because it
has no extra server requirements.
| I don't use frames anymore becuase they are harder to manage. I use tables
| and layers now.
I may go back to using tables more when CSS2 tables are better supported. CSS1's support for tables is incomplete. For example,
you can't specify cellspacing in CSS1.
I can achieve the table behavior to a degree using floating div's.
Also when you say layers do you mean iframes?
--
Brian Polidoro
Index of My Road Related Sites - http://mahn0.tripod.com
PS - I wonder why there a differing sigs here for the same service. Different Servers?
Sherman Cahal
is made using a JavaScript function. The end pages have
> no visible HTML content. They contain data in the head about the end and
pass the data to the function which writes the content of
> the document. So only one JS file needs to be edited. And the user
doesn't even know the difference unless they view the source or
> they have JavaScript disabled. There's no difference to the URL. XML can
do the same thing as well using XSL. But it's still in
> that bleeding edge technology category or I'd be using XML. And I can
host the JavaScript on any server even free sites because it
> has no extra server requirements.
>
> | I don't use frames anymore becuase they are harder to manage. I use
tables
> | and layers now.
>
> I may go back to using tables more when CSS2 tables are better supported.
CSS1's support for tables is incomplete. For example,
> you can't specify cellspacing in CSS1.
>
> I can achieve the table behavior to a degree using floating div's.
>
> Also when you say layers do you mean iframes?
No, iframes and layers are different. Layers can just be "thrown" on a
design and moved in any direction you please. They are a lot easier than
tables, and the software I use (Dreamweaver MX) has a layer to table
converter, so I can create some nifty designs that would otherwise be next
to impossible using the standard table procedure.
Brian Polidoro
But which html tag do these layers use? I see by looking at Ohio Valley Roads index page that tables are the backbone of the layout
for the page. So it looks like you 'layers' are just tables. I sounds like it allows you to put blocks anywhere on your canvas
that you want. But behind the scenes it's constructing tables that conform to the design you make. Thus they use a non-html term -
layers. There was a layer tag but that was tag made up by Netscape that never was a part of proper html. It's their equivalent to
HTML's iframe.
And also I see an html tag inside of a another html tag. That's not legal. As you can see when it tries to validate.
Line 127, column 11: document type does not allow element "HTML" here (explain...).
<html>
^It totaled 157 errors for html 4 transitional. And how about 723 errors in XHTML 1.0 transitional. I know you
didn't make it to be XHTML but that's the future. It's much less forgiving. And that's so web coding is more standardized and
done correctly. If it wasn't for the wealth of forgiving by current browsers your page would show a blank white page because of its
errors. Although most pages today also are not XHTML compliant. But that nested html tag error is a severe one even for HTML 4.
Also fixed fonts may be fixed in IE but not in Mozilla. If you tell Mozilla to use a larger size it'll enlarge all text which
messes up your styling on the page.
Opera has a nice zoom feature instead. It not only enlarges the text but most everything else. So it breaks less pages that way.
Also I thought you were using CSS. I see some but I also see alot of old style HTML code in there as well. That's the problem with
using editors, you don't know what it puts under the hood. You keep saying your a dreamweaver guy. Well I after seeing this I
don't think dreamweaver is good at all at making proper HTML code even for version 4. I have yet to find an editor that uses only
CSS and no older HTML coding. So I do the coding myself.
--
Brian Polidoro
Index of My Road Related Sites - http://mahn0.tripod.com
"Sherman Cahal" <she...@cahaltech.com> wrote in message news:3e11c...@corp.newsgroups.com...
Sherman Cahal
Roads index page that tables are the backbone of the layout
> for the page. So it looks like you 'layers' are just tables. I sounds
like it allows you to put blocks anywhere on your canvas
> that you want. But behind the scenes it's constructing tables that
conform to the design you make. Thus they use a non-html term -
> layers. There was a layer tag but that was tag made up by Netscape that
never was a part of proper html. It's their equivalent to
> HTML's iframe.
The layers use the <layer> tag and is supported by the newest version of NS
and IE 4.0+. The layers are great for designing pages and then converting
them to tables via a wizard - it's much easier.
> And also I see an html tag inside of a another html tag. That's not
legal. As you can see when it tries to validate.
>
> Line 127, column 11: document type does not allow element "HTML" here
(explain...).
> <html>
> ^It totaled 157 errors for html 4 transitional. And how
about 723 errors in XHTML 1.0 transitional. I know you
> didn't make it to be XHTML but that's the future. It's much less
forgiving. And that's so web coding is more standardized and
> done correctly. If it wasn't for the wealth of forgiving by current
browsers your page would show a blank white page because of its
> errors. Although most pages today also are not XHTML compliant. But
that nested html tag error is a severe one even for HTML 4.
I do not use the validation tool. Most (95%) errors are because I do not
have an ALT image text which I do not utilize because all my images work. If
they don't then I can find out and fix it.
> Opera has a nice zoom feature instead. It not only enlarges the text but
most everything else. So it breaks less pages that way.
the newest Opera is out and it is sweet. Try it.
> Also I thought you were using CSS. I see some but I also see alot of old
style HTML code in there as well. That's the problem with
> using editors, you don't know what it puts under the hood. You keep
saying your a dreamweaver guy. Well I after seeing this I
> don't think dreamweaver is good at all at making proper HTML code even for
version 4. I have yet to find an editor that uses only
> CSS and no older HTML coding. So I do the coding myself.
What old HTML code? All font sizes, font types, and table border colors and
widths are controlled by CSS. The entire site is not *entirely* CSS
dependent and has a mix of HTML and PHP in there.
Mike St.
>
Same.
> 2 - inflexible search engines - I don't have one
>
Same.
> 3 - Horizontal scrolling - I do try and stay away from this. CSS gives a
> good way to handle this by using percents instead of hard
> coded pixels for widths. This way you can make a table take 50% of the
> screen width and it won't go off the screen. Unless you
> make the browser very small, which is stupid anyway.
I've always used percentages. I've just found them easier.
> 4- Fixed font sizes - I usually don't use them. An example of where I do is
> highway shields. Making the route number any larger would mean it doesn't
> fit in the shield.
I use them.
>
> 5. Blocks of text - like Adam Prince says: Spice it up with some pics.
>
I really don't have that. But I do spice things up.
> 6. Javascript in links - I especially hate this one. That doesn't mean I
> hate javascript. I like javascript. But popups give javascript a bad
> name. That's what I hate.
I'm changing out of that at the site that I have that. Makes the page
it linked to not as long.
>
> 7. bad FAQs - I don't have one.
Same
>
> 8. Email address collection - I don't collect email addys.
>
Same
> 9. Long URLs - no problem here for me.
>
Free site problem a lot of the time. I don't think mine are too long.
> 10. Mailto links - I've used three ways for this. Use a mailbox image.
> The link says 'email me'. Or the link says 'contact'. Actually the last
> example probably should have a contact page because it doesn't necessarily
> mean email. Contact could mean phone number, snail mail address or even IM
> contact info.
When I've used it, I had "e-mail them here" with the link on here but
changed to showing the e-mail to help out people with web based e-mail
only.
>
> 1. Using frames - I've come close to using frames a few times lately but
> haven't used them recently. The last one I used was a floating frame which
> I admit was poor design. But I didn't know better then.
I only will use them for photo galleries so I don't have to edit the
thumbnail page.
>
> 2. Gratuitous Use of Bleeding-Edge Technology - I don't use things like CSS
> or javascript to attract users. I use it to make things easier for me to
> maintain or easier navigation.
Same
> 3. Scrolling Text, Marquees, and Constantly Running Animations - none here.
Same - I do know sites that over use Marquees...
> 5. Orphan Pages - depending on how what you include in this category - my
> endpages could fit here. There's currently no indication of what the pages
> are a part of except the URL. My new design already includes the site title
> for each page.
Most of my pages include links to the home page or have a navigation
area on them.
>
> 6. Long Scrolling Pages - As was added this is less of a problem now. But
> this is why I changed my PA road sites page. It had gotten way to long.
I may have this problem soon on one site.
>
> 7. Lack of Navigation Support - Always a big concern
>
Same
> 8. Non-Standard Link Colors - I go back and forth on this one. I think it
> dated because so many people change their link colors now. And yet there
> are still new users to the web all of the time. And having standard link
> colors (or underlining) is helpful to them. My mom is an example. She got
> her first computer for christmas. And while she's had some computer
> exposure at work she hasn't had internet exposure.
Make the links look different than the regular text. Underlining,
different color, highlight when rolled over...
>
> 9. Outdated Information - It's tough to keep up with this with end pages.
> There are so many of them. I don't even have that many yet. But the as an
> example the MD 117 east end sign is gone due to construction. So we'll if
> One is there when it's done.
I try not to have that... keyword is try...
>
> 10. Overly Long Download Times - Thumbnails for photos is a big one here, as
> we've seen - I've thought about using them but I'm looking to make other
> changes first. And those would make changing over to thumbnails much easier
> afterward.
>
If I was going to reopen my roads site I would have converted to
thumbnails.
Brian Polidoro
Sherman Cahal <she...@cahaltech.com> wrote in message
news:3e120...@corp.newsgroups.com...
> I do not use the validation tool. Most (95%) errors are because I do not
> have an ALT image text which I do not utilize because all my images work.
If
> they don't then I can find out and fix it.
That one is in there a bit but it's not the only one. Also the alt tag is
required by HTML 4. It is required again because of accessibility. An all
text broswer replaces images with the alt tag. Having an alt tag isn't hard
to do and helps the page make more sense when the images are not present.
Also some people set their broswers like IE to not show images to avoid
unecessary images and advertisements but may show individual pictures that
they are interested in based on the alt tag. Also some browsers like IE
show the alt text as a tooltip when the mouse hovers over the pic. So it's
like a caption or title for the pic.
Another error that was very prominant was an invalid align attribute.
Middle is not a valid align attribute. Try center instead.
Another error that was repeated alot was not having quotes around attribute
values. From w3.org html validator:
"You have an attribute whose value needs to be in quotes. If an attribute
value contains any character other than letters, digits, hyphens and
periods, it must be enclosed in double quotes (single quotes would also be
OK from an SGML standpoint, but some browsers don't recognize them)."
And you have a # symbol which is why quotes are required on alot of your
attribute values.
Those are mostly it besides using a few attributes that don't exist.
Macromedia must think they can make their own version of HTML.
> What old HTML code? All font sizes, font types, and table border colors
and
> widths are controlled by CSS.
NOT! An example of old HTML in your code:
<span class="roadtext">
<img height=11 src="_graphics/arrowbullet.gif" width=11>
<b>KY 503 </b> ^^bold tags should be replaced by CSS ^^
<font color=#666666> ^^ditto for the font tag^^
<i>(<a href="page.php3?page=pictures_sr503_ky"
class="lefttablelinks">Photos</a>)</i> ^^ditto for the italics tag
</font>
</span>
> the newest Opera is out and it is sweet. Try it.
I'm using version 6 for testing pages and I'll use version 7 when it's past
the beta stage.
I'm not sure if the bad code is your doing or the software your using. But
I found the time you save using an editor is negated by the time it takes to
fix the bad code the software produces.
So why should people upgrade to standard compliant broswers if you use the
parts of the standards that are convenient to you and throw away the rest of
the standards.
Brian Polidoro