Enrich Your Web Applications
By Akash Mehta2008-02-24
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.
Tutorial pages:
|
|
|||||||||
You might also want to check these out:
|
Link to This Tutorial Page!
