Common Web Design Mistakes
Everyone makes mistakes within web design, even those that have been coding sites for years can still make some of the most common quite obvious mistakes while building a site. Here is a list of common web design mistakes from the top of my head.
Designing Without Content
This is the most important advice that will be given in this article, remember that a website is about the content and not the design. Even when you are designing a portfolio site you are designing it to show the content of the site and not just that sites design. So always know what is going to be on the page and fit the design around the content and not the content around the design.
Page Titles
“untitled document” probably one of the most common page titles out there, this is the standard title that a WYSIWYG editor will give, and one a lot of people seem to forget to change. This one meta tag can help you get people from a search engine to your site, so make it say something about the page, so that when they are scanning down the list of results it is easy for them to see what it on your site.
Organised File Structure
This is more for your piece of mind rather than a users, keeping your files well structured will help make updates and finding thing a lot easier. It may sound like an obvious thing not really worth a mention, but there have been many times I have taken over a project from another designer and they have had no file structure to the site what so ever.
Splash Pages
Be it flash or simply a logo with “click to enter” next to it, a splash page creates that extra step between the client and the information that they are after. Ask yourself what does this page actually add to the visitors experience, yes it may look nice but is it really a necessary step that needs to be taken on the site?
Horizontal and Vertical Scrolling
Scrolling is one of those things that is usually needed on a web page, but chose one or the other. Having both horizontal and vertical scroll bars on a site makes navigating a page more complex, and can make the usability of the page too awkward. So do your research and find out what the smallest screen resolution your target market uses then make sure that the site fits that size.
Design Consistency
All pages on your site should be recognisable as your site, keeping elements of your layout the same throughout a site will help the user know that they are still on the same site. If you change the layout drastically from page to page it could create confusion and cause the user to navigate away from your site all together.
Navigation
Navigation is key, without it the other pages on the site will be inaccessible. Remembering these key points will help make sure that a user will not get confused.
- Keep the main navigation in the same place
- Don’t use hover effects on anything that is not a link (with the exception of table cells)
- Underlining and colour changes used together within blocks of text symbolise a link, try to avoid using this style on non-links
Headings
Headings are important not just for SEO but also because they help break up various sections, two common mistakes often stem from heading tags.
- Using a heading tag just because its default size is the right size for what you need. Headings are not for design elements they are structural, as such if you need to change text purely for design don’t use a heading tag, create a style to do it.
- styling text instead of using a heading, <span> or <p>is not the same as using <h1>, if something is meant to be a heading then use a heading.
Text is text
The internet is text based so make sure your text is presented as text and not as an image. Images can’t be read by search engines or screen readers, so the usability of your site will be seriously damaged if you make your text as an image all in the name of design.
Too many breaks
<br /> <br />isn’t a good way to format text, be it a list or a paragraph, use the correct elements for whatever you are trying to do and it will make formatting the spacing between your text a lot easier.
Also let your text drop to the next line naturally rather than creating line breaks with a <br />. Different browsers have slightly different text formatting so what might flow naturally in one browser could look a mess in another.
Colour Contrast
Be sure that your colours have a high enough contrast from the background, this way you will know that it is legible to everyone and not just those with good eye site or their monitors calibrated correctly Check out the colour resource for a few useful contrast checking tools
Tables
No this isn’t a don’t use tables for layout rant, its a use tables for tables rants. When looking at code many times I have see people not using tables when they should just because they have been told not to use tables. Remember its not about never using tables it is about using the correct elements for the job, if you are showcasing tabular data don’t do it using divs do it using a table…that is what they are meant for.
Compression
Even in the age of high speed internet compression is still important, compressing your images not only means faster load times for those viewing your site but also less bandwidth used up on your server.
Overused Flash
Flash can help lift a design and create some nice graphical effects within a website, but just because you can use flash doesn’t mean that you should use it to create an entire website. The rule of thumb should be if you can do it in HTML then do it in HTML, flash is great for animation and creating something for a certain target, but if you are simply using it to build a site that could be done without flash then it doesn’t need to be used.
Also worth noting is if you decide to create a flash splash page make sure your skip button is in html, that way it is easier for those who have seen it or don’t wish to watch it again to skip ahead and those that don’t have flash player installed to access the content.
Auto Playing Sound and Video
Unless you have told your visitor that they are clicking onto a page which has a video or audio on it then don’t auto play. Let the user decide if they want to watch or listen to what ever. This includes background music, you may think that it enhances your site but let the viewer decide if it is going to make your site better for them.
Best Viewed In…
The majority of internet users don’t know what a browser is, so to them if your site doesn’t work in the browser they are using then they will go elsewhere. So always check that your site works in all popular browsers and stay away from the mentioning or even thinking about mentioning the words “best viewed in” on any site you create.
Easy to Scan
Break up large quantities of text and make the whole site easier to scan through, this will make the site more user friendly as it will be easier for visitors to find what they want.
Resizing the Users Window
Never ever ever resize the browser window without permission, the user might have their window set to a certain size for a reason, so resizing it without their permission is one way to annoy them. If your site would look better full screen then have a button that allows the user to make it full size this giving them the option to view the site how you think it is best viewed rather than forcing it on to them.
Registration Required
Ok some sections of a site require registration, but make sure this necessary before doing it, as you will find that more people will be less likely to register if they can’t access pages such as the home, about us and contact without registering.
Explain Your Site
Not everyone who ends up on a site will know what it is for, so make sure that a viewer will understand what your site is about within a few seconds of landing on it
Don’t Keep Secrets
Let your users know what they are opening if it isn’t a standard web page, things such as pdfs and word documents should be clearly labelled so as to not lead to any surprises when opened.
Avoid Pop-ups
The majority of browsers have a pop up blocker built in as it is, so chances are if you use a pop up then most people won’t see it anyway.
Avoid JavaScript
JavaScript can add some great effects to a site, however much like with flash only use it to enhance the viewers experience, if it can be done without JS than do it without it. One example that is very commonly misused is image link hovers, this can be done with CSS and doesn’t need the overly too much JS code.
Also make sure if you are using JS that the website is still usable when the JS is switched off.
CAPTCHA
The whole point of CAPTCHA is to stop bots from spamming your email, comments, registration…etc while still allowing humans to be able to get past it. If you require this form of protection on your site then please remember to make sure that the text is still readable.
Ads on Site
pop ups, pop unders, links within the main text, side banners, google ads, top banners, there are so many different types of advertising out there. What this doesn’t mean is that all of it needs to be used on one page. Be selective when choosing the type of advertising, do some research on the best type of advertising for the target market,and don’t swamp the visitor with too much. As even if you are trying to make money from a site, the site still needs to be usable and generate traffic.
Blogs
Blogs are a great way to create a ever changing website, they can help with getting return visitors and also with SEO. However a common mistake in having a blog is thinking that just installing the blogging platform helps the site, if a blog isn’t updated all the time it can do more harm to a site than good. As it can make the site look abandoned and could put visitors off using it.
Ask Permission
When someone registers with a site always ask their permission before signing them up to anything other than the site, things such as emailed promotional offers and newsletters should be agreed upon rather than just sent out.
Hit Counters
These are so late 90′s yet they still get used, if you want to know how many views a page has had use a stats tool such as google analytic to gather this information, instead of an ugly counter graphic.
twitter
forrst
google+
Rss
14
Comments
Hi Dizi
Great post there – was very pleased to see ‘the internet is a text based medium’ making an appearance.
The good old days, eh?
!b
Thanks !b :wub:
It is scary how many people forget that it is, and think that it is all about the design and how the text looks rather than if it can be read.
Great article Helen
loving it!
I’m adding it to my Delicious. Two things though:
Under the title ‘Explain Your Site’ you’ve misspelt ‘user’ as ’suer’ and the first title ‘Designing With Content in Mind’ makes it seem like designing with content in mind is the wrong thing to do.
Thanks Luke, the mistakes you pointed out have been corrected :tup:
You’re welcome Dizi.
One thing’s bothering me though: what’s the banana for?
!b
Well it’s for hitting people over the head with when they ask what the banana is for.
:wub:
Could’ve ended this article just before the heading “page titles” and it would have covered 90% of the mistakes out there!
Great stuff – a really talented designer talking about content is amazing enough, but to put it at the heart of design? I love you!
Now if you could follow this up with top 5 list of Photoshop grunge effects I think you will have covered the entire design process!
teehee it would of saved on a lot of writing time if I had done that.
:huh: Although I would like to know how you knew what my next post was going to be about…it was a closely guarded secret.
:wub: :tup:
Another great article pixie, well done
(small spelling mistake though… In the “navigation” section, third bullet-point. “none” should be “non”)
:wub: thanks Scott, when I was writing down the list for this one, one of the originals was going to be spelling and grammar…then I remembered that my spelling and grammar is atrocious and decided to leave it out
Shouldn’t have stopped you lol. Have you not read the post on grammar on my blog?
Keep up the good work Pixie :wub:
Great article – need to show it to some of my clients!
While we’re on the subject of typos it should be “etc” not “ect” (in CAPTCHA)
:wub: thanks Kate
The typo has also been corrected thanks for pointing that out.
@Scott, ahh yes your article expressing how fond you are of horses.
Trying to convince clients having splash pages and hit counters is a HUGE mistake is one of those up hill battles for me.
Nice site full of useful information I hope you keep up the quality.