Common newbie web design mistakes

[spufi]

So I finally decided to work on some web design write ups on my site and I'm going through and creating a list of the most common mistakes beginning web designers make. I think my first one will be broken down into seperate issues when it's all said and done, but if you have any to add, let me know. I'll do a breakdown of each point in the write up once the list is done.

1. Taking the user's ability away from them.

2. Thinking that if their website looks good to them, it's done.

3. Making a website that works best at a certain resolution, or on a certain browser.

4. Using JavaScript for a critical part of their site and offering no way for the user to make the part work if JavaScript is disabled.

5. Poor layout and/or color choices.

6. Not knowing the what, when, and why of using each tag.

7. Using a table based layout.

8. Lack of knowledge about CSS.

[DaveSW]

Trying to make 'pixel perfect' designs.

But also see

http://www.useit.com/alertbox/9605.html

http://www.useit.com/alertbox/20021223.html

[Sux0rZh@jc0rz]

#1 mistake: Stealing other people code then putting a copyright at the bottom of their page

#2 mistake: Not using validators.

#3 mistake: Use of popups and background music on at least 2 occasions

#4 mistake: looping background music that wasnt meant to loop

[spufi]

Originally posted by DaveSW
Trying to make 'pixel perfect' designs.

But also see

http://www.useit.com/alertbox/9605.html

http://www.useit.com/alertbox/20021223.html

Already know about them. :p

Oh, and having music playing as a default, and/or not giving the user an option to turn it off.

[MP3Sound]

Planning the site - good navigation and layout.

Providing quality content - must do the homework and due dilligence

Utilising the exceptional qualities of the internet - exciting and not boring pages

Knowing the audience - this is a big one and kills most web sites.

Quentin

[iniquity101]

stupid flashing graphics that bounce around the screen

giving you a different cursor or trailing text behind cursor

[pyro]

Here's a big mistake that newbies make:

Doing something just because they can. :rolleyes:

Stupid JavaScript effects that totally suck (resizing my window, disabling my right-click, etc), blinking text, the marquee (Page of the damned (http://www.goer.org/HTML/examples/htmlhorror1.html) :p), etc, etc...

[Dark Dragon]

One really big error "newbie" designers commit is they never test out their sites once it is uploaded.

I see this so frequently, a person goes through the effort of putting a site together and uploading it but then that is where it stops. It is so important that as soon as it is uploaded to test links and so forth.

It also helps to check back on it and make sure links still work and most importantly, if linking to other sites, make sure the site still exists..if not then eliminate the link.

[Vladdy]

Gotta add attempts to protect/encrypt their code which actualy aint worth a dang to the list

[Paul Jr]

Originally posted by pyro
Here's a big mistake that newbies make:

Doing something just because they can. :rolleyes:



...And...

Originally posted by spufi
3. Making a website that works best at a certain resolution, or on a certain browser.


I believe are two of the biggest mistakes.





Originally posted by Pyro
Stupid JavaScript effects that totally suck (resizing my window, disabling my right-click, etc), blinking text, the marquee (Page of the damned (http://www.goer.org/HTML/examples/htmlhorror1.html) :p), etc, etc...

Heh, that page is totally messed up. :D

[pyro]

Originally posted by Paul Jr
Heh, that page is totally messed up. :D On purpose: http://www.goer.org/Journal/2003/Nov/index.html#03

[Robert Wellock]

Another mistake is they tend to use M$ Explorer when testing CSS rather than both M$ Explorer and Mozilla.

[giggledesign]

# users who hype there site to be something bigger than it actually is:




an example of this is at

http://www.geocities.com/tomralstonuk

this is amazingly funny!!

[Robert Wellock]

I won't ask which user that site above is from; thought at least I created 'XHTML 1.0 Embed' myself and know how to make tacky Christmas themes: http://www.xhtmlcoder.com/beck/ served as an application of XML.

[spufi]

Originally posted by giggledesign
# users who hype there site to be something bigger than it actually is:




an example of this is at

http://www.geocities.com/tomralstonuk

this is amazingly funny!!

1,000 hits in a year is a success? I have more than that for this month alone. :D

Another mistake, lack of defining width, height, and alt for images.

[paper]

7. Using a table based layout.

Oh NOOOO!! I use tables ALL THE TIME.. I'm so used to using tables all these years that I haven't really bothered with learning CSS to the fullest..

Guess i'm still a noob. :p

Oh yeah.. hmm.. mistakes..

using large flashy images as their background..

linking their images from their computer
(i.e. <img src="c:/mydocuments/booyah.jpg"> ):rolleyes:

[spufi]

Ok, I went and grouped them and I added some more in. I currently have 46. Some things I kind of worded in a general enough way so that it covered some of the ones listed here, but not as directly as stated here. Anyway, take a look and see if I'm still missing some.

http://www.matts-website.net/geek/wdmistakes.html

[zyex]

people who think they can design, just because they can code...no 1 mistake

[Vladdy]

Originally posted by zyex
people who think they can design, just because they can code...no 1 mistake
People who think that web design is just visual appearance ..... :rolleyes: ... gotta be no 0 then :D :D

[zyex]

people who don't know the difference between design and development

[toicontien]

I'm always surprised no one ever mentions this: good writing. <sound of english teacher beating text book on table> Proper grammar and spelling! Get an MLA style book, or better yet, an AP stylebook. Most PR and marketing firms use a form of AP style for their writing.

Another big mistake, using graphics to display swaths of plain text (falls into the overuse category, but I see it SO much).

Adding to Vladdy's and zyex's posts above: a huge mistake is to assume design and coding are for two types of people: designers and geeks respectively. A web developer and designer needs to know both. Period.

[spufi]

*ahem*

5. Using images for text.

:)

[Vladdy]

Since we are talking about images... I do not think it is just about using images for text, since there are times when it can be argued appropriate (such as company logo).

I would generalize it as: inability to distinguish between content images and presentation images and therefore place them accordingly (<img /> tag vs element background).

[spufi]

Right now the list is just in list form. I am going to break it down and do a write up about the list which should cover muliple pages. I would make sure to distinquish between using images for text in a logo, versus just using it to create a pixel perfect version of the site, or to make sure your layout is done how you want it.

[metallibanger]

Originally posted by toicontien

Another big mistake, using graphics to display swaths of plain text (falls into the overuse category, but I see it SO much).


I'm actually guilty of that on my latest site, and I really didn't want to do it, but there was no other way to meet my design goal. I needed it to look like there was a piece of printer paper stapled to the page with text on it. I could have just used graphics for the staples and had a white background with normal text on it, but it wouldn't have looked like a printed out piece of paper, it would have looked like computer text with some staples pasted in the corners. So much to my chagrin, that site ended up almost entirely graphics, even though it has a ton of text on it. Slow loading, yes, but necessary I think.

And tables... I just like tables, so I use them. Bad E-ethics maybe, but that's life.

Andy Oliphant
A&M Design Studios

[PeOfEo]

if you want to increae your load speed why not drop the tables and use css. It will help considering that it only needs to be loaded one time to work on all of your pages. Then why not use background images for the staples and paper?

[metallibanger]

First of all, every page has a different table layout. Wouldn't there then need to be a seperate css file loaded for each page? That wouldn't cut down on anything. Also, the problem is not the paper being realistic looking, but the text. It needed to look like something that came out of a printer, not crisp and clear and computer-like, like the font you're reading here.

Andy Oliphant
A&M Design Studios

[toicontien]

You design might actually be a good candidate for Flash. I'm sure there are fonts you can download and purchase that look like typed text off a printer or typewriter. Flash packages fonts in with the SWF file so you can use anything you want. And with Flash MX 2004, you can still have a fairly accessible site from what I've read.

[Paul Jr]

I'm a firm believer that you can do more easily with CSS just about anything you can do with tables.

[pyro]

http://www.alistapart.com/articles/imagemap/

[metallibanger]

Very impressive, but that just gets us back to the tables vs. css arguement, since it's still a case of loading the image, whether it's in the background or not it's still the same size. That page did the same thing I did, just using different techniques. It does cut down on loading time minutely because the code is so much shorter, but honestly, that's what like .2 seconds faster? The images, once loaded, all go into a temp folder, so they don't have to load multiple times with either technique, just the text that calls them does. So, aparently the fundamental difference as far as loading time is like 15 lines of code with css vs. 150 lines with an involved table and rollover image setup.

Andy Oliphant
A&M Design Studios

[eudemon]

9. Using Patterned backgrounds under text.

[metallibanger]

Originally posted by toicontien
You design might actually be a good candidate for Flash. I'm sure there are fonts you can download and purchase that look like typed text off a printer or typewriter. Flash packages fonts in with the SWF file so you can use anything you want. And with Flash MX 2004, you can still have a fairly accessible site from what I've read.

Possibly, but I'm still wary of making entirely flash sites unless I'm specifically asked to do so. Dunno, probably an unfounded worry, but flash still seems inaccessable to me for people with slow connections. Besides, I finally got around the print and download button problem thanks to the people here, I wouldn't want to go through it again trying to figure out a way to make it work with flash, lol. I'm still using Flash 5 though, I didn't like MX when I tried it, and I haven't tried the newer version of it. I wonder how much that affects the accessability of my flash sites.

Andy Oliphant
A&M Design Studios