At Habanero, responsive web design and designing for mobile first have been interesting topics to ponder and discuss over our team huddles. Lately, we've been discovering how we can take these ideas and integrate them with our current and future projects. To do this, we decided that one of our own sites needed to be redesigned. Now, the website for our user experience workshop, is responsive.

One lesson learnt from this project was the difficulty of loading specific resources for specific views. For our current mobile websites, we load specific scripts and images that are tailored for mobile devices. This is because mobile devices have limited bandwidth to download files and slower processors for rendering large and complex sites. However, with our responsive design, the same resources were being used for both mobile devices and desktop computers. This required us to improve page load across the site by leveraging a number of different practices, two of which were reducing the number of files served to the browser and their file size.

Reducing the number of files

There are three types of files we try to optimize: JavaScript files, CSS files, and images. Each file requires the browser to ask the web server for the file, and then download the file. Because each request takes a small moment of time, downloading one large file is faster than downloading several files with the same total size. As such, we combined our files together to reduce the number of file requests. With JavaScript files, we are able combine them all together to create one large JavaScript file. You can do this by appending each file together in the order of dependencies (e.g. JavaScript framework first, then plugins, then custom code). CSS files can also be appended together and media queries that used to be link properties (e.g. <link media="print" ?>) can instead be put into the CSS files (@media print {?}).

There is a similar method of file reduction for images where you create a large image with the individual images within it, called CSS sprites. With a CSS sprite, we can have many icons within a larger image and use only specific areas of the image when needed. Even though this total image may be larger in file size than the smaller images combined, the savings in requests outweighs the savings in file size.

A second approach to reducing image files is to embed the data of an image file straight into an image tag or CSS. This can be accomplished by converting your image into base64 encoding, which results in a long string of characters, and then using it in your CSS. While base64 encoding will result in larger image file sizes, again, this trade-off can be worth it.

A third approach to reducing image files is to not use them at all, but rather use CSS. Properties in CSS such as box shadow, linear gradient, border radius and font face are supported in most modern browsers. These properties can replace traditional design elements that used to require imagery, such as buttons, stylized boxes and backgrounds.

Reducing the file size

The first method to reducing file size is to minify JavaScript and CSS. This can be done by removing all white space and commenting from the files. Furthermore, variables in JavaScript can be shortened to one or two character names. Both the appending and removal of unneeded characters can be combined and automated using minifiers such as YUI Compressor or Google Closure.

There are several methods to reducing image file size. The first is to select the proper image format for each image. Photographs should be saved as JPEGs and icons, logos, images with text or transparency should be saved as either GIFs or PNGs. Furthermore, image export utilities such as Adobe Photoshop's "Save for Web" or Adobe Firework's "Export Wizard" can allow users to adjust the image quality versus file size, or limit the number of colors. "Save for Web" can also remove metadata such as copyright or camera information; however this feature is not on by default. Even higher compression for GIFs and PNGs can be found by using specific image compressors such as Trimage or PNGGauntlet.

More Improvements

There are many more methods and best practices that can be used to improve page load such as using a content delivery network such as Microsoft Azure or Akamai to host static files, or making sure that your files are served with a correct HTTP expiry date. There are even tools that allow you to test your site against these practices, such as YSlow and Webkit's Audits panel within Web Inspector. However, reducing the number of requests and reducing overall file size is definitely an easy way to start improving your website's page load today.

See also Habanero Interaction Designer Amara Der's article Designing a responsive website.