8 Web Usability and Best Practices for Beginners
Digg 42 
Stumble ThisAs a web designer when you are coding and designing website, it is your job to make sure that the site is user intuitive, friendly and easy to navigate. Although these are basic work ethics for every web designer sometime you might miss out a little things here and there, that might get under front end user skin. Nevertheless, maybe you are starting your way into web design. Here are eight web usability and practical tips for beginner web designer.
The first thing you should always remember is commenting your codes ( HTML, CSS, JavaScript). When you are building applications or web page, it is really important to comment your codes because this way you can easily keep track of the work flow. If there is a lot of div’s or a long stylsheet it can be frustrating when debugging. Also, for instance if you are working in a group commenting is way to let your colleague or acquaintances to know where to look when debugging or making any changes.
Some Commenting method:
- HTML/XML/XHTML – <!– HTML Comment here –>
- CSS – /* CSS Comment here */
- JavaScript & PHP- // JavaScript Single line Comment here.
- JavaScript & PHP /* Multiple line JavaScript Comment */
2. Properly Title Web Pages
Sometimes when web designer’s are creating website they forget to properly title or leave it blank. The web page title goes between <title></title> tag and shows up web browser’s header. Try to keep the title simple, clear and Understandable. Do not use too many tags in your title, these will make the title absurd and too long. Instead describe the site inside the meta tag and keywords. Your title is not meta. Moreover, do not just leave your title as http://yoursite.com because it shows that you could not come up with something to describe your or your client site.
3. Change Link Appearance on Mouseover
Changing your links color or background is must for user visual experience and usability. If you are using image use JavaScript and CSS sprites to change image on Mouseover. For example here is a website that has really great design. However, the navigation menu or buttons throughout the site does not change when you hover. It is a turn off on the user end. If images are hard to either make CSS Sprites or rollover why not use jQuery tooltip to make your site user friendly.
4. Link Your Headers and Logos
Although this sounds like dumb tip you would be surprised to see how many websites do not link their header or logo. Linking the logo or headers gives reader an easy option to get back to homepage easily. If your image or logo is inside an image tag just wrap it with a link tag. Easy as pie.
5. Follow the Standard Layout
Following standard layout refers to introducing the viewers to familiar interface and layouts on the web. If you are designing for a newspaper, magazine they tend to have multiple columns allowing viewer read to different kind of content. Whereas personal portfolio, web design studio, web design blog usually focuses on , latest work or latest content featured articles. That is the idea to keep in mind when creating layout for any projects. How your website layout and design flows has an impact on the visitor.
6. Avoid Using Ajax
Try to avoid using Ajax if you can because it is not preferable by search engines. Ajax content is loaded dynamically, as a result search engines cannot index it. Therefore, it is a big “No No” for SEO. However, if situation arise where you must use AJAX and there are many ways to make the AJAX SEO friendly.
7. Use Color Wisely
Color is very important factor when designing sites. It it advised to choose color that appeals to viewers eyes and matches your content. Do not mix up too many colors. Different color has different meanings and the color of the website should reflect the product or the person you are presenting or trying to sell . The are some great color tools online that you can use to choose color patterns and scheme. Pelfusions has complied 20+ Helpful color tools that should help you on deciding colors for your project.
8. Check List
Last but not least here some little things you should consider implanting and reading up when creating a website.
- Have a Favicon.
- Have a Site Map.
- Have some way to track sites pagesviews and visitors.
- Do not forget to add a contact page or at least have contact email address.
- Web Design Checklist .
- Printable Checklist 1 .
- Printable Checklist 2.
In conclusion, some of these tips maybe old news to some designer nonetheless they are useful beginner. Please feel free share any tips or ideas you have for someone who is staring is web design.
All of these points add usability and accessibility to your project. Some of them also add search engine optimization without even thinking about it.
For good website design, make sure your site is browser compatible. Your web site should look good in Netscape as well as in Internet Explorer. Don’t stop designing your site as soon as you find that it looks great on IE. Usually Netscape gives some problems, especially when you try doing complicated HTML designs. But don’t give up too soon, usually with patience these problems can be easily fixed.
Thanks alot! Ajax seems so hot! When do you feel it is appropriate?
Esha´s last blog : vefficience: @Jaypeaso glad to see you on.
Thanks for the info. As a web designer I feel it’s useful for me.
Mohamed Rias´s last blog : Make your site compatible for Higher screen resolution
Nice post. Really helpful tips
Presentations Expert´s last blog : Swine Flue. Common Questions and Answer about Swine Flue
Thanks for writing this. You’ve given some really useful tips, and I love the checklists. Fantastic Job!
Elena´s last blog : Understanding Fancy
Very useful!! And understandable for beginners
Design Wannabe´s last blog : rkwn84zmtu : Ignore this post
This post was the most simple education I’ve received thus far on Usability. I think books written on the subject are just expanded and super-expanded versions of this post. This post will be on my Delicious Top 10 for a long time.
Thank you for the time you put into it.
Arthur Charles Van Wyk´s last blog : Grandpa, please don’t insult my intelligence..
Hey thanks for the kind comment. Will try to produce more post list this
I’m totally against having an “start” comment, that that an ID or class is. I actually don’t comment DIVs most of the time. Good editors are capable of arranging the code and do that for you.
On a big site you are just increasing the size of the html for not a really important reason.
I liked the rest of those points. Specially the checklist!
Ivan Soto´s last blog : Native User Interfaces and controls
The preliminary step is aim to maintain the site simple, understandable and translucent.The fundamental endeavor of every website is to make business thus the graphics and the text must provide to each one visiting the page and so bringing them closer to buying a product.
Avoid using Ajax? Using Ajax or Comet methodologies has a great ability to improve usability if done right. SEO and usability do not go hand in hand.
For a Site Map, I use the mindmapping concept, to draw, organize the ideas around the whole project. It’s more known for mapping ideas in a general way than its usage for web projects/design.
Nice list buddy! These best practices are really helpful for both web designers and webmasters!
Dicky´s last blog : 10 Really Useful Server Monitoring Tools
Some great points there. Bookmarked
Even usability professionals need a reminder of the basics sometimes 
Excellent tips, well explained. Will definitely bookmark this for future reference and for sharing with others
mary´s last blog : Building a Website With MODx for Newbies – Part 11: Adding Comments with Jot
just to emphasize #3. color alone should not be used to convey information as this is hard for color blind users to distinguish – always add something extra like an underline, border or bold etc.
Kawsar: I applaud you on your intention to teach newcomers practical usability tricks.
Though I do have a few critiques:
1. Comments don’t matter at all to the end-user. Having that as your first recommendation negates usability.
2. Seeing as this article is geared towards newcomers, speaking to AJAX may be speaking over your audience’s head.
Anyway, don’t let it get to you, I like the article! Cheers my friend
Brian
Brian Cray´s last blog : Maximize your RSS potential in minutes with these 5 Wordpress plugins
Brain thanks a lot for feedback. Great insights. I agree what you said about AJAX. Comments is just help to new web designers keep track
Great article Kawsar…
Cheers
Web Design News´s last blog : 10 Useful resources for web designers and developers
These are really good points to notice. Nice post buddy.
Bariski´s last blog : 19 High Quality Desktop Wallpapers Featuring Nature
Thanks Buddy
Not only is this a great set of steps for beginners but a great reminder to seasoned professionals who sometimes skip a few steps and then find themselves banging their heads against the wall.
Nobox Design´s last blog :
This article has been shared on favSHARE.net.
favSHARE´s last blog : XHTML.PixelCrayons.com – Service Review