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!
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.
In the realm of web design, fonts are more than just text; they’re an integral part of your brand’s visual identity. A skilled graphic design studio understands this importance and can tailor fonts to perfectly align with your brand’s personality and message. Whether it’s customizing existing fonts or creating entirely new ones, a professional studio can craft typography that speaks volumes about your brand. So, while the temptation to experiment with a multitude of fonts may be tempting, entrusting the task to a graphic design studio ensures that every aspect of your website, including its typography, reflects the essence of your brand.
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.
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.
Awesome guidelines Rob!!! Hats off
Thank you, Babli
good checklist on how to do a website well
Thanks again, Louie
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
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! 🙂
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!
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
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.
Wow, Happy Birthday, David. 50 is the new 40, right?
High speed internet is a basic human right 😉 even the internet being slow at times could be good because it could force you to work offline and then on when you can, cutting down the time on Facebook watching cat vids.
You could maybe connect with Shalu Sharma who has also commented here – you’re both in the Indian tourism space!
Ha ha. I’m treating it as the new 65.
Shalu’s blog is great. I will read more of it – thanks for that.
🙂
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.
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.
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
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.
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 ) ?
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.
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
Hi Marcel, I didn’t know about Moose Peterson, but it’s a good rule. 🙂
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!
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!
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.
Thank you, Cesar. Possibly my first comment from Guatemala. 🙂
That’s good, for shure, it wont be the last. 🙂