A New Web Design Trend

Here, at Noam Design, we are constantly contributing to the web design world community and we’ve often pioneered new practices and innovative concepts within the industry. What we call ‘Load Sequencing’ and ‘Content Flushing’ are two ways to tremendously enhance the user experience for websites and web applications that are rich in design and/or features. These concepts allow for the almost instantaneous fetching of web content to the user, while other elements of the website or web application are seamlessly loading.

What is it all about?

In today’s internet browsing experience, there is nothing more frustrating and outdated than waiting for a web page to load.  We believe that when you go to a website, you shouldn’t have to wait for the site’s content to load, but rather you should be able to view relevant content right away – or at least be entertained while the main content of the page is loading. In other words, some web content should be fetched to the user immediately. For simple, light weight websites, the question may not be as critical. But for websites and web applications that are rich in features and/or design, it’s of the utmost importance. Especially given that more than 80% of all internet use is spent on rich web applications! Web based emailing and chatting, social networking, and video browsing, etc are just a few examples.

Google Mail – a Rich Web Application Example

Gmail is the perfect example of a feature rich web application. Google is doing an outstanding job with all its web applications, and Gmail is probably one of the best web apps available today on the web. As far as email clients are concerned, we believe Gmail is leading the industry, far ahead of its competitors. Without going into the details of all the features of Gmail, including heavy use of advanced JavaScript, it is obvious that the application is very rich and needs to be loaded into the user’s browser. So the Gmail team has worked very hard to minimize the load time and optimize their website. Still, it takes about 3 or 4 seconds for Gmail to load on a fast computer with a standard high speed internet connection in America. For this reason, the Gmail team adopted the use of a JavaScript pre-loader – a progress bar showing the user how much of the application remains to be loaded before Gmail can be accessed and used. But what can they do better?

Applying the Concepts of ‘Load Sequencing’ and ‘Content Flushing’ to Gmail

What if every time you went to Gmail, instead of watching a blank page with a small pre-loader on the upper left hand corner, you could read some short, interesting content without having to wait at all? Like the latest hot news in a field that interests you particularly? Or a picture randomly selected from your Flickr account? And as soon as Gmail is fully loaded, a ‘Go to Gmail’ button (or a ‘close’ button) would appear? This can be achieved using ‘Load Sequencing’ and ‘Content Flushing’.

Below, we will explain the techniques more in-depth, but for those of you who aren’t techie nerds, the idea is actually pretty simple: ‘Load Sequencing’ and ‘Content Flushing’ means that we carefully choose which elements (JavaScript, CSS, Html, images, etc…) are absolutely necessary to load in order to be able to show content to the user, and in what order they must be loaded. When we program the web page, we force the loading of these elements first, and then ‘flush’ the web content immediately to the browser (using the PHP Flush function). Only then do we continue to precisely load what is needed to display the rest of the page. This second loading process happens behind the scenes, while the user is being entertained with interesting and relevant content.

Where Can I See a Successful Example of ‘Load Sequencing’ and ‘Content Flushing’?

There are numerous techniques available to optimize a website’s load speed. ‘Load Sequencing’ and ‘Content Flushing’ are best served when combined with all these techniques. Minimizing HTTP requests, combining and optimizing images, using AJAX extensively, ‘pint point’ pre-loading, compressing files, Gziping, caching and Etaging are just a few examples. If you are interested in learning more about a specific optimization technique, let us know in the comments below and we’ll write a tutorial about it! You can also learn more about what can be done regarding website speed optimizationby reading what the Yahoo Developer Network has written about the subject – they are simply the best in this field! They also offer Yslow – a Firefox add-on that you can download here. The Plugin works within Firebug so if you don’t have this must-have-Firefox-extension installed, you need to download it first. For additional life saving Firefox Extensions, please read this article and stay tuned!

The Noam Design website offers a very interesting application of the Load Sequencing and Content Flushing concept. When you first visit the website, a ‘Splash window’ appears almost immediately displaying our latest projects while the rest of the website is seamlessly loading in the back (which is faded out). Thanks to this approach, we are able to present our users with a design-rich and feature-rich website while keeping the wait time to nearly nothing. To view the effect in action, close all the windows of your internet browser and restart it. Then type in www.noamdesign.com in the address bar – enjoy! (You must restart your  browser completely).