enavu webdevmania tutsvalley psdestination
visit the enavu network
4 Comments Article Title Overlay Article Title

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 [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

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:

     
  1. 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.   
    badvsgood_links   
       
  2.  

  3. 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.   
       
    badfonts   
       
  4.  

  5. 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 */

  6. 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 1024×768, 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.

  7. 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.

  8. 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.

  9. 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

    sitemaps

     
    With one easy click you have access to all the areas of this beautiful website.

     

  10.  

  11. 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:

     
    brand_colors 

     

     

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Related posts:

  1. 10 Important Tips and Tricks about using DreamWeaver
  2. Top 6 Most Usable and Useful Free Icon Sets
  3. How to plan out a new website – Definitive Guide
  4. Mock Design Slice HTML CSS JavaScript – Modern Approach to Creating Websites
  5. Mobile Devices and Websites in the year 2009

Did you absolutely LOVE this article... share it!

Comments

  • I agree with all you said.
    Also you shouldn’t use ajax or flash to display content, it’s rude for mobile users.

  • From what I was told from an instructor, using the fluid layout is not so great. He showed examples, and also ones that I’ve seen on m own, of text become jumbled.

  • You are sort of correct Val. Completely fluid designs are not suggested, but hybrid between fluid and static are very nice, checkout Digg.com for example.

  • I just came across your blog and it was great for me to find out that you are discussing the same problem I am facing now with my website. I was just considering factors which determine its usability. That’s really much helpful. Thanks a lot.

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting