The following CSS selectors are considered workarounds and hacks for specific web browsers.
IE 6 and below
* html {}
IE 7 and below
*:first-child+html {} * html {}
IE 7 only
*:first-child+html {}
IE 7 and modern browsers only
html>body {}
Modern browsers only (not IE 7)
html>/**/body {}
Recent Opera versions 9 and below
html:first-child {}
How to Apply Hacks
If you want to add 10px; padding to a div element called #rightpanel specifically for IE 7, then you can use the following hack:
*:first-child+html #rightpanel {
padding: 10px;
}

want to apply the padding just for IE 6, then its as following way:
* html #rightpanel {
padding: 10px;
}

2. Avoid Filters

3. Specify units for non-zero values, but not for zero values.

4. Don’t use quotation marks around paths/URLs when setting a background image or loading in an imported file

5. Try to avoid applying padding/borders and a fixed width to an element. Rather, apply padding to the parent element.

6. Minimize number of ID’s used

7. Minimize number of classes used

8. Don’t use anchors, instead use ID’s.

9. Combine selectors.

10. Use good naming conventions

11. Never use layout descriptives in class names.

12. Use functional names for your classes.

13. Always use intention revealing classnames

14. Avoid using the same classname for different purposes.

15. Always use the same classname for similar purposes.

16. Put your classname on the outer-most element. The child elements can be targeted with the parent elements classname or ID.

17. Declare relative font sizes instead of absolute.

18. Avoid !important.

19. Code link pseudo-classes in this order: Link, Visited, Hover, Active.

20. Minify CSS

21. Optimize CSS Sprites

When we start revamp 123Greeting.com our plan is to set well and easy navigation systems. Where we can load all of our category and followed by the sub category as a 2nd level navigation. We start finding which type of navigation will fit for our site. Even one things we have to keep in mind that we have to keep balance with the exiting site. With the new navigation systems the user doesn’t needs to learn more. What we like to mean that user should complete their task is less time.

How I start
(1) Plan for accessibility at each stage of development.
(2) Start with designing with markup ‘semantically’.
(3) All functionality must be keyboard accessible.
(4) Use of <ul>, <ol>, <li> for list of items.
(5) Place important content first (Source order independent).
(6) Microformats .

Why <div> not <table>

Div is used to describe content that cannot be properly described by other more semantic tags. Adding semantic meaning to content probably makes websites rank higher. div element marks up only one block at a time, the code base is much smaller than that of a table-based structure. Less code is code that is more readable, easier to maintain, faster to develop, less buggy, smaller in size.

1 Level top navigation (tabs)
User navigation is the “main thoroughfare” that takes the user from the opening of an application to the content area where the user works. Where I found the tabs is the best navigational systems which can fit for our systems. Why I choose tab navigation for our first level navigation.

Horizontal navigation bars are very neat. Because top-down flow is slightly superior to left-right flow, it’s natural for high-level navigation to sit above content.
The obvious problem is when a top bar gets wider than the page. It’s normal for web pages to extend vertically, and users are used to scrolling vertically. Horizontal scrolling is to be avoided at all costs! If viewer use text-based navigation, and it’s re sizable, viewer navigation could get bigger or smaller depending on the user’s browser settings.
Horizontal bars are therefore appropriate where the number of items is known in advance, there are not going to be any more items added, and there is enough width to accommodate all items safely in the target screen resolution.

HTML elements

For page navigation, <a> is the element I use because of its attribute href to link to other page. Besides this, there are other 2 CSS syntax for <a> which are very useful. a:hover {background:#fff} changes background color to white on hover, which in fact removes the use of javascript onmouseover. Another useful css syntax is {display:block}. It could expand hover area to the whole area of parentNode with proper {padding:xx}.
we use <span> as the parentNode of <a> , we use <li> instead because it’s simple for naming in CSS. <li> is a block element. So we can foresee there are 2 techniques to generate tabs.

inline <li> + <a>
<li> + block <a>

inline <li> + <a>

CSS li {display:inline} changes the elements of <li> to inline ones. And they will display horizontally as inline elements. >ul> serves as a natual container for all <li> elements. You could select to add a content box or not.
One point that may be aware is you may not use CSS li {margin:0px} to set the gaps between the tabs to 0. There are always 5px of gap between the tabs. The reason for that is when a block elements are changed to inline. If there’s whitespace between the elements, the browser will display 5px space for the whitespace between the inline elements.

<li> + block <a>

CSS {display:block} changes the element <a> to block ones so we get better hover effect. CSS li {float:left} makes <li> elements float horizontally. This is another way of making tabs, which you don’t need to consider the effect of white space between the <li> elements. But the tabs can be designed under the content box by changing the position of the <ul> and content box <div> upside down. A javascript script has been developed to make it possible for the tabs located in the top, bottom, left and right side of the content box for the content navigation.

1 Usability definition:
As defined in ISO 9241-11 1 The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use

2 Parameters of usability
1. Effectiveness : Task Completion
2. Efficiency : Lesser time / clicks
3. Satisfaction : Pleasurable activity

3 Benefits of Usability
Benefits to Users User satisfaction à User Delight More ease of use Efficiency increases Shorter learning cycle User perceived quality improved Benefits to Developers User oriented thinking = Reduction in rework Designing for the users and not (only) Clients Benefits to business Product quality improvement More value delivered à Priced higher Increased Profitability 4 Why Usability is important Other sources report : “There are about 43 million Web sites, and no one knows which ones are usable. The best sites we’ve found are usable only 42 percent of the time, and none that we have studied are usable a majority of the time ….” Forrester Research : Losing approximately 50% of the potential sales from a site as people can’t find what they need Losing repeat visits from 40% of the users who do not return to a site when their first visit resulted in a negative experience Jacob Nielsen : “Studies of user behavior on the Web find a low tolerance for difficult designs or slow sites. People don’t want to wait. And they don’t want to learn how to use a home page. There’s no such thing as a training class or a manual for a Web site. People have to be able to grasp the functioning of the site immediately after scanning the home page — for a few seconds at most.”

5 Usability Engineering Goals
1. Compatibility (with the user) – Computer speaking my language
2. Learn ability – I can do that.
3. User friendliness – Easily
4. Effectiveness A – Accomplish user goals.
5. Effectiveness B – Business goals fulfilled.
6. Efficiency – faster.
7. User Satisfaction – Alright ! it was smooth !
8. User Delight – Wow I did not expect this.
9. Flexibility – good ! You could do it this way also, (Ctrl C Ctrl V)
10. Excellent User Experience.

6 Usability Engineering Definition An Evidence based methodology that involves end users throughout the development process to product information systems that are measurably easier to use, learn and remember. — By Jean Fox, Janice R. Nall.

7 Understand the users
1. Who are the users of this specific product?
2. What are their User specific & Use specific needs?
3. What are the users goals for using this product?
4. Which areas are critical for meeting the user goals efficiently?
5. What other products they have used?
6. What is the terminology they use?

8 Model of stages of use Model for Stages of Use (for a particular application)
1. Novice
2. Advanced Beginner
3. Competent Performer
4. Expert “User and Task Analysis for Interface Design” by Joann T. Hackos, Janice C. Redish

9 GUI Design Process
1. Understand the Users
2. User goals, Business goals
3. User specific and use specific tasks
4. Define features
5. Design the work flow
6. Design the information structure
7. Design the front end

10 Usability Methods
1. Card Sorting Technique that allows users to group the information on your Web site and helps to ensure that the site structure matches the way users think.
2. Contextual Interviews Method that enables you to observe users in their natural environment to better understand the way users work.
3. Focus Groups Moderated discussion with a group of users that allows you to learn about users’ attitudes, ideas, and desires.
4. Heuristic Evaluation Usability inspection method where a group of usability experts evaluate the Web site against a list of established heuristics (or guidelines).
5. Individual Interviews One-on-one discussions with users that allow you to learn how a particular user works and enables you to probe on a user’s attitudes, desires and experiences.
6. Parallel Design Technique where multiple designers create mock-ups of the user interface and the best aspects of each design are used in the final design.
7. Personas A fictional person that represents one of the major user groups for the site. The design team considers the needs of this fictional person when developing the site.
8. Prototyping Draft model (or mock-up) of the Web site that allows the design team to explore ideas before fully implementing them. A prototype can range from a paper mock-up to interactive html pages.
9. Surveys (Online) Series of questions asked to multiple users of the Web site that helps you learn about the people who visit your site.
10. Task Analysis Method that involves learning about users’ goals – what they want to do on your Web site – and understanding the tasks that users will perform on your site.
11. Usability Testing One-on-one sessions where a “real-life” user performs tasks on the Web site in order to identify user frustrations and problems with the site.
12 Use Cases Description of how users will use a particular feature of the Web site. Use cases provide a very detailed look at how users interact with the site including the steps a user will take to accomplish each task. 13 Writing for the Web Guidelines for optimizing content on the Web based on the way users read online. Involves chunking content, using bulleted lists, and putting the most important information at the top of the page.

11 Heuristic guidelines for usability testing
1) System Status shown (Keep the user informed about what the computer is doing) Providing feedback to the users Appropriate method of feedback to be used
2) Match with the real World Use simple and natural dialog. Tell only what is necessary, and tell it in a natural and logical order. Ask only what the user can answer. Speak Users language Use metaphors familiar to users Use words and concepts familiar in their work. No computer jargon.
3) User has to feel he is in command Provide clearly marked exits so users can escape from unintended situations User should be able to leave an unwanted state Users should not get locked in the system
4) Consistency in terminology and required actions. Consistency in communication Names, Images Use sequence, Use of Controls Behavior of controls
5) Error prevention Prevent errors from occurring by keeping choices and actions simple UI should prevent an error from occurring Minimize error situations
6) Error Recovery Give good, clear, specific and constructive error messages in plain text, no beeps and codes Error messages should Clearly indicate the problem Constructively help users solve the problem Be polite and express in plain simple language
7) Recognition not recall Minimize the user’s memory load Objects and screens should be Easily visible Easy to interpret User should not be forced to remember any information
Flexibility Provide shortcuts for frequent actions and advanced users Provide multiple ways to accomplish the same task If possible provide freedom to customize the system
9) Minimalist Design “Less is More” Offer only relevant information and functions Make invisible all the irrelevant information & functions Seek minimum inputs from the users
10) Help and Documentation (Provide clear and concise, online help, instructions and documentation. Orient them to the users task) Anticipate where users will require help Provide appropriate help

A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.

We can usually find breadcrumbs in websites that have a large amount of content organized in a hierarchical manner. We also see them in Web applications that have more than one step, where they function similar to a progress bar. In their simplest form, breadcrumbs are horizontally arranged text links separated by the “greater than” symbol (>); the symbol indicates the level of that page relative to the page links beside it.

In this article, we’ll explore the use of breadcrumbs on websites and discuss some best practices for applying breadcrumb trails in 123Greeting website.

Breadcrumbs?

Use breadcrumb navigation for large websites and websites that have hierarchically arranged pages. An excellent scenario is e-commerce websites, in which a large variety of products is grouped into logical categories.

We shouldn’t use breadcrumbs for single-level websites that have no logical hierarchy or grouping. A great way to determine if a website would benefit from breadcrumb navigation is to construct a site map or a diagram representing the website’s navigation architecture, and then analyze whether breadcrumbs would improve the user’s ability to navigate within and between categories.

Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace effective primary navigation menus. It’s a convenience feature; a secondary navigation scheme that allows users to establish where they are; and an alternative way to navigate around your website.

Types of Breadcrumbs

There are three main types of breadcrumbs.

Location-based (2) Attribute-based (3) Path-based

123Greetings used Location-based breadcrumbs. Location-based breadcrumbs show the user where they are in the website’s hierarchy. They are typically used for navigation schemes that have multiple levels (usually more than two levels). Each text link is for a page that is one level higher than the one on its right.

Benefits of Using Breadcrumbs

Here are just some of the benefits of using a breadcrumb trail.

Convenient for users

Breadcrumbs are used primarily to give users a secondary means of navigating a website. By offering a breadcrumb trail for all pages on a large multi-level website, users can navigate to higher-level categories more easily.

Reduces clicks or actions to return to higher-level pages

Instead of using the browser’s “Back” button or the website’s primary navigation to return to a higher-level page, users can now use the breadcrumbs with a fewer number of clicks.

Doesn’t usually hog screen space

Because they’re typically horizontally oriented and plainly styled, breadcrumb trails don’t take up a lot of space on the page. The benefit is that they have little to no negative impact in terms of content overload, and they outweigh any negatives if used properly.

Reduces bounce rates

Breadcrumb trails can be a great way to entice first-time visitors to peruse a website after having viewed the landing page. For example, say a user arrives on a page through a Google search, seeing a breadcrumb trail may tempt that user to click to higher-level pages to view related topics of interests. This, in turn, reduces the overall website bounce rate.

Original article: http://www.smashingmagazine.com

Prototypes – interactive versions of screens with varying levels of graphic treatment/fidelity. The interactivity of the screens should mimic the intended functionality of the final product.

Wireframes serve a central function in the development of a web site. It is a key tool in communicating the content and layout of each web page for internal and client reviews as well serving as a blueprint for graphic designers to produce designs and for programmers develop functionality.

What are wireframes?

A wireframe is a stripped-down visual representation of a single web page, devoid of any graphic treatment. As the name suggests, it is a framework made with wires, which define basic layout and placement of content and page elements such as navigation; header & footer; branding etc.

They are sometimes referred to as “page schematics”, “page architecture” or even “blueprints” (though the term “blueprint” sometimes refers to a more overall site design).

It is sometime helpful to use the architectural blueprint metaphor in understanding wireframes. Architectural blueprints show you the form of the building, define the functionality of the spaces and paths for circulation, while provide the contractor and interior designer specifications from which to build from. Likewise wireframes define areas of content and functionality, navigation strategy while providing a framework from which the programmer and graphic designer can build from.

A full wireframe needs to deliver the following information:

• Layout: General placement of page elements such as headers, footers, navigation, content area, and often branding; It communicates decisions that as been made as to the navigation strategy of the site; it also shows the prioritization of the content on the page.

• Content inventory: What content needs to be present on the page

• Web elements: Headers, links, forms, lists, images etc.

• Behavior: Notes/annotations may be added as to how elements should be displayed (such as number of elements, default display etc.), or what functional behavior occur when an element is activated (popups, page refresh, link to another page, or external site etc.)

When are wireframes created?

Wireframes as deliverables are developed as a part of Information Architecture phase. It usually follows the “Business Requirements” phase of the project and precedes any graphic design and technical development.

Usually this is the role of the information architect. On smaller projects, this often become the role of the project manager.

Who is it for?

The following table shows the consumers of wireframes and how they are used.

A blueprint with which they can review whether the design meets their needs; a preview to the actual site design; Key deliverable, the signoff of which kicks of design and development phases of the project

Types of wireframes

• Content-only wireframes (aka Powerpoint wireframes): Powerpoint is used to define the key pages of the site. Name of the page, and a list of content items are captured on each page without information about layout or placement. This technique can be used to quickly capture client requirements and sketch out a site without having to go through the labor intensive work or creating detailed wireframes. Tools: Powerpoint

• Block diagram wireframes: This type of wirefames is one step higher than the Content-only wireframes in that it offers basic layout information through blocks of functionality, and content grouping. These wireframes can be used in conjunction with detailed wireframes to provide a high level strategic overview to the wireframes before diving into the details. Tools: Powerpoint, Visio

• Detailed wireframes: Fully-loaded wireframes with layout, content, web elements information along with notes and annotations on page behavior. Tools: Visio, OmniGraffle

Developing wireframes

Here are some basic steps an information architect would take when developing wireframes.

Gathering information

• Business requirements: Ideally you would already have documentation from the the Business Requirements phase. This document will spell out major site functionality, key site pages and what content/functionality would need to be presented on them.

• Content requirements: If there is no documentation from a previous phase it is important to meet with client and sketch out what needs to be presented on key pages of the site. A content-only wireframe is a good tool to do this.

• Existing design requirements: Additional information such as need to integrate with existing site guidelines or need for consistency with previous site design, etc. should also be noted.

• Bandwidth requirements Some clients may have to serve a low-bandwidth user base in which case, the design will have to be more text-reliant and less image heavy.

• Software requirements Some sites are CMS-driven or software driven (such as blogs). Many software packages have layout and navigation rules the design will have to conform to.

Prioritizing/grouping information

• Once the information has been gathered, it is important to first group and then prioritize how they need to be displayed on the page.

Navigation strategy

• Clients may have strong preferences as to how navigation should work and be placed on the page. If there is no strong preference, software requirements and usability should dictate how navigation should be configured.

Drawing wireframes

Wireframes should include:

• Key page elements & location: header, footer, navigation, content objects, branding elements

• Grouping: side bar, navigation bar, content area, etc.

• Labeling: page title, navigation links, headings to content objects

• Place holders: dummy text (lorem ipsum dolor…), and image place holders

The question often arises: how many wireframes should I create? The answer is how ever many you need to get the job done. (or in our case how ever many we said we will create). Having said this the follow should be included in any good set of wireframes:

Required:

• Homepage

• Major sub-pages and “portal” pages

• Key template pages

• Pages with forms

Optional:

• Search results page

• 404 Error pages

• Any other pages that provide clarification to the overall development process