Skip navigation

Tag Archives: design

For a few years now there has been a steady trend toward more powerful websites. Websites with more features, new interactions, beginning to resemble desktop applications. Google is a known proponent of this approach, and they’ve come up with an operating system that is basically a browser running client side applications.

Definition of a client side app
A client side app, sometimes also referred to as an RIA or rich internet application, is a website that launches a powerful front-end application usually written in JavaScript.

Benefits of client side app
A powerful, fast, responsive and dynamic UI. Desktop UI metaphors such as context menus, interactive visuals, drag and drop and others that allow for complex and intuitive user interaction. A comprehensive user interface experience where all aspects and features are contained within a unified application. Less reliance on links and standard web elements adhering to a hyperlink document metaphor. Dynamically updated interface immediately connected to a back end service – think instant messaging or Google Wave instead of a forum as an example.

Proponents of client side app
Google, a vast horde of Silicon Valley startups, tech reporters such as TechCrunch, and even Microsoft, Apple and Adobe are making noticeable impact in client side applications. The new HTML 5 specification. JavaScript libraries such as Google Closure, Dojo, and jQuery.

How to think about a client side app in the implementation
The danger is to think that some use of AJAX and dynamic UI elements is enough but it isn’t. The common refrain is the comparison to a desktop application, so let’s pursue that analogy.

Desktop analogy
There is a benefit to be realized from drawing a connection between a client side application in a browser and a desktop application. Desktop applications don’t download parts of its UI from a remote server. For example, some web sites may use XMLHTTPRequests to grab server side generated HTML from the backend. Desktop apps don’t do this, they can’t (unless they use something like a WebView), and neither should your client side application. Grab your data from the backend as a desktop application could handle it, as JSON or XML, and allow the client side application to determine how to display this information to the user. From launch until close, your client side application should render the UI, not the backend.

Desktop applications do not display an inordinate amount of buttons that send you to other desktop applications. In fact most desktop apps never send you to another application. In a client side application links to other sites take you out of the application to some other place: a link closes your application if it does not open a new tab or window. How many desktop applications have interface features that simultaneously send the user to a different desktop app and then closes itself?

The initial HTML is really an application download
The best way to think about a client side app is to imagine that the initial HTML download is an application download. Allow the client side application to perform the rendering of information and UI elements. Don’t utilize back end generated HTML, even if there is a small performance hit: you’re loading an application, not a website document. The first time a user downloads your application it is also an installation. You prepare the client side database/storage mechanism, you obtain user preferences, you explain your application. Smart use of browser caching can help prevent new downloads of your application on subsequent visits. Updates are actually new versions of your application that will require a new download via cache busting techniques.

Compile your application
Make use of tools such as Google Closure’s comiler. Make use of sprites and condense your CSS into a single file. Think of using tools such as buildbot and scons to generate the application that will reside in production to help you with these steps.

Conclusion
The desktop analogy can go a long way to help you develop a more powerful experience for your website. I know this is probably a horse that seems beaten to death but there is still confusion and often optimal designs are not implemented. Developers or product managers imagine that their one little AJAX jQuery slider feature on an otherwise static page means they’ve marked that “I have a client side app” check box, when the entire approach may be wrong. As a developer who in some ways specializes in writing JavaScript as rich internet applications it strikes me when speaking to potential employers when they are not sure what to do with someone like me. Often people may pay lib service to the idea of a client side application with a “we want that” but then can’t find a place for it yet. They want it, because it is a great thing to have. To get it, a little shift in thinking may be required.

Here’s a sample of the ones I really like:

theme_blue_l

theme_blue_s

theme_brown_l

theme_brown_s

theme_shiny_l

theme_shiny_s

theme_black_l

theme_black_s

You can view them for yourself at the new AOL homepage (click on the themes in the upper right corner).