40 Web Design Tips & Mistakes To Avoid...
This list is a basic guideline for anyone new to Web Design or building a website and most of them are just common sense, plus a couple are just my personal opinion but I hope you find it useful.
Another good idea (especially for newbies) is to look at other websites and get an idea first of what you like and don't like before you begin planning or building your own website.
40 Web Design Tips
1./ Plan your site's layout / structure - Good layout is an important ingredient of Web Design. You should draw up & plan your site on paper first, & carefully think what you want / need to include, and where everything will reside within the site too. This should also help ensure your site is easier to navigate (see next point) & that you don't overlook things.
2./ Navigation - Make sure your website can be navigated easily: Just because you know your way around your site blindfolded & drunk, don't expect a visitor to be able to - look at your sites structure & navigation from a visitors perspective & ask yourself whether it is well laid-out & is easy for a new visitor to find what they are looking for.
3./ List all the components you want before you begin: Make a list of all the elements / components you want or need to incorporate into your site - Such as eg: a Shopping Cart, Membership Component, Forum, Download Manager etc. As well as being a useful reference later on, this can help when choosing the type of website or CMS (Content Management System) & template design etc you will need. If you are outsourcing the job, it will be needed when getting a quote, & it helps ensure you don't forget anything too.
4./ Use "Related Articles"etc: Good Web Design isn't just about looks, it also needs to achieve the desired results (sales, readership, etc). So if your website doesn't have an in-built "Related Articles" component, install one - it's one of the best ways to "tempt" your visitors to read more pages (which is great for your site's overall statistics, and it should ensure your visitors spend more time on your site). It also is good for your bank-balance too - the more pages they look at, the more advertising they will see or the more chance you have to sell them something.....
5./ Make sure your main page (usually the homepage) is STUNNING: This doesn't mean it can't be functional or has to look like a art magazine, what I mean is make sure it looks as good as you can possibly make it whilst still being suitable for your market / business needs. The homepage is the most important page in any site, it's the Internet equivalent to a store's shop-front in the off-line world - Make it matter. Make it memorable. Make it tempting & attractive.
6./ Make sure the sites design / template style is appropriate: The style & colors you choose must be appropriate for your particular type of business. So even if secretly you like the Gothic-looking template or the magnificent color-changing super-trendy one, unless you're trying to sell to customers for whom that look will appeal to, don't go there.
7./ Avoid using images for menus: Use text links instead. They are better for SEO.
8./ Don't design advertisements to blend into content (so that they look like site content): Some web designers / webmasters do this because it increases the likelihood of someone clicking on ads (often clicked on by mistake.... and followed by a range of tasty words that I dare not print here....) however not only is it a sure-fire way to annoy your visitors & makes their experience of your site an unpleasant one, it is also against most advertisers guidelines / rules (such as Google's). You have been warned.
9./ (some) Landing Pages / Splash pages: Once upon a time these were common, and many Web Design "experts" insisted they were essential for e-commerce websites as they "forced" the visitor to see the high-pressure sales page in the hope that they would purchase or sign up etc under pressure - instead, most people today will simply leave & go elsewhere as we've been educated in the dangers of online scams by businesses using such pushy tactics as these. Thankfully they are being used less frequently today, and they are probably best left to history. It is important to note that I am not referring to all splash pages or landing pages (in fact, if done well they can greatly enhance your chances of making a sale), just ones which are tacky and or deceitful etc.
10./ Images - Do you have enough / too many? - No-one likes looking at a website that is dull & boring, nor do they want to spend time waiting 10 minutes for pages to load due to too many graphics - good Web Design is all about balance. Make your pages & your articles interesting by including some nice images (& optimize the images so that they load quickly), but don't over do it. You can also optimize the site in other ways to increase page loading speed - see point #11
11./ Speed up your site by optimizing it - There are a number of ways you can optimize your site to increase its speed - You can combine CSS files, use cache option on both your site & the components / modules within it, minify it, etc. You should also be aware that your choice of template can have an effect on your website's speed too....If you are a newbie / non technical, perhaps you should consider hiring an expert to help with this task, as compression techniques / compression applications can sometimes cause problems if you don't know what you are doing.
12./ Don't use a poor-quality template: You might think you are saving money by using a free or home-made template, but it could end up costing you big-time in the long run..... A template designed by a Web Design professional will almost always be faster & safer (not to mention better looking) plus some have optimization settings within them such as cache option to speed them up even more. You website is a reflection of your business - do you really want to be perceived as cheap, tatty & poor?
13./ Don't use too many different colors - If you do, your website could end up looking like a pile of technicolor dogs vomit - A good rule of thumb when choosing website colors is to try to pick just 2 or maybe 3 main colors, that way your website will have a more cohesive look (using shades/variations of the same colors in some parts is okay...). You should probably also learn the basics of colors too, if you are designing your site yourself or if you intend to do a fair bit of web design work. You can easily learn this from art books or art sites. Certain colors - called Complimentary Colors - will "vibrate" when placed next to each other (they make each color appear more vibrant - which makes them great in artwork, such as when Monet used them in his paintings, but some combinations that are fine for artwork are unsuitable for Web Design, and could be unpleasant when viewed on a screen...)
TIP: You can find a range of useful web-links for Web Design in our BIS Weblinks - Web & Graphic Design Weblinks Section, such as color palettes & tools from Colourlovers or ColorSchemer. (Update: due to our recent site renovations the BIS Weblinks section is currently unavailable - sorry. BIS Admin.)
14./ Keep the theme of the website consistent - Once you've chosen your color-scheme, make sure you keep to it throughout the site so that it "flows" (one exception to this might be if you have a section of your site that is different, such as a "Members Community" etc - in that case you could have it in the same colors and design as the rest of the site but use eg: a dark background etc...). Think of it like interior design - you want each room to compliment & match each other.
15./ Don't use too many different styles of fonts: Keep a unified look by only using one or two fonts if possible.
16./ Don't use unusual fonts: Otherwise only SOME of your visitors will see the site as you do, because if they don't have that particular font available on their systems it will be automatically substituted for another font when they view your site........Stick to the basic ones like Ariel, Helvetica, Times New Roman, etc, that way your site should look OK for all your visitors, not just a few.....
17./ Keep essential functions simple: Make sure your vital features, such as your members "Log-in" buttons, don't depend on flashy interactive features in order to work or gain access (such as using a drop-down panel for your log-in). Why? - because if you have any conflicts or errors within your site in the future, or if your visitor's browser doesn't work with those particular things then they won't be able to access them!
TIP: If you really want to use a drop-down etc, make sure you also offer a plain alternative too....
18./ Provide a search function: Just because you know your site so well that you could find your way around it after a night out with the boys and drinking everyone under the table, don't expect your visitors to be able to do it sober... Provide a search tool.
19./ Provide a translation tool: Even if your site is in English you should still show a little consideration for your International visitors & provide them with a tool to translate your website so they can comfortably read it - it is not only good business sense, but it shows them that you are thoughtful & that you care about their needs.
20./ Include a site map: And make sure it is displayed on your home page & every page in the site that is publicly available (the footer area is a good place to put it...). Nowadays you need an XML site map too, for the search engines to easily & thoroughly index your site.
TIP: If you are using WordPress there are a number of excellent free sitemap plugins - my favorites are the Google XML Sitemaps plugin by Arne Brachhold (for search engines only) and the "Dagon Design Sitemap Generator plugin (to create a sitemap for your visitors - it creates a human-readable sitemap, not an XML sitemap)
21./ Use Title Meta Tags:
22./ Use Description Meta Tags:
23./ Use Keyword Meta Tags:
24./ Use Image Meta Tags (ALT & Image Title should both be used)
25./ Use Tags on all your articles & other content where possible - These will also help to ensure the content will be found when searched for.
26./ Avoid Mile-Long pages....... No one has the attention span nowadays (did we ever?) to read huge, long, boring pages of text that just go on & on and on......... and don't kid yourself - breaking them up with cheap-looking cheesy marketing graphics just makes them long AND cheesy... and desperate looking.... if your product is really any good you should be able to sell it without the really hard-sell, desperate, pushy selling tactics - but wait, there's more....
27./ Avoid Slow-Loading pages... Remember that some of your visitors may live in distant countries or areas where super-fast broadband isn't available yet, and furthermore Google now considers page-loading times as a factor when assessing web pages...... and slow loading sites are now being penalized. You can speed up your site by using cache plugins and other methods or tools.....
28./ Don't place content too low or below the fold - What this means (for any newbies reading this) is when visitors have to scroll down the page in order to get to the actual content (text etc) just because the idiot who designed the site put up huge, deep headers or the like..... Good web design is not only about looks, but also useability...
29./ Don't place video or audio on your homepage that is set to play automatically.. It scares the hell out of us...!!, and is highly annoying too. Also remember that people in some countries have slower internet, and this may make your homepage much slower for them.
30./ Don't use too much animation or "Script Bling" - Websites that are lit up like Las Vegas & flashing with animated "script bling" are so 1990's & are passe nowadays, and they can also eat up enough bandwidth just to load a page that visitors in some countries might use up their monthly bandwidth just visiting your site - don't do it, it's annoying & its ugly. Coco Chanel was right - less really is more.
31./ Don't use images of half-naked bikini babes to attract attention (unless of course you're running a porn site....) - Remember that half of your visitors will probably be women (sometimes more, depending on your business), and those types of tacky images can really offend them. They also make your site appear sleazy, tacky, and therefore you & your business too....
32./ Try to avoid using iFrames... And if you do, be sure that you do not violate any agreements with any 3rd party agreements you may have such as advertisers or affiliates etc.
33./ Don't use pop-ups unless absolutely necessary - They are highly annoying & most visitors either have pop-up blockers enabled in their browsers, or simply close them whilst cursing you through gritted teeth... Try to avoid them - unless of course you want people to hate you and leave....
34./ Make sure your site is compatible with the main types of popular web browsers - OK, we know the 9 year old IE6 is almost impossible for most web 2.0 sites to accommodate (some designers are even refusing to work-around it anymore), and luckily for web designers it's now become so unsafe to use that it's being dropped & many are no longer supporting it, so IE6 aside, make sure your site looks reasonable & works in all the main browsers - Firefox, IE 7 +, Opera, Safari etc.
TIP: You can use a free tool from browsershots.org or other similar free websites to check your site's cross-browser compatibility.
35./ Use Flash sparingly - Some flash websites can look amazing, but many of them can be slow to load due to heavy content. Search engines also cannot search (& therefore index) all pages of a flash website, which means those sites will need extensive promotion to get noticed.... A little bit of flash is OK - a lot, and you may find you need lots of benjamin$ to get it onto Google's page one......
36./ Don't build your site using "Frames" or tables - Frames are not used in modern web design, as they cause problems & are not good for SEO. It's also no longer a good idea to have your whole site built using tables - it's bad for W3C compliancy & can look terrible when viewed on different browsers too - Use XHML & CSS instead.
37./ Don't make your site too wide: It's very annoying for visitors to have to scroll across a page (as well as down), so try to make your site no wider than 900 - 1000 pixels wide (........this may increase in time, as monitors get larger....)
38./ Regularly check over your site for broken links- Broken links are annoying for visitors and it's not good for SEO either ( Google will penalize your site for broken links...) . Sometimes however, links that worked 2 minutes ago just seem to break - You need to regularly check over your site to find any links which have gone astray. Also, after upgrading or re-installing software, check their menu links as sometimes they get broken in the upgrade process & you'll just need to open the menu item & re-save it.
TIP: If you have a WordPress website then you can use the excellent free WordPress plugin, "Broken Links Checker" - it checks links automatically in the background and you will wonder how you ever lived without it.....
39./ Create a fancy custom 404 page - Then whenever a visitor hits a broken link (and they invariably will, even on the best of sites) they will see something a bit better, and it's a good idea to include hyperlinks to your main pages & a search function is also a good idea too - that way you’ll keep more visitors on your website when something goes wrong.
40./ Create lots of great, original content - It's no use having a great-looking, W3C valid website if there's nothing of interest on it - You won't be able to attract visitors let alone keep them coming back, and you'll struggle to get a decent ranking too unless you're willing to spend a fortune on marketing. Google loves fresh, original content, and you can also drive traffic to your site by using pinging services each time a new article is published.
TIP: If you have a WordPress website then you can install the excellent free plugin by MaxBlogPress called "Ping Optimizer" (requires free registration to download) - as well as pinging a number of pinging sites it will also prevent you being marked as a "ping-spammer" due to too many pings (WordPress automatically pings the ping services every time an article is published, saved or updated).