Posted December 1, 2012 in Bootstrap, Copy, Design, Portfolio, Web

Rock N Roll Audio Video

• Coding, Copywriting, Graphic Design
• Customized Twitter Bootstrap Jumbotron
• Responsive, displays well across devices
• Improved load time by 38%
• Decreased HTTP requests by 45%
• Valid HTML5
• Leveraged browser caching
• 100% performance score on Pingdom
• Completion Time: 40 Hours

Rock N Roll Audio Video of Phoenix, Arizona hired me to redesign rnrav.com in November of 2012. The company was established in 2004 and has grown significantly after launching their first website in 2006. Subsequently, they wanted a more modern website that displayed well across desktops, tablets and mobile devices, while communicating their desired aesthetic. Here’s their old homepage:

Although I liked the color palette and the prominent call-to-action (Free On-Site Survey), the existing design suffered from several drawbacks. On larger monitors, wasted space comprised 50-60% of the viewport. Text was cramped and difficult to read. The layout was rigid and with a growing list of high-profile clients, the first impression lacked the impact the company needed.

The site also suffered from optimization issues. Overhead was around 200MB but failed to leverage browser caching, lossless compression, minimization and other techniques which could have yielded significant payoffs in terms of load time. The file structure was a maintenance nightmare, with over 27,000 files on the server totaling 166MB! Here’s how the site ranked on Pingdom before the redesign:

Not too bad, but, definitely room for improvement. Here’s how it fared against W3C:

Ouch! I mean, validation isn’t a deal-breaker, but, it definitely has benefits.

Given these factors, the objective was to design a site that leveraged browser caching, minimized HTTP requests, passed markup and CSS validation and took advantage of responsive design, all while communicating the client’s desired aesthetic. I decided to customize Bootstrap’s “Jumbotron” layout, which features a full-size carousel along with “featurette” and “marketing” styles that lend well to visual presentation. SVGs and CSS3 background provide crisp imagery while keeping page overhead down. Here’s the new homepage top to bottom:

The client was especially happy with the prominence of his clientele! Anybody who visits the new site should immediately notice the high-profile clients and hopefully walk away with the impression that Rock N Roll Audio Video means business. The redesign consistently ranked high 90’s in Google’s PageSpeed tool and got a perfect score on Pingdom:

These simple adjustments yielded significant results. Even though the redesign is more visually rich than its predecessor, HTTP requests decreased 45%. Load time was improved by roughly 40%. Our performance score spiked to 100/100. Their new directory structure contained under 100 files totaling less than 2.6MB, including images and the third-party contact form. The markup and CSS are now valid. Here’s how we fared with W3C post-redesign:

Though there is still some room for improvement, all in all, it was a successful redesign that left the client very happy. I’m happy, too: they’ve expressed interest in having me create some marketing materials after the holidays 🙂