Tips of optimizing CSS for better performance

For creating a better user interface, CSS plays very important role in terms of presentation. Here are some tips to optimize the CSS for better performance.

Tip #1: Reduce the number of HTTP requests made for image resources.
Reducing the number of HTTP requests has the biggest impact on reducing response time and is the easiest way to improve performance.

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coordinates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used.

Tip #2: Use shorthand properties to optimize your CSS (including font, background, margin, and border).
Rather than declaring all CSS properties and increasing the size of CSS file, it’s good practice to use shorthand properties to group properties of a common set eg (font, padding, margin)

Like instead of writing
margin-left:5px;
margin-top:3px;
margin-right:4px;
margin-bottom:5px;

We can write
margin:3px 4px 5px 5px;

Tip #3: Use shorthand hexadecimal colors or names, whichever is shorter.

Rather than writing #ffffff we can write #fff
Similarly #ff3366 can be written as #f36

Tip #4: Group selectors with the same declarations
CSS allows you to group multiple selectors that share the same declaration. This optimization technique allows you to apply the same style to multiple elements to save space.

So
div#main {border:1px solid #ece;}
div#sidebar {border:1px solid #ece;}

Becomes this:

dive#main, div#sidebar {
border:1px solid #ece;
}

Tip #5: Group declaration with the same selectors
CSS allows you to group multiple declarations for the same selector into one rule set, separated by semicolons. This allows you to apply multiple declarations to one selector to save space.

So

body {font-size: 1em;}
#mainContainer {font-family: arial, helvetica, sans-serif;}
#mainContainer {color:#000000;}
#mainContainer {background:#ffffff;}

Can be written as

#mainContainer {
font-size: 1em;
font-family: arial, helvetica, sans-serif;
color: #000000;
background: #ffffff;
}

Usability Principles

1. Make systems easy to use, Keep the interface simple
Keep the interface simple because simplicity reduces the demand on users’ brain power and focuses users’ attention on the task

- Present information in meaningful groups according to how or when they will be used.
- Organize and present information or processes in a straightforward, simple manner. Group related information or processes together.

2. Provide proper search and navigation
- Make the interface consistent: When a User interface is consistent, it is easy to learn and users become familiar and comfortable with the program more quickly.

Maintain consistency in all aspects of the program, including:
• screen layout,
• navigational elements,
• use of language, graphics, and sounds,
• metaphors
• feedback mechanisms.

- Provide feedback
Provide informative and timely feedback for every action. If the users move the mouse, the cursor moves. If they type on the keyboard, the typed letters appear on the screen. Communication should be brief, direct, and expressed from the user’s perspective.

- Let Software be forgiving for user’s mistakes
By building in forgiveness, you will encourage users to explore the territory without fear of breaking or ruining anything. Users are more productive and confident with a program that they feel they can safely explore. Forgiveness encourages users to independently learn and explore.

- Offer multiple search strategies in on-line environments
You should provide flexible interfaces to accommodate the various factors involved with users searching for information.

- Let users search by browsing in hypertext documents
You should build support for browsing into an on-line hypertext system, since most users, especially novice or infrequent users, prefer to browse for information rather than use analytical search strategies, which are generally planned and goal driven.

- Give users menus and maps that outline their choices
Users of hypertext report that a major problem is that they tend to feel “lost” or “disoriented”. This condition occurs when users do not know:
· where they are in the hypertext system;
· where they have already been (nodes visited); and
· where they can explore (options for movement).

Provide a proper outline for visited links with different color, breadcrumbs to show where they are. Provide visual clue to help users navigate. Also provide back track option.

- Use headers, footers to tell users where they are

3. Readability:Improve readability by designing effective page and screen layouts

- Don’t overload users’ working memory

- Give your layout an obvious structure
Here are some tips for using format design variables to create
screen layouts:
· Use headings systematically to assist the customer in searching for, retrieving, and comprehending the information.
· Use vertical spacing systematically to help the customer understand the structure of the text.
· Use typographic cueing to direct the customer’s attention and to express the structure of the material.

- Divide text into logical ‘chunks’
Organize textual material into logical and conceptual “screenfuls” that take into account the size of the screen and the limitations of the user’s working memory.

- Use color to enhance cognitive processing
Use color to help structure the content and guide a customer through these displays. Researchers suggest using color to:
· enhance the “personality” of the different functional areas,
· distinguish between different types of information,
· establish a link between related pieces of information,
· highlight important or critical messages, and
· help customers understand complex displays.

- Provide quotes, questions, or photos to support the text
Provide accompanying material, such as quotes, questions, or photos, to increase the reader’s understanding of and interest in the text.

4. Use words readers can easily understand

- Use common vocabulary
Use familiar vocabulary that occurs frequently in everyday text. Readers will find it easier to read, process, and recall a passage if the words are familiar.

- Avoid abbreviations, acronyms, and initialisms
Although abbreviations, acronyms, and initialisms may save space, you should avoid them unless you are certain that readers will know the terms for which they stand. Consider the level of knowledge and background of the readers.

- Use headings to present key ideas and provide structure
Headings can help readers recall, search, and retrieve information from the text. Headings also act as signaling devices, directing the readers’ attention to important or key ideas. Headings also help readers understand the text structure, which stimulates learning and lets them search for information
in a passage. Headings help readers avoid information overload.

Benefits and drawbacks of using pixel, point, percent, em units

As a web developer, we may have came across, questions like
- Which unit to use for measurement?
- What is the relevance of each unit?
- Pros anc Cons of using them

Lets talk about each units in detail.

Most commonly used units for measurement are as follows :-

- Points (Absolute measurement unit)
- Pixel (Relative measurement unit)
- em (Relative measurement unit)
- percent (Relative measurement unit)

Points:
This is absolute unit of measurement, and takes the absolute size based on user’s screen. To be more specific, based on resolution of the screen the font may increase or decrease, so this is not good for using in normal web pages.

When to use?
Points are good choice when we want to go for printing. So if you are planning to make a printable version of your page, make use of point units.

Pixels:
Pixels are relative to the screen resolution.This is relative unit of measurement and is good if we want to have better control of the web pages.

When to use?
If control over the look of your Web page is your biggest concern, then you should use pixels. Pixels are the standard unit of measure for screens and monitors, and fonts will be more precisely the size you want on the screen.

em:
This is relative unit of measurement. em is good for accessibility. We should use em when we want to make our application accessible. Drawback of em units is that font size is relative to standard size of browser, so we lose control over the exact look of the web page.

When to use?
If accessibility is your biggest concern, then you should use ems. Ems are sized so that the font size is relative to the parent element. Using ems ensures that your pages will be accessible to most browsers and platforms. Also if your readers choose to change the default font size of the page, your page will scale to that new size.

The problem with ems is that you lose control over the exact look of your page.

Percent:
The percentage value is relative to the surrounding text or the user’s default font, so when you define a font size with the value 50 percent, and the default font size was 16px, you get an 8px font size.

Accessbility Standards & Tips

There are couple of accessibility tips and standards, I’ll be talking about today. This will help make your website of application accessibile to people with disability also.

Rule #1: Always use a DOCTYPE
This is a general W3c standards for any HTML or XHTML markup to have a DOCTYPE, to know which version of document you are using.

Rule #2: Always mention the language: You know what language you’re writing in, so tell your readers… and their software.

Screen reader software (JAWS) needs to know what language your pages are written in, so it can pronounce your words properly when it reads them aloud. If you don’t identify your language, JAWS will try to guess what language you’re using, and it can guess incorrectly, especially if you quote source code or include other non-language content in your pages.

How to do it?

1. If you’re using any variant of HTML 4, change your <html> tag to this (use your own language code if not English):
   

   <html lang="en">

2. If you’re using any variant of XHTML 1.0, change your <html> tag to this (use your language code in both places):
   

   <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

3. If you’re using XHTML 1.1, change your <html> tag to this (again, insert your own language code):
   

   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Like the DOCTYPE, you should identify your language on every page of your web site.

Rule #3: Construct meaningful page titles

Every page of your web site should have a unique and meaningful page title.

JAWS has a special keyboard shortcut (INSERT + F10) which displays (and reads) a list of the currently open windows, by window title. In the case of web pages, this would be your page title. It also reads the window title while ALT-TABbing through open windows. Other screen readers, like Home Page Reader, read the page title out load as soon as you visit the page.

Lynx displays the page title in the first line of output, so it’s always the first thing that Blind users reads in Braille.

Rule #4: Provide additional navigation aids

You may be familiar with the tag in relation to external stylesheets. But did you know you can also use a similar syntax to point to your home page, and to previous and next pages in a series?

<link rel=”home” title=”Home” href=”http://url/of/home/page” />

<link rel=”prev” title=”Title of previous page” href=”http://url/of/previous/page” />

<link rel=”next” title=”Title of next page” href=”http://url/of/next/page” />

These links, normally invisible to visual browsers like Internet Explorer, can be displayed in alternate browsers and help users navigate through your web site.

Rule #5: Present your main content first

One of the main advantages of using a purely CSS-based layout is that it is easy to rearrange elements within your HTML source without affecting the visual layout, so that your main content displays while the rest of the page is still loading.

If you have a table-based layout with a navigation bar along the left, your navigation bar is being presented to blind users before your main content and this creates lot of problem.

Rule #6: Use colour safely

Rule #7: Use real links

Avoid JavaScript a pseudo-link that executes a piece of Javascript code when you click on it, to create links. Tool like Lynx does not support Javascript.

Rule #8: Add titles to links

The title of a link generally shows up as a tooltip in visual browsers, but it can be presented in non-visual browsers as well.

Rule #9: Define keyboard shortcuts

One of the least known features of HTML is the accesskey attribute for links and forms, which allows the web designer to define keyboard shortcuts for frequently-used links or form fields.

When JAWS reads a link that defines an accesskey, it announces the access key as well. For example, the link Home page would be read by JAWS as “link: Home page, ALT + 1″. Disbaled user can focus on the link by pressing ALT+1, then follow it by pressing ENTER.

Rule #10: Dont open links in new window

In all dominant browsers, using the tag to force a link to open in a new window breaks the Back button. The new window does not retain the browser history of the previous window, so the “Back” button is disabled.

Although JAWS does announce “New browser window” when a link opens a new window, this is easy to miss, as it is spoken wedged between the reading of the link text and reading of the new page. Home Page Reader has a better solution; it plays a distinctive sound every time a new window opens. And Window Eyes, another popular screen reader, gives no indication of new windows at all.

Rule #11: You should define an acronym whenever you use it

CSS, HTML

Rule #12: Use captions for your tables

<table summary=”CD’s I listned to Recently” class=”footcollapse”>

<caption>My recent CDs</caption>  

Rule #13: Use Table headers for tables

<thead><tr>

<th>Title</th>

<th>Artist</th>

<th>Quality</th>
</tr>
</thead> 

Rule #14: Provide summary for table.

<table border=”0″ cellspacing=”4″ cellpadding=”0″ summary=”Monthly calendar with links to each day’s posts”>

Rule #15: Provide text equivalent for images.

Every single image on every single page of your site should have a text equivalent, so-called “alt text”, specified in the alt attribute of the <img> tag.

Rule #16: Provide text equivalent for images maps.

<img alt="Site navigation links" src="footer.gif" width="500" height="212" usemap="#Map">

<map name="Map">

 
<area alt="previously..." shape="rect" coords="203,114,258,129" href="/archives.html">

<area alt="by category" shape="rect" coords="277,113,348,129" href="/category/">

<area alt="about the site" shape="rect" coords="364,113,401,128" href="links.html">
<area alt="about leslie" shape="rect" coords="418,114,488,130" href="leslie.html">
<area alt="Powered by Movable Type" shape="rect" coords="-4,190,131,210" href="http://www.moveabletype.org"></map>


Rule #17: Use relative font sizes

Rule #18: Use real headers for headings

Mark up your web site as an outline, using real
<div>
<h1>,</p>
<h2>,</p>
<h3>tags. Screen readers rely on these tags to interpret the structure of your pages. Your pages do have a structure, but without proper header tags, screen readers can’t find it.</h3>
</h2>
</h1>
</div>
<h1>
<h2>
<h3>

Rule #19: Label form elements

The <label> tag allows you to associate a form label with any kind of form input element: text box, multi-line text area, checkbox, radio button, whatever. This allows screen readers to intelligently announce what a particular input element is, by reading the label. Furthermore, if you use a <label> tag to associate a checkbox (<input type="checkbox">) with the text next to it, your web-based form will work like a GUI application: clicking anywhere on the text label will toggle the checkbox.

<label for=”author”>Name:</label><br />
<input id=”author” name=”author” /><br /><br />

<label for=”email”>Email Address:</label><br />
<input id=”email” name=”email” /><br /><br />

Rule #20: Make everything Searchable