Introduction
The web 2.0 buzz has gradually died down, and as a web
developer it’s your job to take stock of the online landscape – and
what it means for you. Rich web applications are making it big,
software as a service is finally taking hold and you can brace for the
boom times. In this tutorial, I’ll show you how to enrich your web
applications with the technologies and approaches that worked.
The Rich Internet Application
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.
Our approach
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.
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 ></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.
Behaviour
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.
Conclusion
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.
If you found this post useful you may also want to check these out:
