Web Design: +30 Mistakes to Avoid

Whether you develop a website from scratch or you have an exisiting website, there are certain mistakes that one should avoid. The following are the most common web designing mistakes made today while developing your website.

This is a guest post, make sure to check out all the other guest posts here on Serradinho.

Web designing is hard work and takes a lot of thought and patience. One has to have all their ducks in a row and comes with lots of experience.

Navigation:

• Pages without navigation: If you don’t suggest them an option, visitors are more likely to close your page than to hit the browser’s Back button.
• Broken links: Take care of it.
• Hidden links: Make links easily recognized by using a contrasting color; underline them, and using button images or changing the rollover state.
• False links: Underlined text and rollover images scream link. Use them carefully.
• Menus that move: Launch reliable navigation zones and glue with them.
• Unpredictable navigation: Once the user learns how to use your website’s navigation, don’t modify it on him.

Headlines:

• Restyling text instead of using heading tags: <h1> is not the same as big paragraph text.
• Using heading tags for design: Headings are structural elements and should be used to define the reason or point of the text they encircle. Don’t use them just because you want big bold text.

Body Text:

• Using images for text: Text in images can’t be read by search engines.
• Justified type: It’s hard enough to make justified text look respectable on a static printed page. On a dynamic web page it’s nearly unfeasible.
• Using <br /><br /> instead of <p>: It will make formatting tricky.
• Using <br /> to control line breaks within paragraphs: Let the browser choose where your lines break within paragraphs. If you compel the issue you may get odd results as not all browsers size type exactly the same.
• Typos and grammatical errors: Use your spell checker and check out 10 blatant grammar mistakes that make you look unintelligent.
• Type too small: Really, 9 point type on a printed page isn’t contented for most people. On screen it’s illegible for anyone over 30. Except for the small type you’re trying to make unreadable 12 points or even 14 should be your minimum.
• Too little contrast between text and background: It’s really hard to read for anyone.
• Using non-breaking spaces to align type: For tabular data always use tables. To give position type as a design element use CSS styles.
• Ransom note styling: Using too many fonts, styles, weights, sizes and colors is purely too much.

Images:

• Images in web design without the alt attribute: Search engines, screen readers and that little text box that from time to time pops up while your mouse is over an image all use the alt attribute. You should use the same for web design.
• Jigsaw puzzle graphics: Don’t piece images more than required. Each slice needs an extra call to the server.
• Resizing images in the browser: Resize your images in your image editing program previous to placing them on your pages. Images that are gust up in the browser lose superiority and images that are reduced in the browser boost the loading time of a page.
• Improper image format: JPEGs are best for photos and incessant tone images. GIFs are best for images with large areas of flat color. Also, see-through GIFs are prone to ghosting if used wrongly.
• Use of transparent PNGs without Explorer fix: PNGs offer true clearness but it doesn’t work properly in Explorer 6 without a JavaScript fix.

Animations:

• Unreasonable Flash: No matter how unbelievable your Flash splash page is, nobody actually wants to watch it more than once. If you must ‘Flash’ yourself, at least give a ‘skip animation’ or ‘skip intro’ link.
• Non-stop animations: Let your animation cycle move around for few times and then stop it before it gets overly bothersome.
• Too many animations: More than one animation on a web page is just irritating.
• Use of the <blink> tag: Thankfully most of the browsers ignore it.

Philosophy:

• Sheet of paper pages: Your screen is not so wide, that things don’t unavoidably stay where you put them and, when you get to the bottom, you can scroll. Take advantage of the design potential those attributes and others offer.
• Puzzling content and design: HTML tags such as P, H1, H2, etc. are structural elements; they show your page appearance. Organize your content using HTML and generate the design of your pages with CSS.

Miscellaneous:

• No contact information: The purpose of a website is communication. Make sure people can contact you if they’re interested in your work, product or service.
• Dependence on email links: E-mail links only work if the user has an email program available and correctly configured. And you can just hyperlink your email address. Use it.
• Failure to act in response to contacts: It is good to ignore spam but, when a rightful visitor takes the time to contact you, a quick reply is just good manners.
• Auto-play sounds: Unexpected sounds are frustrating particularly in an office or classroom.
• Opening too many windows: confusing user with too many new pages on screen every time they click on a link is just not good.
• Failure to check for cross-browser inconsistencies: Your website should work on Macs and Windows, in Explorer, Firefox and Safari. If it doesn’t work then you’ll drive visitors away.

Final Thought

I hope this guest post has helped you out in knowing what mistakes to avoid in web design. You could also have a look at some of the web tools that can give you an advantage over the rest.