Section I. Accessibility
This section contains not only traditional accessibility issues, but anything that might keep a visitor from being able to access the information on a website. If no one can load your site, or the type is too small to read, all of the usability in the world won’t matter.

1. Site Load-time Is Reasonable
Call me old-school, but I still like to see sites come in under 100KB (60KB is even better). If a site takes forever to load, most people will just leave. Yes, many of us have broadband now, but that makes our patience even thinner.

2. Adequate Text-to-Background Contrast
Dark-gray on light-gray may seem stylish, but I’m not going to ruin my eyesight to read your blog. Eyes and monitors vary wildly, so keep your core copy contrast high. Good, old-fashioned black-on-white is still best most of the time.

3. Font Size/Spacing Is Easy to Read
Opinions vary on the ideal size for text, but err on the side of slightly too big. Poor readability increases frustration, and frustration leads to site abandonment. Also, make sure your line spacing is adequate – white-space is a designer’s best friend.

4. Flash & Add-ons Are Used Sparingly
No matter how great your site looks, people won’t wait 5 minutes for a plug-in to load. Use new technology sparingly and only when it really enhances your goals. Sticking to standard HTML/CSS is also a plus for search engines.

5. Images Have Appropriate ALT Tags
Not only do sight-impaired visitors use ALT tags, but search engines need them to understand your images. This is especially critical when you use images for key content, such as menu items.

6. Site Has Custom Not-found/404 Page
If a page on your site doesn’t exist, a white page with “404 Not Found” is a good way to lose a customer. Create a custom 404 page, preferably one that guides your visitors to content.

Section II. Identity
A key question when someone first comes to your site is “Who are you?” It’s important to answer it quickly, and make the paths to obvious follow-up questions (“What do you do?”, “Why should I trust you?”, etc.) clear.

7. Company Logo Is Prominently Placed
Put your logo or brand where it’s easy to find, and that usually means the upper-left of the screen. People expect it, and they like it when you make their lives easy.

8. Tagline Makes Company’s Purpose Clear
Answer “What do you do?” concisely with a descriptive tagline. Avoid marketing jargon and boil your unique value proposition down to a few words. This is also a plus for SEO.

9. Home-page Is Digestible In 5 Seconds
In usability, we often talk about the 5-second rule. There’s some disagreement over just how many seconds you get, but website visitors are a fickle bunch, and they need to get the basic gist of your home-page in just a few moments.

10. Clear Path to Company Information
The good old “About Us” page may seem boring, but confidence is important on the web, and people need an easy way to learn more about you.

11. Clear Path to Contact Information
Similarly, visitors want to know that they can get in touch with you if they need to. It’s also hard to do business if no one can contact you. Preferably, list your contact information as text (not in an image) – it’ll get picked up by search engines, including local searches.

Section III. Navigation
Once people generally know who you are and what you do, they need clear paths to the content that interests them. Information architecture is a huge topic, but these points cover some of the basics.

12. Main Navigation Is Easily Identifiable
Almost every site on the web has had a main menu since the first browsers came on the market. Make your main navigation easy to find, read, and use. If you have two or more navigation areas, make it clear why they’re different.

13. Navigation Labels Are Clear & Concise
Don’t say “Communicate Online With Our Team” when “Contact Us” will do just fine. Your main navigation should be short, to the point, and easy for mere mortals to grasp.

14. Number of Buttons/Links Is Reasonable
Psychologists like to argue about how many pieces of information we can process, but if you start to get past 7-or-so menu items, think hard about whether you need them. If you’ve got 3 layers of flyaway Javascript menus, do yourself a favor and start over.

15. Company Logo Is Linked to Home-page
This may sound minor, but people expect logos to link to home-pages, and when they don’t, confusion follows. I’ve seen video of users clicking on a logo over and over, with no idea what to do next.

16. Links Are Consistent & Easy to Identify
The underlined, blue link is a staple of the web. A little artistic license is ok, but consider at least making your links either blue or underlined. Links should stand out, and you should use them sparingly enough that they don’t disrupt your content.

17. Site Search Is Easy to Access
If you have a site search, make sure it’s prominent. Usability guidelines tend to prefer the upper-right corner of the page. Keep the button simple and clear – “Search” still works best for most sites.

Section IV. Content
You’ve heard it before – Content is king. If you don’t want the kingdom to crumble, though, content needs to be consistent, organized, and easy to skim through.

18. Major Headings Are Clear & Descriptive
Most people don’t read online, they skim. Use headings (major and minor) to set content apart and keep it organized. Headings should be clear, and for SEO benefit, using heading tags (<H1>, <H2>, etc.).

19. Critical Content Is Above The Fold
The “fold” is that imaginary line where the bottom of your screen cuts off a page. Content can fall below the fold, but anything critical to understanding who you are or what you do (especially on the home-page) should fit on that first screen. Average screen resolution these days is about 1024×768, depending on your audience.

20. Styles & Colors Are Consistent
Make sure people know they’re still on your site by being consistent – confuse them and you’ll lose them. Layout, headings, and styles should be consistent site-wide, and colors should usually have the same meaning. Don’t use red headers on one page, red links on another, and red text somewhere else.

21. Emphasis (bold, etc.) Is Used Sparingly
It’s a fact of human cognition: try to draw attention to everything and you’ll effectively draw attention to nothing. We’ve all seen that site, the one with a red, blinking, underlined “NEW!” next to everything. Don’t be that guy.

22. Ads & Pop-ups Are Unobtrusive
Ads are a fact of life, but integrate them nicely into your site. Don’t try to force ads and pop-ups down peoples’ throats. Also, do people a favor and make your ads clear. If you blur the line between ads and content too much, your content may suffer.

23. Main Copy Is Concise & Explanatory
This isn’t a lesson in copywriting, but look at your home-page – can you say the same thing in half as many words? Try to be concrete and descriptive and avoid jargon – nobody cares if you can “leverage your synergies”.

24. URLs Are Meaningful & User-friendly
This is a point of some debate, but meaningful keyword-based URLs are generally good for both visitors and search engines. You don’t have to re-engineer an entire site just to get new URLs, but do what you can to make them descriptive and friendly.

25. HTML Page Titles Are Explanatory
More importantly, your page titles (in the tag) should be descriptive, unique, and not jammed full of keywords. Page titles are the first thing search-engine visitors see, and if those titles don’t make sense or look spammy, they’ll move on to the next result.

Original Post from http://www. usereffect .com

Usability is defined by five quality components:

* Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
* Efficiency: Once users have learned the design, how quickly can they perform tasks?
* Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
* Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
* Satisfaction: How pleasant is it to use the design?

We will discuss more on usability on next topic.

I would like to give you few tips on this topic

1.  Reset Your CSS : Great way to ensure your site is cross browser compatible is to always reset your CSS before working on a project. Like :

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

        margin: 0;

        padding: 0;

        border: 0;

        outline: 0;

        font-weight: inherit;

        font-style: inherit;

        font-size: 100%;

        font-family: inherit;

        vertical-align: baseline;

}

/* remember to define focus styles! */

:focus {

        outline: 0;

}

body {

        line-height: 1;

        color: black;

        background: white;

}

ol, ul {

        list-style: none;

}

2. Browser Conditional Statements : : Another popular method is targeting specific browsers using conditional statements. Basically, the idea is to detect the user’s browser, and if it is one of those specified, it should perform a certain action.One of the most common uses of conditional statements is to include a stylesheet if the browser is Internet Explorer. By doing this, you can correct some bugs that exist in your code and override your current stylesheet.

Include a stylesheet if the browser is IE

<!--[if IE]>

        <link href="ie.css" rel="stylesheet" />

<![endif]-->

Target Specfic Versions of IE

<!--[if IE6]>

        <link href="ie.css" rel="stylesheet" />

<![endif]-->

(you can replace IE6 with any version of IE)

3. Validate your Code : Sometime XHTML & CSS errors can be cause of browser bug,  I suggest you to validate your website on w3’s XHTML validator and CSS validator.

4.  Check Your website on all major browsers : download all the browser and check your site on it, If you don’t want to install all the major browsers out there on your own personal machine, here are some resources to help you out.

Adobe Browser Lab

Browsershots

Browser Sandbox

Browsrcamp

1. Section 508 defines 16 accessibility requirements to which Web sites must comply.

2. Many Web Designers confuse Section 508 requirements with the much broader and stricter W3C accessibility requirements.

3. Section 508 is a simpler set of accessibility requirements that do not require radical changes to the structure of your Web pages.

4. Section 508 may require Web sites to significantly change their use of Flash and Dynamic HTML.

Federal regulations require government Web sites to be accessible to people with disabilities. However, defining exactly what this means has been a point of confusion in the past.

Previous government regulations have directed Web sites to be accessible, without specifying exactly what steps are necessary to accomplish this. Section 508 represents the first time the government has explicitly defined what it means to be accessible. As a result, many experts believe that Section 508 will become the standard for Web accessibility in both the government and commercial sectors.

Section 508 requirements allow accessibility support to be added to a Web page without changing the underlying layout of a Web page. However, Section 508 requires all technologies used on a Web page to be fully accessible. This may cause problems for sites that use Flash or Dynamic HTML (see paragraphs 2, 4 and 12 below for details).

The following paragraphs list each Section 508 requirement and explain what it means for Web Designers.

1. Text Equivalents :

Many visually impaired people use screen readers such as JAWS that speak the text found on your Web page. If critical information on your page is presented inside graphics, multimedia objects, applets, or plug-ins, screen readers may not be able to speak the information.

This requirement calls on Web Designers to include text alternatives for each such object found on their page. For example, all images are expected to have an ALT attribute that describes the image, and scripts that create page content are expected to have NOSCRIPT alternatives.

2. Multimedia Alternatives :

To support disabled users, Web Designers should ideally use multimedia formats that support synchronized captioning. Currently only QuickTime, SMIL, and SAMI support this. Flash is notable in not supporting synchronized captions.

Under some interpretations of this requirement, it is sufficient to provide disabled visitors with a text transcript or other alternative that presents the same information found in the multimedia. Thus some Flash designers export their presentation as HTML and point disabled visitors to this.

3 Color Blindness:

While Web Designers often balk at this requirement, colorblind visitors represent the largest segment of the disabled population, with over 7 million Americans being affected. Between 5-7% of Caucasian males are affected by some form of color blindness.

This requirement calls on Web Designers to view their pages with color removed to make sure that critical information is not lost. For example, a Web form that states “required fields are shown in red” would not meet this requirement.

4. Style Sheet Independence :

Cascading Style Sheets can both help and hurt accessibility. On the plus side, disabled users can define their own custom Style Sheets that override the page styles defined by a Web site. This allows a visually impaired user to set page fonts to be larger, and change text and background colors to provide higher contrast.

On the negative side, Style Sheets are sometimes used to affect the content displayed on a page. They can be used to hide, show, or position page content. This is true with Dynamic HTML scripts that create scrolling text or drop-down navigation menus.

This use of Style Sheets presents a problem for the disabled, because many disabled visitors use older, special purpose browsers that do not understand Style Sheets. If one of these users visits a site using DHTML drop-down menus, they may not be able to navigate its pages.

5. Server-side Image Maps : This requirement is unlikely to affect many Web Designers, since server-side image maps are rarely used today. In addition, in nearly all cases a client-side image map can accomplish the same task as a server-side map.

6. Client-side Image Maps : Client-side image maps are preferred over server-side maps, because each hot spot on the image map can have its own ALT attribute. Thus screen reader will be able to explain each spot.

7. Data Table Headers :

This requirement applies only to data tables, not to tables used to control page layout. If a table is used to show information, such as the average temperature in different cities, then it must be properly labeled.

Proper labeling allows screen readers to speak out the row and column labels associated with each table cell. Lacking this information, screen readers can make a data table sound like a confusing list of seemingly random numbers. Proper labeling involves the use of tags including TH, COLGROUP, and CAPTION.

8. Table Logical Levels : As with the previous paragraph, this requirement applies only to data tables. In addition, it affects only data tables that set ROWSPAN or COLSPAN attributes. Rows or columns that span multiple cells can confuse screen readers if they are not properly labeled.

9.Accessible Frames : Pages that use frames must assign a title to each frame. This allows a screen reader to announce the purpose of each frame. For example, JAWS might announce one frame as the “navigation frame” and another as the “content frame.” This helps orient visually impaired users.

10. Screen Flicker : This requirement poses a formidable challenge for most Web Designers. Since flickering images can cause epileptic seizures, this type of image should be avoided at all costs. However, most Web Designers aren’t able to determine if their GIFs cycle at a frequency within the danger range. As a result, this requirement has moved some government agencies to place a blanket ban on all animated graphics.

11. Text-only Alternate Pages : The content of the text-only page shall be updated whenever the primary page changes. This measure is a last resort to be used only if a page cannot be made accessible in any other means. Text-only pages increase the Webmaster’s maintenance load, and may be forgotten when the main Web pages are updated.

12. Accessible Script Content :

This two-part requirement affects both visually impaired users and users with motor skill impairments. The first part of the requirement calls for all scripts that display content to have NOSCRIPT alternatives.

The second part requires that scripts be device-independent. That is to say, a script must be operable with either mouse or keyboard.

This requirement may affect Dynamic HTML scripts that create scrolling text or drop-down menus.

13. Accessible Applets : When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with 1194.21(a) through (l).

14. Accessible Forms : When electronic forms are designed to be completed on-line, the form shall allow people using
assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

15. Navigation Shortcuts : Sighted users experience Web pages in two dimensions, which allows their eyes to move directly to the page’s content. Assistive technologies such as JAWS present Web pages in one dimension (that is to say, they linearize the page). If JAWS encounters a navigation bar with 20 links, disabled users must read through every one of these links before being able to access the next part of the page. Even if they use the tab or arrow keys to move from link to link, this is a tedious process.

As a result, this requirement encourages Web Designers to give disabled visitors the option to skip parts of the page that consist only of navigation. This is typically accomplished by using bookmark anchors. Many accessible pages include a hidden GIF at the page top that gives disabled visitors a bookmark link straight to the page’s content.

16. Timed Response :

While assistive technologies allow people with disabilities to read Web pages, the speed of the disabled user’s interaction with the page is often slower than that of people without disabilities. If the page contains a form requiring a timed response, this can create problems.

This requirement deals specifically with JavaScript or other technology that may cause a page timeout. Some Webmasters have also interpreted this requirement as barring meta-refresh tags.

* this post published by Ekta Dhar (ektadhar@gmail.com)

Well the em is a true typographic unit, recommended by the W3C. Let’s first understand the different unit of fonts

1. “Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
2. Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
3. Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
4. Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

If you have applied text size in pixels in your web page so Safari and Firefox still resize the text, whereas IE6 and IE7 do not. The text can be resized in Opera and IE7 by using the page zoom tool, which magnifies the page layout, text and images within.

On the other side text sized in ems can be resized across all browsers. However IE6 and IE7 unacceptably exaggerate the smallness and largeness of the resized text. To fix the exaggerated text resizing of IE6 and IE7 is to size the body using a percentage. So retaining the ems on the content.

Example :

body {

    font-size:100%; 

}

.mytext p {

    font-size:0.875em; /* 16x.875=14 */

}

.newtext {

    font-size:0.75em; /* 16x0.75=12 */

}

So the difference between larger and smaller browser settings in IE6 and IE7 is now less pronounced, meaning we now have all browsers rendering text at an identical size on their medium setting, and resizing text consistently.

By the time the first public draft of HTML 5 was published, the word around was that HTML 5 would redefine the web, obsolescing the likes of Adobe Flash, MS Silverlight and Java FX. The promise was that all browsers would use a standard video codec, which would be based on a more open standard. However, reality could not compete with this common dream. Because of strong opposition from the corporates, like Apple and Nokia, HTML 5 cannot specify a standard video codec for all web development.

The First Public Working Draft of the specification was published January 22, 2008. The specifications will be an ongoing work for many years but there is good news for us. The WHATWG has said that parts of HTML 5 will be incorporated into browsers as and when they are finalized. We won’t need to wait until the whole specification is completed and approved to start using some of the features of HTML 5.

But what are the features of HTML 5?

New Doctype, Charset and Page structure

As HTML no longer uses SGML to define its Doctype, the doctype line in HTML can be made much simpler. Even the line that defines the charset in the head section is much simpler now.

<!doctype html>

<meta charset="UTF-8">

Page Structure

In HTML 3, we used tables to specify the structure of the page. In HTML 4, we evolved to using

<body>
    <div id="header">...</div>
    <div id="nav">...</div>
    <div>
        <div>
            ...
        </div>
    </div>
    <div id="aside">...</div>
    <div id="footer">...</div>
</body>

Now, in HTML 5, this is what the markup would look like:

<body>
    <header>...</header>
    <nav>...</nav>
    <article>
        <section>
            ...
        </section>
    </article>
    <aside>...</aside>
    <footer>...</footer>
</body>

Other New Elements

Aside from the elements mentioned above, several new elements have been introduced to HTML 5.

• <canvas>
  gives you a drawing canvas in JavaScript. The user can draw on the canvas and using Javascript, you can track the drawing.
• <video>
  add video to your Web pages with this simple element.
• <audio>
  add an audio clip to your Web pages with this simple element.
• <progress>
  adds a progress bar on the page. You can use it while uploading or downloading something from your site.
• <meter>
  represents a measurement such as disk usage.
• The <input> element already exists, but new types have been introduced:
  • tel
  • search
  • url
  • email
  • datetime
  • date
  • month
  • week
  • time
  • datetime-local
  • number
  • range
  • color

Obsolete Elements

The following elements have been removed from HTML as of version 5 either because the element is not really being used or it can be done using CSS.

• acronym
• applet
• basefont
• big
• center
• dir
• font
• frame
• frameset
• isindex
• noframes
• noscript
• s
• strike
• tt
• u

New Features in HTML 5

Other than elements, HTML 5 also introduces additional capabilities to the browser like working in offline mode, multi-threaded JavaScript, etc. Let’s go though some of the features.

Offline Mode
With HTML 5, you can specify what resources your page will require and the browser will cache them so that the user can continue to use the page even if she gets disconnected from the internet. This wasn’t a problem before AJAX came into existence as the page could not request for resources after it was loaded. However, today’s webpages are designed to be sleek so that they load fast and then the additional resources are fetched asynchronously.

Local Database
HTML 5 has included a local database that will be persistent through your session. The advantage of this is that you can fetch the required data and dump it into the local database. The page there after won’t need to query the server to get and update data. It will use the local database. Every now and then, the data from the local database is synced with the server. This reduces the load on the server and speeds up responsiveness of the application.

Native JSON
JSON, or JavaScript Simple Object Notation is a popular alternative to XML, which was almost the de-facto standard before the existence of JSON. Until HTML 5, you needed to include libraries to encode and decode JSON objects. Now, the JavaScript engine that ships with HTML 5 has built-in support for encoding/decoding JSON objects.

Cross Document Messaging
Another interesting addition to HTML 5 is the ability to perform messaging between documents of the same site. A good use of this would be in a blogging tool. In one window, you create your post and in another window, you can see what the post would look like without having to refresh the page. When you save the draft of your post, it immediately updates the view window.

Cross Site XHR
One of the amazing implications of AJAX was to be able to not only fetch data from the server asynchronously, but to be able to get resources from other websites using the XMLHTTPRequest. As this wasn’t part of HTML4, you needed to include a library to perform such an action. HTML 5 will have XMLHTTPRequest support built-in, so you won’t need any library.

Multi-threaded JavaScript
A large portion of most web apps is written in JavaScript as it is the only client-side programming language available. One of the HTML 5 promises is that JavaScript will become a multi-threaded language so that it executes more efficiently. However, that only solves one part of the problem. Multithreading will speed up the processing time of JavaScript once it has loaded, but as you increase the number of lines of JavaScript, the pages take longer to load. To solve that problem, they have introduced an attribute called async to the <script> element. It tells the browser that this script is not required when the page loads, so it can be fetched asynchronously even after the page has loaded. The syntax for this is:

<script async src="jquery.js"></script>

By Arpan Dhandhania

Web 2.0, because it focuses on people and communications, encompasses a large number of technologies and standards. AJAX, Ruby, XHTML, SOAP and many more. Here the technology is less important to people — they don’t care about the standards and technologies running these applications, they just want the end result, which is social interaction in an attractive and easy-to-use application.