Ractoon Redesign: Part 5 – Optimizations

Cleaning and trimming were the goals for the last phase of the redesign. Since the site would now be presented for a variety of devices the leaner the load could be the better. The result combines steps taken with the code itself, as well as integrating some external services into the development workflow.

Media Query Breakpoints

The CSS begins with a base file (which includes the style normalization as well as styles common to all display sizes) with a file set aside for several resolution breakpoints. As the resolution increases new graphical elements appear in certain sections.

This does a couple of things: it keeps clutter out from resolutions that don’t have the space available, and it saves bandwidth on lower resolution (and more likely lower bandwidth) devices.

Using LESS adds the ability to auto minify the compiled CSS file as well, reducing the resulting file size.

CSS Sprites

Using CSS sprites for graphical elements has several benefits. Not only does it cut HTTP requests and overall file size (potentially), but it also makes supporting higher pixel density devices easier (more on that later).

The trade-off is that this puts more work on the developer to add. But using services such as Sprite.me (recommended from the CSS tricks sprites article) helps ease the pain.

Tiny PNG

A recent discovery, Tiny PNG uses smart lossy compression to cut file size. Paired up with a PNG CSS sprite this is magical. All images on this site that went through Tiny PNG saw at least a 40% reduction in file size.

For most images the optimization does not cause a noticeable loss in quality, but for a couple there were some obvious sections. Always good to spot check after.

Retina Displays

The new hotness in displays is higher pixel density. Popularly 2x pixel density (as the Apple retina displays are) – but who knows in the future. This looks great with retina ready graphics, but with many web images they start looking blurry.

For the redesign a 2x pixel density media query displays an alternate background sprite for these devices. This is where using a sprite comes in handy, making it so only a couple of items need updating. This high res sprite is twice as large, but the relative position of each element remains the same. The background-size property is then set to squish all that pixel goodness back into the expected size but with double the pixels available. A more in-depth article on this process is over at miekd web.

CloudFlare

The last piece uses the W3 Total Cache plugin, along with CloudFlare.

I’m still trialing CloudFlare to see if it’s worthwhile to keep on. Their claim to fame is the ability to filter security threats as well as speeding up page load. They do this by combining CDN distributed assets and data compression, handled by their servers. So far it’s working as advertised, and it’s free for use on any number of sites.

Final Thoughts

The whole redesign was an enjoyable process. Though it took some time, a lot of the new technology and workflow pieces are proving very useful.

Implementing responsive functionality seemed like such a hassle early on. But with how the landscape of mobile devices and usage is emerging it is becoming an essential consideration for new sites. The web community has also stepped up in creating a plethora of tools to help with this, and it seems like this will only accelerate. The key is picking these out of the sea of new shiny things emerging each day.

Moving forward I’m hoping that the site will continue to evolve in pieces, and not needing dramatic restructuring in the near future. But I have thought that before, and things change so fast, so we’ll see how it goes.