bad-web-design-banner

Every once in a while you will come across a page that just doesn’t seem ‘right’. There are three elements of a website that can be harmed by bad practice:

  • The website lacks something in its design.
  • The content is written badly.
  • The search engines don’t like something about the site.

Considering the three points above, this article will explains the do’s and dont’s of certain design habits.

1. Using ancient markup

Websites link directly to technology, and technology is about keeping updated. In the era of XHTML, we need to keep updated with the standards to have solid websites. So instead of using that <br> tag, give the <br /> a spin. Know where to self close a tag or place the doctype. For a good resource for those beginning markup, HTMLDog has good tutorials to learn how it all works.

Bad:

  • Using deprecated markup
  • Choosing not to use a doctype
  • Using table based layouts
  • Self-closing tags that shouldn’t be self-closed

Good:

  • Using the latest and greatest markup that is fully-supported
  • Always using Doctypes
  • Using <div> tags for positioning
  • Using a CSS Stylesheet
  • Validating your markup with the W3C Validator

2. Choosing invasive or distracting backgrounds

backgrounds

When the internet started, people were so amazed that they were able to publish stuff publicly that they didn’t think about readability and presentation. Choose a background that is appealing but doesn’t distract the reader.

Bad:

  • Using a bright red background without a very good reason to
  • Having tiled images that aren’t seamless
  • Using repeating animated GIF backgrounds
  • Using an image that is more eye-catching than the main content

Good:

  • Have an appealing background that does not distract the reader

3. Using “defaulty” fonts

Technology can ruin the glory in a lot of slick typesets, not that Comic Sans was ever glorious. Times New Roman, Times, Comic Sans, Courier, and Courier New are some of the fonts that have been seen frequently and often look unprofessional.

Bad:

  • Using fonts that look untouched and unstyled

Good:

  • Use fully supported typefaces
  • Using the CSS font-family property to so the desired font can fall back on another if it isn’t installed
  • Using fonts that most computers have (such as Garamond) and falling back on fully supported fonts

4. Having similar text & background colors

hard-to-read

Text on a webpage is made for the viewer to read the page clearly and easily. Nearly all websites are built for the user to absorb information. By having the text color the same as the background color, it won’t be as easy to read and Google will penalize you for it. This goes for any text as well. If you have white text on a dark grey background, but there is a background-color somewhere else in the  document that is also white, it also isn’t good for SEO.

Bad:

  • Giving little contrast between the text and background

Good:

  • Have a good contrast between text and background colors without making it white text on a black background.

5. Tables

tables

Tables are an infamous method of content placement used back in the day that fills up your markup with a lot of extra code using <table>, <td>, <th> and <tr> tags. Tables are an excellent and easy to modify way to show tabular data, but when using heavily nested tables instead of DIVs, good luck with editing it. Use <div> tags! See an example of a proper use of tables.

Bad:

  • Using tables for layouts
  • Using tables for anything other than tabular data

Good:

  • Using tables to display charts and other ways of displaying tabular data

6. Bolding too much text

It is good to put emphasis on important text, but by bolding too much text, it dilutes the purpose of making the text bold and just makes it plain hard to read. When used in short sentences that explain a key factor of the paragraph or article, it serves it’s purpose very well.

Bad:

  • Bolding entire paragraphs or pages

Good:

  • Bolding small fragments of important text
  • Bolding text to emphasize form labels

7. Writing for Google, not your viewers

google

You may have seen websites with content that is tailored to try and make the search engines happy. Some people thinks it helps to stuff many keywords in their paragraphs so search engines will like them more. You can notice the difference of how people use “keyword-stuffing” to butcher their website, and Google can understand this even more, and will punish you for it. For example, if Problogdesign.com was to be summarized in a paragraph:

Good description of Pro Blog Design:

Pro Blog Design is a resource for web designers that provides information about creating and maintaining an effective blog with stimulating tutorials and inspiration.

Bad description:

Web Design Blog, Pro Blog Design, is a resource and tool for web designers & website developers that provides tutorials and information for website designers & bloggers about creating effective blogs, maintaining blogs, web design inspiration, blogging tutorials, and more.

You can notice the redundancy in the second description. Search engines generally don’t take this kindly, so please write for humans.

8. Not taking advantage of CSS shorthand

CSS Shorthand is used to turn many CSS properties into one to make the file size smaller and a cleaner document. It is often used for borders, padding, margins, and backgrounds. Use it as oft as possible to optimize your page load time.

Bad:
.class {
padding-left: 3px;
margin-right: 6px;
padding-top: 10px;
padding-right: 9px;
margin-left: 6px;
background-image: url('images/happy.jpg');
background-position: bottom;
background-repeat: repeat-x;
background-color: #E2CCCC;
}

Good:
.class {
padding: 10px 9px 0 3px;
margin: 0 6px;
background: url('images/happy.jpg') repeat-x #E2CCCC bottom;
}

9. Having redundant CSS

Keep an eye out for having redeclared CSS properties. Let’s assume a <div> has another <div> inside it. The parent <div> has a CSS property to change the text color to purple. There isn’t any point of having the same CSS property telling the inner DIV to have purple text because it inherits them from the parenting <div>.

Another example of redundant CSS would be declarations that aren’t in use. Many people don’t use CSS Frameworks because there may be many unused declarations.

10. The absence of a CMS

wordpress

Today practically all websites are built with a Content Management System. The more you add and edit content, the more the search engines will index you. What harm can it do?

Five great content management systems:

  1. WordPress
  2. Joomla
  3. Drupal
  4. ExpressionEngine
  5. Cushy

11. Using default photoshop effects

photoshop-effect

You must have seen this somewhere on the internet. People sometimes use thick (especially red) text strokes or harsh uses of “emboss” or “twirl” that’s been seen so many times that it just looks terrible.
Bad:

  • Using effects too much
  • Using the default effect settings

Good:

  • Don’t rely on Photoshop effects for your work to look good. Use your natural talent
  • You can lower the opacity of the effects so they don’t look so harsh
  • Try to keep away from the default effect settings

12. Not validating

It’s so easy to validate your markup by using the W3C Markup Validator. Always remember that clean code means a better cross-browser, cross-platform result that will have support for many many years.

Validators:

13. Having cluttered content

Compare MSN‘s website to the Dropbox website. The information on MSN doesn’t deliver as effectively as Dropbox, because Dropbox has one button to focus on and MSN has 30 places to focus on.

Bad:

  • Making content closely packed and cluttered
  • Delivering too much information on the homepage

Good:

  • Using line-spacing and padding to spread out your content
  • Having a smaller amount of information on the homepage
  • Using sub-pages to not over-deliver the information

14. Using flash intros

flash-intro

Flash introductions are known as “Google Blockers”. These intros are usually on the root URL of sites, the most important page through an SEO perspective. Most people want to get right to your content instead of watching the video, so it provides as another barrier for getting the information they’re looking for.

15. Using lots of text inside images

Since search spiders can’t read through pixels, it’s best to keep content and images separate. It also takes longer to load the page if the text is inside an image. If you want to take advantage of different fonts that aren’t web-supported, you can always use text-replacement methods that won’t obstruct the SEO (Problogdesign will have a post on this soon, so stay tuned!).

16. Unaligned content

Ensure that images, paragraphs, and DIV’s have proper padding and margins so your page cleanly lines up.

17. The <marquee> tag

Although a really simple, easy effect that has a “wow” factor in the starting weeks of coding, the marquee takes away from everything else in the page, is distracting, and is difficult to read. I’ve actually seen a news site that used an impressive stylish marquee a few weeks ago, although it was the first nice one that I’ve seen in my 10 years of internet browsing.

18. Inconsistent navigation

inconsistent-nav

Try to unify your navigation into a clean, presentable list with a common look and feel. If each navigation item has a different size, shape, color, and position, people will ‘miss’ it as being the navigation.

19. Link building too fast

Building fast links in general has the potential of penalizing or de-indexing your website. If someone makes 100 links in a day when they usually get one or two new incoming links a week, search engines will be suspicious. If you would like to build links, you can be on Google’s good side and use the dofollow search engine and post a few comments every day on blog articles.

20. (Bad) use of animated GIFs

Generally speaking, animated GIFs are bad news that detract people from what they should be looking at: the content. Take a look at the Aiseikai Hospital website. Even with a small amount of information on the page, the flashing GIF images and marquee text make the page present horribly.

21. Images not optimized for web

When saving images as web graphics, it’s best to use Photoshop’s “Save for Web”, which will allow you to optimize it to have a good balance between quality and loading time.

22. No website hierarchy

The most important elements of a web page should be the most prominent. The name, logo, and what you do is usually more important than the headers, and the headers are more important than the body text. Balance out the content on your page so everything is in it’s respective sizes and let the headers describe the copy, so people can skim over it and read the paragraph if it interests them.

23. Having over 100 links on a page

link-farm

Remember when it was common to come across spam pages that were nothing but links? These are known as link farms. Google penalizes websites that have a large number of links on it, especially when there’s no content.

On your blog, try to keep the blogroll short, especially if it displays on all your pages so you ensure you don’t have too many links. Blogrolls also take a lot of space on your page, so you can make it non-intrusive by using a snazzy dropdown.

24. Irrelevant Content

This one should go without saying, keep the content relevant to what the site is about so it keeps people interested in the site. Irrelevant content can penalize you in the search engines too if the <title> tag doesn’t match the content.

25. Typos

Use Spell Chek! You should also keep your eyes peeled for keeping a consistent pattern for how you write words. For example:

Grey or Gray

Web Site or Website

Ex: or Eg: or Example:

26. 404 // Under Construction errors

404-page

Make your 404 page look nice and have links to direct the user somewhere to go. 404 pages are a dead end, and dead ends often mean bounces. By styling the 404 page and providing links, people don’t feel like it’s an end and they can continue where they left off.

27. Use of advertisements

Informational sites like blogs often seek a little bit of compensation through sponsors. Try to fit the advertisements in with the page design instead of dropping them in anywhere. The latest trend is to use buysellads.com (especially for the tech / design industries) and make the advertisements square and grid-aligned, which presents beautifully to the readers.

Bad:

  • Using too many advertisements
  • Having advertisements that don’t “fit” in well with the subject of the blog
  • Having misleading or offensive ads
  • Scattering ads out randomly

Good:

  • Using a moderate number of ads
  • Organizing the advertisements to look nice on your page
  • Selling ad space to pages with similar content to attract targeted visitors

28. USING UPPERCASE TOO MUCH

Most people will see uppercase as yelling and anger. Many internet marketers use uppercase and red text in their online sales pitches which present horribly and end up making them look desperate. Uppercase can look great if it’s in small dosages like headers or navigation text.

29. Midi Music

In most circumstances MIDI music sounds tacky and unprofessional, and unless it’s a site for a MIDI composer, it serves little purpose and distracts the viewer.

30. Getting too ahead of the times

It’s great to be original and create an avant-garde website that delivers efficiently, but relying on experimental markup isn’t the best idea. Especially with CSS3 and HTML5 being released, you have to be sure that the markup is degradable for people using older browsers. For example, if you want to test the new <header> or <nav> tags out, make sure you register them as elements so the older browsers understand. Oh, and looking for a MIME? HTML5 doesn’t need them!
<script>
document.createElement('header');
document.createElement('nav');
</script>

Do you occasionally slip into one of these bad habits? What other bad practices do you think should be avoided?

Enjoy this post? You should follow me on Twitter!