hello,

i suggest we all post just 10 mistakes that one should avoid when designing a web site.;)

that thread could be so useful resource.


thanks for participating.:wht:

Here's one:

1. Forgetting to cross check browsers/system-OS when checking your work.

I.E., designing a website which looks good in Firefox on Microsoft Windows XP, but looks totally different with Netscape on a different platform, etc.

2. Avoid falling into the very common, very enticing trap of believing a) everyone else will see the same thing on their screens that you do, and b) that you can fully control this. You can't determine what browser is used, what OS is used, what browser add-ons someone uses, what non-conventional browsing devices someone uses, what special needs someone has, etc. You may believe the design choices you've made will be what the whole world sees, and if so, you've made a mistake :) Instead, create something that adapts gracefully to different environments, that most people will see as you want, but everyone will be able to use as they require!

3. forgetting to be simple and efficient. a website may look amazing and be stunning but in the end if the user has a problem finding a certain page or travelling through the site it may anger the user. Always remember if you can get to different pages to your site and back home in a few clicks then the user will be happy. After all if it takes a long time just to find a page i would be angry as well.

Originally posted by MadRespex
3. forgetting to be simple and efficient. a website may look amazing and be stunning but in the end if the user has a problem finding a certain page or travelling through the site it may anger the user. Always remember if you can get to different pages to your site and back home in a few clicks then the user will be happy. After all if it takes a long time just to find a page i would be angry as well.

You know, it'd be great if major companies would follow this advice. I swear some of the worst sites come from companies you would expect to have great ones....

4. No cell spacing. There is nothing worse than seeing a page with the text butted up against the borders.

Well, there IS worse, but you see my point.

5. Unneccesary (Some may say incorrect) use of elements within the document, increasing document size (Download speed) and render speed.

i thought i could get 10 mistakes from each member :) , now i could not even get 10 mistakes from all members.

6. Doing SEO work after the design is finished. Search engine optimization should always be considered during the design process.

Ah, I thought you were looking for a collective effort only. Heck, if I had the time, I'd give you a top 100 :)

I'll see what I can put together later (tomorrow?).

Originally posted by beecoder
i thought i could get 10 mistakes from each member :) , now i could not even get 10 mistakes from all members.

7. Make sure your point comes across clearly and is easy to understand by all.

8. If you have more code than content, you're doing something wrong.

8. By far the most common mistake to make with text on the Web is to have too much of it.

Originally posted by Pete
7. Make sure your point comes across clearly and is easy to understand by all.


Thanks Pete for the advice. :blush:

9. Another very common mistake is for a website to have multiple navigation schemes

Not using a spell checking. You don't look like a pro if you don't spell correct. In a forum there is no problem because this is an informal conversation. But when you think that you have finished a page the very last thing you should run is a spell checcker.

I can tell you by my experience, I always have 2 monitors and two different keyboards on my desk some times I just write in the wrong computer or probably you could hit a wrong key just before finishing some retouching on your html and then you did not realize the very big mistake that you did.

If you don't beleive me go to Google and enter in the search box exactlly this:

pubic service

You will find many companies offering this service. Only because they did not used the spell checker.

My 2 cents.... hope you like this one

nice tip jcrespi

Exellent tips!!!

here is one from me: Do not use too much vibrant colours in your web sites.

I hope this tip will be usefull for you :)

10) Don't ever place your email address directly on your website. The web spiders (or email harvesters) that reach your website will grab it and keep it in its database. The database might be sold to the data bank or spammers. At the end, you will get millions of junk mails.

When displaying an email address, some webmaster will place it in the format of "webmasterXdomain.com" or "webmaster @ domain.com" instead of "webmaster@domain.com". Both are not very good. Who knows if there is a spider/harvestor that is smart enough to recognize it. Some internet beginner might even sent an email to "webmasterXdomain.com".

The proper way of doing it is to display "webmaster@domain.com" BUT substitute the @ with a tiny image. Never link it to "mailto:webmaster@domain.com".

i kept running in to the 3rd one it kills ur site if u dont do it right!!!

11.) Avoid using frames unless you REALLY have to use them (they can look downright ugly at lower resolutions and have a host of other problems).


12.) Avoid centering everything on the page:

.........................It makes a site look very amateur and homemade!!!! ......................

..........................And it can look funny depending on the screen
..................resolution and the length of the sentence, etc., etc., ......

14.) Don't use the number 'thirteen' :)

15.) Don't use a background picture that makes it hard to read the text (depending on screen res, the background may move and the words might be right on top of the leaves from the tree in the background ;)

16.) Don't change the navigation (order of the buttons/links) for each page - for example ... do NOT have the current page link disappear and move the rest of the buttons ... people don't want to work at finding the page ... once they see the navigation, they want it to be similar throughout the site (this might have already been mentioned)

17.) Use a consistent theme if possible (related to the consistent navigation).

18.) No repeating animated gifs ... they move at different speeds on different systems (and can look completely stupid if they go really fast :stickout: )
- like homer simpson with his 'dancing jesus' image on his homepage ... mr X or something .... lol

19.) Don't use JPEG when a GIF is more appropriate for a text logo. Don't use GIF when you can get a smaller size with JPG.

20) Don't rip.

Yes i thought of this on my self and it seems to feature quite a lot nowadays :)

21) Use the same font and size for text throughout the site, unless it's a heading etc of course.

22) Try and learn / use CSS / XHTML where possible, making sure it all validates, allowing you to have a little button at the bottom of your site making you look super cool!

23) If you going to post images of sites you have done in a portfolio or whatever, don't post full size previews of them, have a little thumbnail that links to a larger preview, do this where ever else applicable.

24) Don't over clutter pages, space things out and make it easy to focus on and read. Only use images when necessary, don't cram each page full of pictures because you can't think of what else to write!

25) NEVER EVER USE Ligtht text color on light background (it should contrast with each other, dark to light and light to dark)

26.) dont put a flash header that would keep the visitor waiting for the menus to reveal itself, at least make the menus reveal first then preload the remaining..

27.) don't use more than 4 colors.... for me 3 colors are max. more than that the site would look like a kids playground :P

28.) if you're creating a flash INTRO, don't forget to put a "SKIP INTRO" button, not all viewers would like to view your intro, and if they don't see a skip button, they might click that button which we all don't want em to click. the "X" botton on top right of the browser :)

29.) don't make the site HEAVY ON GRAPHICS, make it light... (unless it is really necessary to put heavy graphics on it.)

30) don't forget to put a "SOUND OFF" on your flash if you would be having a background music in it... it's better to start it W/OUT the sound, then put a button which will allow them to turn on the sound. people tend to get annoyed with sound bg and close the browser. :D

- Theo

Originally posted by SuperBaby
10) Don't ever place your email address directly on your website. [...] The proper way of doing it is to display "webmaster@domain.com" BUT substitute the @ with a tiny image. Never link it to "mailto:webmaster@domain.com".
What about using an application to encode the address? Like the free web-based Enkoder offered by automaticlabs-dot-com? (Sorry, can't post URLs yet.) It's worked well for me ... other opinions?

Originally posted by mwreid
What about using an application to encode the address? Like the free web-based Enkoder offered by automaticlabs-dot-com? (Sorry, can't post URLs yet.) It's worked well for me ... other opinions? That converter is about the worst way you could possibly negotiate this problem. Any visitor who browses with JavaScript partially or fully disabled may stand to lose the content, but it doesn't prevent human harvesting, something that is more prevalent than people think.

Negotiate email via forms, and ones that don't contain your email address within their hidden fields.

Originally posted by Theoden
25) NEVER EVER USE Ligtht text color on light background (it should contrast with each other, dark to light and light to dark)

26.) dont put a flash header that would keep the visitor waiting for the menus to reveal itself, at least make the menus reveal first then preload the remaining..

27.) don't use more than 4 colors.... for me 3 colors are max. more than that the site would look like a kids playground :P

28.) if you're creating a flash INTRO, don't forget to put a "SKIP INTRO" button, not all viewers would like to view your intro, and if they don't see a skip button, they might click that button which we all don't want em to click. the "X" botton on top right of the browser :)

29.) don't make the site HEAVY ON GRAPHICS, make it light... (unless it is really necessary to put heavy graphics on it.)

30) don't forget to put a "SOUND OFF" on your flash if you would be having a background music in it... it's better to start it W/OUT the sound, then put a button which will allow them to turn on the sound. people tend to get annoyed with sound bg and close the browser. :D

- Theo


Summary : light and flexible site :)

Originally posted by oshawa
11.)

12.) Avoid centering everything on the page:

.........................It makes a site look very amateur and homemade!!!! ......................

..........................And it can look funny depending on the screen
..................resolution and the length of the sentence, etc., etc., ......




May be centering is used for solving resolution variations. ;)

Originally posted by Pete
6. Doing SEO work after the design is finished. Search engine optimization should always be considered during the design process.


Since the development process tend to separate the layout from the content, why should the SEO work and the design be on the same timeline ?

Forms must:

31.) help users as much as possible to enter their data. Consider whether it is possible to list all possible values.

32.) Match field length to data. What is important is that fields be long enough to hold their data and not a lot longer than that.

33.)Accept common formats. If the information has a common, accepted format, allow it. If there are several common formats, allow as many as is feasible. For example, a time field could accept times in any of the following formats: 12:30 am, 12:30 AM, 12:30 a, 00:30, 00:30 h.

34.) Accept your own formats. Accept data in the formats you use elsewhere. For example, if your printed product codes look like "ZX-4563.33 QR," your Web forms should accept the codes in that exact same format.

35.) Provide a pattern. Give an example of a valid format, for example, "DD/MM/YYYY," or "Sample Serial #: QP00275-5559." Put it somewhere right next to the field: above it, below it, or on either side.

36.) Beware of rejecting legitimate data. Think hard about who might be using your form. Customers from Canada or the United Kingdom, where postal codes include letters, would be greatly annoyed at an order form that required a "zip code" but rejected letters.

37.) Make letter-case irrelevant. If you expect users to type codes that include letters, and if letter case is not significant for the data, users should be able to type either uppercase or lowercase into the field. Using the previous example, users could type either "zx-45..." or "ZX-45....".

Originally posted by beecoder
May be centering is used for solving resolution variations.

It is better to use a single cell table and center the table. You can use percentage for width and it will adjust for screen resolution. Alternatively, you can use pixels as width and center the table.
(Border="0" and the table doesn't even appear ... it just moves the left justified text over to where you want it).

The over centering that is worst, is when the whole page is text and it is centered. It looks like something from back in the 90's

I agree with you oshawa, i agree sometimes with the fixed design approach.

i didnt get your point in your first thread :blush:

38) The only thing I always encounter a problem with is properly using CSS, because I hate manually putting on the page the font, font size and color before every paragraph or in every table because it's gets so annoying, so take time to sit down and figure out how you want to do the CSS for all the tables and all the little spots because it actually makes a big difference, and trust me, when you begin to add more pages, you will find it a lot easier!

It is better to use a single cell table and center the table. You can use percentage for width and it will adjust for screen resolution. Alternatively, you can use pixels as width and center the table.

Refer to #5

5. Unneccesary (Some may say incorrect) use of elements within the document, increasing document size (Download speed) and render speed.

Tables shouldn't be used for layout, for numerous reasons. The most important in my opinion is browser render speed. A document that is both well formed and 'correct' (Some may disagree with my terminology) will load much faster. Other reasons are documents size, as mentioned above, as well as their inflexibility compared to using divides.

The use of tables for layout is a classic mistake, that the majority of web developers make, hell even professionals do! I do make it a point, that if they're to offer services they should keep up to speed with the technology available, avoid editors and always follow specifications, guidelines etc. Where applicable. This includes WAI etc. Many ignore these, others aren't aware.

Originally posted by SuperBaby
10) Don't ever place your email address directly on your website. The web spiders (or email harvesters) that reach your website will grab it and keep it in its database. The database might be sold to the data bank or spammers. At the end, you will get millions of junk mails.

When displaying an email address, some webmaster will place it in the format of "webmasterXdomain.com" or "webmaster @ domain.com" instead of "webmaster@domain.com". Both are not very good. Who knows if there is a spider/harvestor that is smart enough to recognize it. Some internet beginner might even sent an email to "webmasterXdomain.com".

The proper way of doing it is to display "webmaster@domain.com" BUT substitute the @ with a tiny image. Never link it to "mailto:webmaster@domain.com".

I agree with this. That's exactly what I do.

However, there's a downside to this: other people placing your email on their site, link & all.

Don't use ugly server images for hosting templates!

Oh and don't use bevel/emboss or very heavy drop shadows :)

Originally posted by mwreid
What about using an application to encode the address? Like the free web-based Enkoder offered by automaticlabs-dot-com? (Sorry, can't post URLs yet.) It's worked well for me ... other opinions?
I don't know how that works. But I prefer using a Helpdesk (support ticketing system). I use @1 Helpdesk XP from http://upoint.info/cgi/demo/helpdesk/index_v3.htm . The biggest advantage of using this Helpdesk over ordinary email is that I can always tell whether my customer has read my message to him (when the subject is still bold, it is not yet read).

39) Dont drink while designing a website, it might look good at the same moment but not the next morning :P

Originally posted by talkfreelance
..... Oh and don't use bevel/emboss or very heavy drop shadows :)

I AGREE! it does have to be clean.. stay away from TOO MUCH BEVEL AND EMBOSS. 1 pixel bevel is good, more than that it'll look crap. ( at least for me )

summary.. if you're creating design for big companies, make it pro.. clean, clean, clean... :) no unwanted shadows and outer glows..

1 word... CLEAN! from pixel to pixel.. if it'll require you to zoom 1600% DO SO!

as what the saying says, cleanliness is the best policy. :)

- Theo

40) Opening a new browser window works best for external links, not internal links.

Don´t get inspired by Templates Monster because the law is gonna knockk your door!!

41) Don't flood the whole website with google ads so 90% of the website is ads...
42) If you are still in your practicing stage, don't decide to even release the template on the web, post it on forums first and ask for opinions. If 85% say it is good, go ahead and release it.

Originally posted by traffictest
Don´t get inspired by Templates Monster because the law is gonna knockk your door!!

*buzzer*

If that were true, then there are millions of people who should've been in trouble by now.

43) Don't rely 100% on client side scripting since it could be disabled by the user ;)

44) Using bad language (not grammar wise...word choice wise). Lots of people avoid sites containing profanity (no wonder no one goes to my blog). Also, if your site is geared towards teens, such as gaming sites, many parents install some parental software (there was this one...i forgot is was a major one) and they filter all the sites with bad language.

10. Avoid using frames.

I think frames are alright when it comes to using it for news.

Example: movieweb.com

Originally posted by SuperBaby
10) Don't ever place your email address directly on your website. The web spiders (or email harvesters) that reach your website will grab it and keep it in its database. The database might be sold to the data bank or spammers. At the end, you will get millions of junk mails.

When displaying an email address, some webmaster will place it in the format of "webmasterXdomain.com" or "webmaster @ domain.com" instead of "webmaster@domain.com". Both are not very good. Who knows if there is a spider/harvestor that is smart enough to recognize it. Some internet beginner might even sent an email to "webmasterXdomain.com".

The proper way of doing it is to display "webmaster@domain.com" BUT substitute the @ with a tiny image. Never link it to "mailto:webmaster@domain.com".


Try using this script,

<script language="javascript">
var contact = "webmaster@domain.com"
var email = "webmaster"
var emailHost = "domain.com"
document.write("<a href=" + "mail" + "to:" + email + "@" + emailHost+ ">" + contact + "</a>" + "")
</script>

the advantage is that, if the real user click on it, then it just works like the mailto:webmaster@domain.com and I guess most spam spiders will not try to execute a javascript to avoid crashing… due to errors in script…. And I guess this a more effective way to do it without sacrificing the basic function….

Cheers
:)

The problem with a JS alternative, is that it needs an alternative. For example if you use the above script, you would then need to use;

<noscript><a href="mailto:email@address.com">Email</a></noscript>

Which defeats the purpose of the JS method, since these bots scan the document, rather than the visual output itself.

That's something to add, avoid inconveniencing less advanced desktops. Flash, JS etc. Create alternatives whenever possible.

This is really hepful. Thanks guys. I like Don't use #13 :-D

45) Have a friend who is good in grammar, read over your site.. :)



God this has saved me. haha

My 20 cents, in no order:

1. Using tables for layout;
2. Not allowing for text resize of up to 150%;
3. Designing pages with a width of more than 800 px (there's still 10% or so using that resolution, believe it or not). My pet peave is horizontal scrolling, at least make the content fluid width.
4. Light text light background / dark text dark background;
5. (For businesses if you sell online) Your "contact us" page should have a phone number & address & email address. If you're not putting your address down, then chances are you're not going to get many orders.
6. Not designing for all browsers.
7. not checking your colours on both a mac & pc & in different browsers
8. Flash intros. Typically they add nothing to the site and it deters repeat visitors. (Flash when done right is great - look at the demos that www.citrix.com has for example)
9. clear headings, marked as h1
10. non consistant navigation

Forgetting to cross check browsers, using large graphics, NAVIGATION NAVIGATION AND MORE NAVIGATION!

and ofcourse we try to avoid not getting paid which sadley happens alot to many web firms.

Use easy navigation and PF versions.