If you’ve been frequenting our site, you were probably surprised to see the new look we rolled out on Friday. It represents today’s best practices in website design and execution.
Responsive Design. If you’re on a desktop, pull the window narrower and narrower. Notice that unimportant items– the big, bulky logo, the navigation menu, and the sidebar– all disappear as the screen shrinks down. Why does this matter? Most of you aren’t running a 400 pixel wide window on your desktop PC. However, most mobile users are. The typical mobile browser– although it will pretend to have a much wider screen when fed inflexibly-designed, desktop-focused content, really expects a screen width of 640 pixels or less…. roughly the size of a desktop screen in 1995. Smart designs today are all about “what can we throw away to keep the key content front and center”.
Bigger images have to be smarter. The old ideal,of a full page load, including all images, in 50 kilobytes, is obsolete Connections are faster, and customer expectations are a little higher than a tiny, blurry photo of a product they’re about to spend $750 on. However, that doesn’t represent a license to demand a four-megabyte load so you can have full-screen, badly compressed photographs where people won’t even be looking. Consider the background image for our home page. Rather than relying on a single image, we broke it into three components– a tiling slate pattern, the three figures, and the black backdrop– allowing us to display gracefully on any size screen. The team portrait near the bottom of the page, despite being wide enough to fill most screens, is smaller than a 320×200 uncompressed bitmap.
Optimization for Caching and Reuse. By using third-party hosting for shared assets– common libraries like jQuery, and frequrently-requested assets like the Google Web Font Collection– we can have the rest of the web help cache our site’s assets. Odds are, you’ve visited some other site that uses hosted jQuery or one of our fonts before you came here– why should you have to load it again? Admittedly, this is not going to show a performance advantage in benchmarks, where they have to start with an empty cache for objectivity, but the real world is likely to see an improvement.
Removing Redundancies. Our old site had dozens of slightly different header and footer variations. This mentality benefits nobody– it’s harder to maintain, and makes the site’s behaviour less consistent and more frustrating for customers. They’re not going to want to hunt for a page with the exact same combination of menus and sidebars to find the link they remembere from their last visit. The new site dramatically reduces this– one set of headers and footers per subdomain.
What hasn’t changed. You’ll notice that we still stick with a familiar navigation structure, and a prominent call to action. The science of marketing changes far less frequently than the technology. It’s important to remember this when so many agencies are saying “Mobile changes everything” or “HTML5 changes everything” or “The colour orange changes everything”– are they chucking years of usability research and focus group data just because they want to make something look like the latest mobile trend?