My Biggest Web Design Mistakes And How To Avoid Them

I first designed websites back in 2005. I think I’ve made every possible mistake along the way.

web design

“If I could do it all again I wouldn’t change a thing.” Scratch that! That’s rubbish! If I could do it all again I would cut out the bit when I was banging my head against a brick wall because I couldn’t figure out what was wrong with a website. So here are all the mistakes I’ve made and the ways you can avoid them so, hopefully, you won’t go through the same pain as I have.

Putting too many colors in

When I started web design I went crazy with the new RGB palettes having come from the dull CMYK world of print. The result? Too many fluorescent reds, blues and greens all over the place. Visitors would not know where to rest their eyes.

Not putting enough color in

I then went to the other extreme choosing one corporate colour for a website and sticking with it. The result was a very boring looking pages that would resemble a company report from the mid-1980s.

The solution: pick two complimentary colours for the branding of each website. And always add an image “above the fold” of each page. This insures both color consistency and variation.

ugliest website ever

Putting too much stuff in a web page

Putting too much in a web page is a “double whammy” of web design disaster. There are too many elements competing for the visitor’s eye and the page loads slowly. Extraneous elements on a webpage can be:

  • Too many social media share buttons (Facebook, G+, Twitter, yes; Tumblr, DesignShare, StumbleUpon, no!)
  • Too many badges on the sidebar
  • A sales page with too many competing messages
  • Too many links across the main navigation bar

The solution: pick just one message you want to convey on a webpage and keep it simple, stupid!

Font inconsistency

I could’ve lumped this together with the point above but it’s so important it deserves its own subheading. In the days before Google Web fonts and we had to make do with Verdana, Trebuchet, Arial and Georgia. And when web fonts came out some of us went a little crazy.

The solution: never use more than two font families on a web page and never use many more than two weights per font family. This goes for any type of design, not just web design.

unscannable and scannable text

Not making a page “scannable”

On the internet you should avoid blocks of text more than five or six lines long.

The solution: Break up text with new paragraphs, subheadings, block quotes, images, and, if all else fails, create new pages for the extra text.

Not optimizing images

I see this web design crime committed on a regular basis by bloggers. A simple 300 pixels wide image that should be a 10k JPEG is a 300k PNG.

The solution: Use Photoshop or online image editors to make sure the file sizes of your images are as small as possible.

Using images from Google image search

Try to use images that are free to use. If you don’t know if you should use a particular image, you shouldn’t be using it.

The solution: My two favorite free image libraries at the moment are: RGBstock and stock.xchng. There’s always Flickr Creative Comms search. And get creative with image editors!

Inconsistency of interface

Some designers can over-design and want to make every web page of the website different.

The solution: make sure there is always at least a home link at the top of the page so that users know where they are and can navigate out if they wish.

Not following web design standards

There are no “web design standards” as such. However there are a few unwritten rules that appear to be followed on websites across the board, for example:

  • Have the site’s logo top left of the header that links back to the home page
  • Always have a different hover style on text links
  • Always have an image on every page (see above)
  • Never run text across the full width of a web page

If you fail to comply with any of these “standards” you run the risk of confusing your visitors.

Ignoring legibility & readability

Designers usually have very good eyesight and sometimes love to contrast tiny body text with a huge headlines. It might look cool but can your grandmother read it?

The solution: always create text larger than 16 pixels and make sure the colour of the text in the background it is written on have sufficient contrast.

responsive website design

Not making a website responsive to mobiles and tablets

Back in the day I remember using a WordPress mobile plug-in and different mobile versions of websites.

The solution: now I always create websites with mobile responsive themes and media queries in the CSS to make sure they look great no matter the device they are being viewed on.

Crimes against speed

Web page loading times are all important – not least in terms of SEO and user experience. Here are some ideas to speed up your website that I’ve learned over the years:

  • Use a caching plug-in for WordPress (W3Total Cache or SuperCache)
  • Use a CDN (I use MaxCDN)
  • Use a good host (I use Vidahost)
  • Optimize your images (see above)
  • Use image sprites
  • Use a reliable, well-supported WordPress theme (I use Genesis)
  • Use reliable, popular, well-supported WordPress plugins and don’t use too many!

Crimes against SEO

There are several SEO best practices that you have to incorporate into your websites as standard.

  • Always writes good filenames and alt text for images with keywords in them
  • Vary the title, heading and meta description for every page on your website
  • Make sure the titles, headings and meta descriptions include keywords
  • Never have more than one h1 per page (or per section of page in HTML5)
  • Enable “pretty permalinks” – make sure all the URLs have keywords in them rather than numbers
  • Follow standards – make sure your HTML and CSS validates, as far as you can.

What do you think?

What web design mistakes do you make? Have you got any other solutions or best practices that I missed out?

I hope some this helped you out and, if it did, remember to share with your audience or drop me a line in the comments.

Comments

  1. says

    I just had to laugh at what you said about the use of fonts. Absolutely true what you say yet the world went through the same thing in the late 80s and 90s when cheap DTP packages became available. Then magazines and leaflets ended up being produced that had 5 or more fonts on them.
    Yuck and the same is true of some web designs today.

    Lots of very valid points that anybody creating websites needs to consider

    • says

      Haha, that’s funny, the same thing happened in the print world as well as the web world. People get too many toys to play with. Great to see you here, Ian, come again! :)

  2. says

    Hi Rob, Talking of too many toys… my first website avoided most of these mistakes (yay me!) Then I added a Flash animated intro with music! (why did no-one slap me?)

    These days I believe anything that moves or makes noise without the users control is a big mistake. Auto sliders and popups are still popular with owner and designers and still hated by users.

    Here’s a tip. Presently I’m having to convert hundreds of 700+ kb PNGs that are 80% bigger than they need to be. Many (perhaps most as it’s not in Photoshop) don’t know about 8bit pngs with alpha transparency. Here is a good way to test this https://tinypng.com/ (for those who don’t have Adobe Fireworks).

    There is also a WordPress plugin that uses the tinypng service to reduce the resized versions. Unfortunately WordPress gets confused with 8bit PNGs and make small sized versions with even larger file sizes by default.

    Hope the London weather is improving!

    • says

      No, the London weather is not improving. I’m on my 7th cold of the winter and I’m about to renounce citizenship.

      “Anything that moves or makes noise without the user’s control is a big mistake” – David, you’re a genius. You should blog and write novels to become Amazon bestsellers. That’s so true. Shame on me that I use sliders. You’re right about pop-ups. People defend them by saying “they work”, however, I’ve always disliked them.

      Thanks for that batch PNG optimizing site. I would have employed Photoshop Actions for that job.

      Yours jealously, Rob

      • says

        Rob, there will always be a warm welcome for you here if you find yourself in Goa.

        I become 50 on Sunday so I think my flash of genius is nothing more than the ramblings of a grumpy old man, but much appreciated nonetheless. :-)

        You’re spot on with the Photoshop actions, but inexplicably Photoshop doesn’t handle 8bit PNGs with alpha transparency. In fact I think Photoshop may have been the culprit. TinyPNG does sell a Photoshop plugin though.

        I’m really pleased you did this post. I suspect I will be referring many to it.

        Don’t be too envious. The internet is frustratingly bad here at the moment.

  3. says

    Good tips on how to make your site user friendly. I am not sure how mine is? In fact, I can do with a second opinion. I like the idea of not using too many colours, nice and simple is the best way to go. Great tips on SEO as well.

    • says

      Hello Shalu, I think your site looks and works great considering your target market. I think speed is an important factor and anything you can do to increase the download speeds is worthwhile. Thank you for your comment, Shalu.

  4. says

    Great stuff Rob
    Could not agree more, and hopefully I have not missed any of these and committed a crime!
    I actually wrote a piece on a similar topic today – the importance of web design. I think so many people are busy with their blogs or businesses that they forget the fundamentals (or don’t even know them :>)
    thanks for the post
    ashley

    • says

      Hello Ashley, thank you. I don’t want to be cast in the role of the web design police. These were just suggestions. But, yes, I think a lot of bloggers overlook design – probably because they believe they lack the skills to improve it whereas that isn’t always the case. Thanks for your comment.

  5. Arun says

    Hi Rob
    I read your article.Its quite useful(as always).Thanks for such a great article covering all the basic yet important aspects in web designing.But rob i’ve a doubt … Can i use multiple h1 tags in a page (by adding multiple section tags and each of them containing one h1 ) ?

    • says

      Hi Arun, thank you. Short answer: yes. Long answer: this is only with an HTML5 page and don’t use sections excessively (use normal <article>, <aside>, <footer> type sections). There will be no SEO benefit in doing this – it’s just a different way of marking up a webpage.

  6. Marcel says

    Hi Rob,
    Great article as always. I read something about the KISS theory in “putting to much stuff on one webpage”, Keep it Simple, Stupid.
    Heard that same rule also from the famous wild life photographer Moose Peterson. It is so true

    Regards,

    Marcel

  7. says

    I agree, I’ve only been creating websites for a couple of years but I always try and keep things clean & simple. I think about the end user & what they what to achieve when they visit the site. I think some sites are overloaded with sharing buttons & sign up forms. Thanks for the article!

    • says

      Hello Angie, thanks for the comment! Keep it simple is definitely good for web design. And, another great rule you have, “think about the end user” – you can’t go wrong with that!

  8. Cesar says

    This article is great, i’m sending it to my favorits. I’m new in web design and this article it is helpful for me. Greetings from Guatemala.

Leave a Reply

Notify me of followup comments via e-mail. You can also subscribe without commenting.