Enrich Your Web Applications

By Akash Mehta
2008-02-24


Design

Let's start with design. Bad design can turn away potential users; good design can keep them coming back for more. Here are some ways to improve the design of your website.

Tables

Tables are a very important part of any web application. Often the best way to display data will be in a table. For example, you might have a feature comparison table, like this CSS filter support table:

While this is a fairly good example of a table - it conveys the meaning of the data very well - the problem is that most tables in web applications look more like this:

Name	Number
John Smith	555-1000
Jane Smith	555-1001
John Doe	555-1000

Here are some ways you can improve your tables.

Clear headers

The heading row of a table should always be very clear. At the very least, you should use <th> tags instead of <td> tags, so that you can easily style it later. A soft background color can help a lot, as well as a slightly different text colour. If you have multiple rows of headings, such as in that CSS filter support table we examined earlier, enclose all the heading rows in a <thead>, and use a <tbody> for the data rows. For example, take a look at the header row from Veerle's CSS styled table example:

The structure of the header row would be similar to this:

<thead>

  <tr>
    <th>Dual 1.8GHz</th>
    <th>Dual 2GHz</th>
    <th>Dual 2.5GHz</th>
  </tr>
</thead>

This can then easily be styled in CSS:

thead th {
  text-transform: uppercase;
  background: #CAE8EA;
  color: #6D929B;
}

Referring to th as a child of thead allows you to specifically style the heading rows at the top of your table. If you later need to identify three dimensional data, and introduce a vertical heading column tor at the beginning of all your rows, you can style this new column effectively without mixing the styling of your primary heading row.

Striped rows

When dealing with a lot of data in a table, users may find it hard to work out which cell is part of which row. Take this table example from A List Apart, for instance:

This can be improved with some very simple table striping:

Looking at, say, the "Speed" entry in the middle column, we can clearly see it refers to the "Bran Van 3000" value in the next column.

To achieve this effect, you can take advantage of the CSS pseudo classes :odd and :even on your tr elements. However, be aware that your row backgrounds will be overridden by your cell backgrounds - which default to white. Try something like this:

tr:odd td {
  background-color: #EDF3FE;
}

Be careful of cross-browser compatibility with these pseudo classes, however. You may find it easier to manually add a class to every alternate row and refer to that; if you use a CMS or server-side scripting technology, this may be very easy to achieve. If you read my CodeIgniter tutorial, you may be interested in the alternator() function, which provides an easy way to add this class out of the box. If you use the jQuery Javascript framework, try this tutorial.

Selection

When working with tables, often you'll want to draw the user's attention to a particular row, column or cell, and give them the option of working with the data in the table, or the records it refers to. What if you want to identify the row or column currently being hovered over, and offer an option to select that row or column? The best way is to clearly highlight (with a strong background color) selected rows, and use a less prominent highlight color for the row. phpMyAdmin is a good example of this:

As I click on a row, the background changes to orange and the checkbox is selected. Hovering over the pma_table_coords row gives me a clear indication of what I'm about to select. The Javascript to implement this is easy if you use a framework with DOM functions: you find all table cells in the appropriate rows - <td> elements - then select their parent (the <tr>), select the first child (i.e. the first cell or <td>) and then the first <input>.

Buttons

When it comes to building a web applications, buttons should often be the first point of call for user input. Now, I'm not talking about boring OS-styled input buttons like this:

But rather, visually appealing, self-explanatory buttons like this:

This was taken from the DreamHost control panel, and is actually a div inside an a. However, you can achieve a similar effect with a tag you may not be familiar with: <button>. A button is similar to a standard input button, but can have content. This content could be an image, or it could be text, or both. It has a number of advantages, but the main one is that you can consistently style your buttons across browsers, while giving them rich appearances. Have a look at this:

<style type="text/css">
button {
  background-color: #f5f5f5;
  border:1px solid #dedede;
  padding:5px 10px 6px 7px;
  cursor:pointer;
}
button img {
  margin:0 3px -3px 0 !important;
}
</style>
<button><img src="http://famfamfam.com/lab/icons/silk/icons/add.png" /> Add User</button>

Load it up in Firefox and it should look something like this:

It looks and feels like a link, which users are used to interacting with, but it has some semblance of a button. It's also very self explanatory with the add icon (taken from the wonderful Silk icon set). Finally, it behaves just like an <input type="button"> in a form and can send your application data related to the action. For more on this technique, have a read through Rediscovering the Button Element.

User-friendly pagination

Pagination is one of those tricky areas for developers. The backend logic is all very simple; fetching a cross-section of data for the current page is trivial. The problem is finding an effective method for users to navigate between pages. The top "web 2.0" designs seem to have settled on compact navigation areas, displaying the next few and last few pages, creating boxes around the page numbers and adding small forward-next buttons:

This approach is both simple and accessible. Here's a sample of the code for the second example:

<div class="pagination">
  <span class="current">1</span>
  <a href="?page=2">2</a>
  <a href="?page=3">3</a>
  <a href="?page=2">Next &gt;</a>
</div>

This can easily be styled with CSS:

#pagination {
  font-family: Tahoma,Helvetica,sans-serif;
  font-size: 0.85em;
  margin: 3px;
  padding: 3px;
  text-align: center;
}


#pagination a {
  border:1px solid #CCDBE4;
  color:#0061DE;
  margin-right:3px;
  padding:2px 8px;
  text-decoration:none;
}

Being a simple list of links, this is also very easy to style. See this list for more ways to style your pagination links.

Tutorial Pages:
» Introduction
» The Rich Internet Application
» Our approach
» Design
» Behaviour
» Conclusion

Related Tutorials: » Microsoft Complicates HTML Emails With Outlook 2007 » Testing Your Forms for Hijacking Vulnerability » Control Your Domain Registration Data » HTML Forms POST, GET » HTML Tables » Navigation Bar and Bulleted Lists