Tips and Inspiration for bloggers, webmasters, and internet marketers

Steve Reynolds goes over some common mistakes beginning web designers sometimes make.  Jake O’Callaghan edited the post and added some of his input.  Do you want to guest post?

In web design, it’s the little things that matter.  A little mistake here, a little error there, and suddenly, your design just got much worse.

That’s why it’s important to correct the little mistakes.  The following are the most common web design mistakes beginning web designers make.

31 Web Design Mistakes

Navigation

Pages without navigation:

If you don’t suggest them an option, visitors are more probable to close your page than to hit the browser’s Back button.  Every website should have a easily assessable menu.

Unpredictable navigation:

Have you ever gone to a grocery store you visit often, and they have re-arranged everything?  I’m sure you were pretty annoyed that you couldn’t find what you wanted.  It’s the same with navigation:  once the user learns how to use your website’s navigation, don’t modify it on him.  

If you absolutely need to modify the menu, you might want to write a post or article explaining how users can access content.

Menus that move and change: 

Nothing is more confusing to a visitor then a menu that was on the left side changes to the right side when he visits another page.  If a menu suddenly adds more items, it can also be confusing to the visitor.  Use menu moves and changes with caution.

Links

Broken links:

Avoiding broken links is as easy as clicking on them, and checking if they go to the website or page you intended..  You might be surprised at how many broken links you have, and how easy it is to fix them.

Hidden links:

Make links easily recognized by using a contrasting color.  Your color should be clear enough that it doesn’t make the link hard to read.  Also underline links; this is the universal symbol that text is a link.

False links:

Underlined text and rollover images scream link, so only use these techniques for links.

Headlines

Restyling text instead of using heading tags:

<h3> is not the same as big paragraph text.  You have to realize the heading tags are for SEO and design.  Don’t use them to make text bigger; instead, increase the font size.

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.  This method can be effective, but only do it for a short amount of text.

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, and isn’t good structure wise.

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.

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:

Making reading harder for readers is probably the number one sin of web design.  When in doubt, use use white backgrounds for text.  

Too much styling:

Using too many fonts, styles, weights, sizes and colors is purely too much, and annoys readers.

Images

Images in web design without the alt attribute:

Search engines can’t read images, so they created the alt attribute.  Use it!  It allows your images to show up in image search, and allows users with images disabled to understand what the image is about.

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 use flash, 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.

Miscellaneous 

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.

Too Many Colors:

Use two primary colors and a third secondary color.  This creates consistency in a design, making a website much easier to look at.

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.

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.  It is highly recommended that you use a contact form, rather than just hyper-linking your email address.

Auto-play sounds:

Unexpected sounds are frustrating particularly in an office or classroom.  They are a great way to piss off visitors.

Opening too many windows:

confusing user with too many new pages on screen every time they click on a link is annoying. 

Failure to check for cross-browser inconsistencies:

Your website should work on Macs and Windows, in Explorer, Chrome, Firefox and Safari. If it doesn’t work then you’ll drive visitors away.

Do You Make Some of These Mistakes?

Chances are you do, but that’s okay.  Web design is a learning process:  you are going to make mistakes, but they are okay as long as you learn from them.  To me, that is what web design is all about:  trial and error.

Correct the mistakes you have made, then read over this post again.  Ask yourself:  am I doing this as you read?  With every mistake you correct, you are closer to having a great design, and becoming a better webmaster.

 photo credit: Digital Markketing

{ 1 comment }