Enrich Your Web Applications

Web 2.0 applications, rich web applicatinos, rich internet applications - what do all these terms mean? There really is no clear definition of what makes a web site a rich internet application, or RIA, as I'll refer to them for the purpose of this tutorial. Some suggest it involves AJAX. Others, the new trends in web design - rounded corners, rich (sIFR?) typography, "beta" tags. Others still suggest the bleeding edge approaches - Google Gears, Adobe AIR, Flash/Flex etc.

But none of this means anything to you, as a developer. Sure, you could go and rebuild your application for Adobe AIR - but what's in it for you? In this tutorial, I'll show you how to enrich your web applications, both on the design side and behaviour side, in a way that gives you results - happier clients/users, less calls to tech support, more self-explanatory UIs. You can't always be on the bleeding edge - using tried and tested methods is generally much safer - but from the web 2.0 excitement, common trends are emerging, and implementing these ideas in your applications will make them easier to use and save you tech support time.

We're going to examine ways to improve the front-end of your web application, both design-wise and behaviour-wise. We won't look at any particular server-side technology, but instead examine techniques with HTML, CSS and JavaScript that you can implement no matter what you develop with. We'll try to look at real life examples from major websites that use the tips and tricks suggested.

This tutorial should take about fifteen minutes to read through, but once you have read it, bookmark it and refer back to it when developing your web applications.

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.

So, we've tweaked the design of your web application a little. How about we add a bit of behaviour through Javascript.

AJAX

If there's one technology from the web 2.0 boom that you should take note of, its AJAX. Chances are you've worked with it a little in the past, or at least have a general idea of what it is. If not, have a quick look through AJAX on Wikipedia before continuing. The advantage of AJAX lies in the fundamental concept - you can make a request to fetch or update specific data. Being able to do just a little at a time is the key. With AJAX, you can simply keep showing the user information and content with very low system resource use.

You can also make small changes - such as creating a new item in your database - without reloading the enitre page. Importantly, however, you can do this all in the background and use vanilla JavaScript to make the change on the frontend immediately, giving the user an impression of instant effect, where they don't have to wait around while your pages load.

I won't go into much detail here, but look into using AJAX for small things to make life easier. For example, on a Digg.com story page, you can post a comment. When you enter your comment and click the submit button, the comment instantly appears in the comment list. In the background, an AJAX request submits the comment to the database. You can also edit your comment inline - click to edit and the comment text turns into a textbox - with AJAX for the update. Through JS and AJAX, three page views are saved, and users wait time is eliminated - a very encouraging user-friendly approach.

Edit-in-place

We briefly covered this under AJAX, but edit in place is a seperate concept altogether that is often coupled with AJAX. The idea is that instead of moving the user between different pages, a single interface is used to manage information, and the user can edit information at the source. Edit-in-place is much faster than the typical click, wait, enter new value, submit, wait approach, especially with AJAX. This encourages users to make changes and contribute information, increasing the rate of user interaction with a site.

For example, in the Digg comment system we just covered, if you click the comment edit link, you aren't taken to a comment edit page. You aren't even taken to the comment form at the bottom of the page. The text of the comment itself is wrapped in an editable text box, and you can literally edit the comment in its place. This is especially useful for small snippets of information.

We won't cover implementation details here, but take a look at these examples: Edit in Place with Javascript and CSS, AJAX edit in place with Prototype and the same with jQuery.

Act-in-place

The parent of edit-in-place is, in a way, act-in-place. Think of it as edit-in-place without any data to edit. This involves an action, typically a simple form submission, taking place without a new page or significant change to the existing page. For example, take the Digg.com login system. The header has a login link:

If you click the login link, a login form fades in appearing right beside it:

This also solves the problem of maintaining state during login - if you redirect a user to a dedicated login page, you have to somehow redirect them back (or risk making them take an action again). While not a terribly complex task, this can create various problems if there was data waiting to be submitted elsewhere on the current page. With AJAX added, you could allow a user to authenticate-in-place (so to speak) and have a login session ready when they take an action on the current page.

Date input helpers

Web developers frequently struggle with users inputting dates, such as dates of birth. Date data can come in many different formats, and users and developers have not yet agreed on one standard format for entering them.

For example, some sites have a single input box and expect input like "1/1/2000". Others are similar but expect "01-01-2000", and others still "2001-01-01". Some have inpux boxes for day, month and year, however with users between the US and UK making different assumptions over the order of day and month, this can also be a problem. Finally, some have dropdown menus for all three values, however this requires either a lot of data transfer (5KB of HTML just for a form!) or non-degrading Javascript.

As you can imagine, this was quite a mess for web developers in years gone by. Thankfully, the invention of a date picker, otherwise known as a date input helper, eased the pain. Have a look at this:

A visual calendar appears either when the input box has focus, or when the user clicks a calendar icon adjacent to the input box. Users have grown accustomed to this, and the general consistency of calendars has allowed web developers to rest in peace, knowing that their users will not have any problems. Next time you need users to input a date, show them a date picker. Plugins are available for jQuery, Prototype/Scriptaculous, MooTools and more.

So there you have it. A number of ways to enrich your web applications, using the tried-and-tested methods that survived the pace of the web 2.0 boom. For more design ideas, try these lists. The Ajaxian blog covers many effective JS behaviours as well. Yahoo also has a fantastic web design pattern library. covering just about anything you want to do with a web application.

The best way to learn more, however, is to explore! Visit some of the top sites on the web and observe the techniques they use. For example, many of the examples in this article come from Digg, and Yahoo! itself is generally very innovative. Observe the sites you visit daily, and bookmark anything interesting you find. You'll be building fantastic web applications in no time.