I first designed websites back in 2005. I think I’ve made every possible mistake along the way.
“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.
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!
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.
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.
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.
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
h1per 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.