28
th
Oct
8 Tips and Tricks on Developing Usable Websites
Simple 8 steps to creating more usable websites.
I feel like so many web developers whether beginners or experienced make little mistakes that make the overall website usability diminish. So I have come up with a list of tips/tricks that will help you either fix your existing websites or help you create better websites from the get go. So here we go:
- Links can be distinguished from normal text:
Don’t get me wrong I am not saying you have to keep the original poor blue color that html offers you, but you want to make your website usable. So to accomplish usability you will need to choose a color that truly stands out from the normal text. It is definitely a benefit to use text-decoration: underline but it is not mandatory. Also as a SEO tip make sure you enclose your links with valuable text in between the ahref’s. For example instead of making a link that has <a>here</a> make your links <a>click here to download the demo</a> also use <a title=””>.
Here are two different blocks of text, look carefully and you will know what i mean.
- Don’t use an extensive amount of fonts
This may not be a common mistake but if you don’t create a strong CSS structure you may fall victim to the too many fonts problem. So here are a couple of ways to make sure this doesn’t happen to you:
- Create a typography.css stylesheet that will contain all your main text styling. So whenever you need to modify how text looks you keep all your text styles there.
- Only specify one font in your body style and then you can only specify a different font for your h1, h2, and etc.
Excessive fonts can create a certain discomfort to normal users. Also the persistence of fonts unifies your website interface.
- Use ahref padding for larger clickable areas
Make it easy for your users to click on things line menu items and other navigational elements. With the size of today’s monitors it’s nice when you are able to click on a anything by getting close to it rather than trying to get that little hand of a crosshair to hit the text. To do this simple improvement just add padding to your anchors… should look something like this:
a.menu {padding:2px 3px; /* using top/bottom padding of 2px and left/right 3px */ Make everything bigger… well almost
So as I mentioned before monitors are supporting higher and higher resolutions, so you should create websites with that in mind. By that i mean the number 1 resolution on the web is 1024x768, hence websites that are 800px wide are not necessary, 960px is the new 800px. Also another concept you can scratch is below the fold. Studies show that people will actually scroll below the fold. Now I'm not saying place all your important content below the fold, but know that people will see the things below as well.Graphics to help usability
Some people underestimate the power/importance of graphics. A picture is a thousand words, and in web development that means that using graphics in a website to hint as to the part of the page will simplify the job of users to decipher your websites. This can be for example using a leading image inside a weblog to sum up an article, and it could also mean adding icons next to links to hint the user as the action they will be performing upon a click.Using a fluid layout to display more information
I lay in my bed sometimes wondering why my blog is one of the only blogs on the internet to use a fluid layout. The reason I created this blog with a fluid layout is so that people with larger monitors will bear the benefit of seeing more articles, and more of an article in one page. Fluid layouts allow for a page to spread fully across a browser allowing the user to see more content than a fixed layout website which requires more scrolling, although scrolling is a common task of the new age internet surfer, removing the number of scrolls to the user makes the experience richer.Simple and to the point navigation
You would think that websites today are made with extremely easy navigation given the low attention span of internet users, and the inability to spend time searching a website for what the user needs. Well this can easily be corrected with clearly named navigations, drop downs for more precise information under a navigation link, and of course good old sitemaps. My favorite example is of course expressionengine.com
With one easy click you have access to all the areas of this beautiful website.Choosing a color scheme and sticking with it
I suppose it is rather rare that I find a website that has too many colors, but I think where the real tip here is in the pre-building phase. Picking a color scheme for a website is important, colors on the web can act as a great tool to express a websites main focus. Here is a quick rundown on colors and their meanings:
Related Articles
Most Popular
- Top 10 CSS Snippets
- Web Application Interface Design Guide
- 10 Important Tips and Tricks about using DreamWeaver
- 8 Tips and Tricks on Developing Usable Websites
- Top 10 jQuery Modal Box Plugins
- Fancy Glowing Login Box
- Star Rating For Expression Engine (using jQuery)
- Interview with Jason M. Putorti - Deux
- 7 Design Elements and Techniques that will make your Website stand OUT!
- jQuery for uttermost beginners (video)
