
|
|
|||||||||
Enrich Your Web ApplicationsBy Akash Mehta2008-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. TablesTables 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:
Here are some ways you can improve your tables. Clear headersThe heading row of a table should always be very clear. At the very least, you should use
The structure of the header row would be similar to this: <thead> This can then easily be styled in CSS: thead th {
Referring to Striped rowsWhen 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 tr:odd td {
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. SelectionWhen 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 - ButtonsWhen 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 <style type="text/css"> 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 User-friendly paginationPagination 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"> This can easily be styled with CSS: #pagination {
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 |
||||||||||
| About the NetVisits, Inc Network | Write For Us | Advertise Copyright ©2007 NetVisits, Inc Network. All Rights Reserved. Privacy Policy. |
Visit other NetVisits, Inc. sites: |