How To Build A Web App

ApprovedDeveloping a good web application is a tricky job.  Deploying one that gains people’s acceptance can be a big challenge.  The good ones that come into mind are Twitter, Pandora, and tumblr.

Is there a recipe for building a good web application?

I watched an excellent presentation by Fred Wilson, a venture capitalist who invested in several successful companies, that summarized the basic rules of building a great web app:

  1. Fast
  2. Instantly Useful
  3. Unique Style
  4. Less and simple
  5. Programmable (ie. APIs)
  6. Personal
  7. REST – REpresentational State Transfer (ie. Unique URL)
  8. SEO – Search Engine Optimization
  9. Clean Design
  10. Playful

These guidelines are definitely a good start for new companies.  They’re also useful for established companies who want to redefine their products.

Here’s the presentation by Fred Wilson on The 10 Golden Principles of Successful Web Apps:

The Importance of Page Loading Time

run_blur

Customers are very fickle when checking out a company’s web site.  Unless they’re desperate, a person browsing a site tend to go quickly from one page to another.  Their attention span is short.  Their time is valuable.  They don’t want to spend too much time waiting for a web page to load.

Companies have spent a substantial amount of money to improve page loading times.  Improvements include upgrading internet connectivity, buying faster computers, reducing web applications RAM usage footprint, or investing on a content delivery network.

What other important reasons to improve web performance?

  • Increase in traffic due to natural business growth, or advertising campaigns.
  • Snappy response times are required when using the latest web browser tools, such as AJAX.
  • Google is planning to rank web pages by their load times.
  • Increase use of videos using embedded Flash, and future HTML5.

There is a cheaper way to improve web site performance: Optimize Content.  It means reducing the use of heavy graphics, Flash files, or client side Javascripts.  It also means reducing HTML and CSS file sizes.  It may seem contradictory, but ultimately, content dictates page loading times and can improve the web browsing experience.

Custom 404 Page Using JBOSS

Missing PuzzleHaving a custom “page not found”, or 404 page, is an important modification for any website.  It’s used to enhance the user experience by presenting an easy to understand message.

Setting up a user friendly error page is simple enough using Apache web server.  Just modify the line in httpd.conf and point it to a static HTML document:

ErrorDocument 404 /the404_page.html

With JBOSS (or Tomcat-like Java container) application server, it’s slightly trickier.  It has to be handled per web application basis.  The change is done on the web.xml file, with these entries:

<web-app>

<error-page>
<error-code>404</error-code>
<location>/the404_page.html</location>
</error-page>

</web-app>

For the root directory, modify the web.xml in the ./deploy/jboss-web.deployer/ROOT.war/WEB-INF directory.

Testing this setup in Firefox and Opera, the custom 404 page will automatically show up properly.

However, with Internet Explorer, a “The Webpage Cannot Be Found” message comes up instead.  This is a feature of IE to show Microsoft’s version of a “friendlier error message”.  In this case, we want to disable it, so the custom 404 page will show up.  It can be done via Internet Options -> Advanced tab :

Option in IE to Supress Custom 404 Error Page

Update: Microsoft Help & Support site states if the 404 error page is greater than 512 bytes, then IE will not show the friendly message.  So the page size must be a bigger one, not just a simple one liner.

Now that the applications are setup to serve up custom error page, here are some examples of beautiful 404 page designs to improve the user experience.