Light Frames, Great Content

An approach to building modern websites.

February 22, 2016 •

I’m constantly revisiting my opinion on what makes a good website. For years it was the immersive animation of Flash that defined a great user experience. Then it was the Web Standards, the quality and poetry of the underlying code that symbolized greatness. Just as my passion for Web Standards seemed to plateau, the Mobile Web and Responsive Design crashed like a violent tsunami on my process and what I defined as “good”.

I feel myself at another plateau. Major players like Apple, Google, Facebook, and Twitter have been echoing criticisms of a bloated Web and are building alternatives. I translate that as a slow Web threatens its utility and universality. So it’s imperative to build for speed. However, seemingly juxtaposed to extreme performance, there’s a user and stakeholder demand for native-quality richness and animation.

There are a mountain of considerations when it comes to building a website or product. To make sense of it all, I’ve settled on a short rule of thumb that suits my current aesthetic: “Light Frames, Great Content.” To talk about the former, we must first discuss the latter.

Great Content

If I’ve learned anything over the years building websites, it’s that there’s no shortcut for great content. Quality content and quality products drive traffic. If you don’t have the content, it’s possible the page shouldn’t exist at all.

Great content stands alone on its own merit. It’s useful, memorable, people find it and share it. No amount of design can make up for poor content.

Great content should be accessible to everyone. To ensure your content is consumed, however, it must be delivered in a vehicle that can reach its destination.

Light Frames

Websites transmit across the world on radio waves and wire and the frame which packages your content must be designed to make the voyage. A light frame enables your content to go anywhere quickly.

In my mind, “the frame” goes beyond a page delivery method and is the sum of everything your site requires. Every little design or technical decision that adds weight or consumes memory on the client. Everything that would require a meeting to remove.

In less abstract terms, this is the HTML, CSS, JavaScript, polyfills, and even build tools that can leave a footprint. From a higher level this includes the design system components, the web typography, the responsive navigation solution, the mega footer, the on-scroll animations, the decorative fullscreen background video, etc. Knowing every decision matters, I’ve been finding myself searching for the most minimal solution to solve my problem elegantly.

Heavy-handedness weighs content down. With heaps of JavaScript, parallax, or other intense animations; each is a cargo crate on the proverbial boat sent across the wire. Each box must be unpacked. Advertisements and user tracking scripts are a particularly heavy anchor to bear.

A light frame paves the way for great content. Minimal effort can have great reward. As my co-worker Trent Walton once said in regards to establishing pattern libraries, “We can spend less time designing the container, and more time designing the content.”

Drawing the Line

Admittedly, this rule of thumb is very subjective. To some, “Light Frames” could be interpreted as “CSS and JavaScript frameworks are forbidden”. I’m not being that dogmatic. I personally find great value in frameworks. To me, it deciding what’s necessary for the content relative to the situation.

Abiding in “light frames, great content” means I’m not limited by an arbitrary number of kilobytes. Some content needs to be bigger, commented, zoomed-in on, animated, felt, sung, interacted with, played. It’s not a zealous adherence to metrics, but a single question: “Does the content justify the kilobytes?”

Does a heavier frame create better content? That’s your call, just add a bit of scrutiny to your assumptions. I think we -with our abuse of parallax and fly-in animations- tend to err on the side of “too rich” for little gain. A website that works is infinitely better than one that frustrates the user.

I don’t have the answers on where the line is for you or your project. Or what constitutes a rich experience. But I think it begins with embracing the Web’s grain. My only other insight would be; don’t underestimate the simple things and don’t force interaction. We live in an era where videos play endlessly on little glass screens held in our hands. That’s pretty amazing… when we don’t mess it up.