Five tenets of high-quality Web application building
Here are the five most important tenets to keep in mind when building high-quality Web applications. I won’t go into standards compliance here, because that topic has already been debated to death, and the conclusions are old news now. Instead, let’s review the modern tendencies applied in high-quality Web applications:
An URI is not a file
Deal with it. An URI should represent a resource, and all its alternative representations. Use content negotiation to serve multiple languages or formats of the same resource.
To help you figure this URI mess out, try thinking about URIs as ISBNs or bar codes. You’d be surprised to know that URIs are defined to be very similar to these.
In the same light, try at all costs to create and maintain URIs so they don’t change. Use URL rewriting if you absolutely need to change URIs for your pages.
Microcontent is king
Good page titles, headings, anchor texts and other microcontent in your Web application pages are a big usability plus for your readers.
Don’t use “link here” or “click here” for links. Don’t use “Article” as a page title. Use headings to give structure to your HTML pages.
REST: what changes should be POSTed, what doesn’t should be GET
You can classify operations in your Web application in two categories:
- Those that perform changes in the information kept in (or managed by) your application
- Those that don’t perform changes (such as presentation pages, views or reports)
Use POST forms and avoid parameters (related to the operation) in URIs for the first category of operations. Use GET forms and URIs for the second. Here’s how and why.
Semantic pages matter
Don’t use presentational markup. Avoid use of presentational tags like FONT or CENTER. Most likely, what you’re trying to get to stand out is actually a good candidate to become a CSS class or ID. The more you place in your stylesheet, the less your pages will weigh. Plus, maintaining a slick, consistent look, and redesigning your site in the future will be way easier.
In the same light, avoid using TABLEs for lists, horizontal tabs and non-tabular information. Resort to properly styled UL or OL elements.
Learn the existing HTML tags, and what they’re supposed to be used for. It would be dumb to create a CSS class named “code” just to find out that there is a perfectly good CODE tag that can be used more directly, and styled through CSS.
Finally, don’t just bold text that’s supposed to be a title. Use one of the heading elements in HTML (there are six depth levels for you to use, so there won’t be any shortage!).
Accessibility is good for your readers (and, surprisingly, you as well)
Whether it’s because you want to achieve high rankings in search engines, or because you truly, truly care about people with disabilities, designing an application with accessibility in mind should be extremely important to you.
- Use AJAX sparingly and always provide fallback mechanisms for those who don’t use JavaScript. AJAX should not replace standard interaction methods, and it should also not be used to break the “one page, one URI” rule (this is exactly why frames are being ruled out).
- Lay out pages in an accessible fashion. Usually, content should go first in the HTML.
- Add access keys, form labels and other accessibility measures. The first step should be using semantic markup.
- Resort to Flash only when content you’re presenting is eminently audiovisual.
March 3rd, 2006 at 20:56
Nice tips. Very helpful for my own cms dev process.
March 3rd, 2006 at 21:07
But the way.. i still have a doubt… is it true that the “keywords” and “description” metatags are useless (for google)?
March 3rd, 2006 at 21:12
No, META tags are still useful. Look for “hacer y escuchar mp3″ on Google, and you’ll see that the description that appears for the first page (which incidentally is mine) is taken right out of the META DESCRIPTION tag.
March 4th, 2006 at 2:11
Some nice tips, however they should be common sense for anyone that is even thinking of doing any serious application development.
The only reason I’m commenting here and not on Digg is to let the author know that his site is pretty damn unusable and very unprofessional. Shoving “hire me” links down the user’s throat is great for usability. So is that big head on the top of layout that pretty much screws anyone with 1024×768 or below (i’m on 1280×1024 and it’s in the way). Just stand up and take a step back from the monitor and take a look at the sheer amount of text you have crammed into a blog. It’s just a blog dude, not an animated billboard.
There are only 2 things that truly matter, everything else is based on the project and task at hand:
1) Speed 2) Quality
Good day.
March 6th, 2006 at 19:25
I fail to see how having my own picture and ads hinder usability in this blog. This is the first claim of bad usability I’ve ever received. In the spirit of openness, I’m willing to let your comment slide and stay.
If you don’t wanna hire me, okay. I’ll still do well from other people who’ve hired me. If you find this website unprofessional, do your own. I’d advise you to learn how to criticize properly.