The web is a living thing. With HTML5, CSS3 and SASS – it’s practically breathing.
Like most designers, I strive for perfection in my work. Often this takes the form of aiming for a pixel-perfect website, a collaboration between developer and designer that yields a flawless render of a Photoshop mockup. The idea being that the completed front end and Photoshop file mirror each other. The idea, however, is just an idea and is not the reality that we live in. The devices being used to access the web are more fragmented than ever. This is why the advent of responsive design was so huge.
All of a sudden designers could optimize a design for several environments. I recall carefully creating a desktop, tablet, and mobile device mockup for each page. As time (and technology) progressed, I learned that pixel perfect on an iPhone 4 will probably look wonky on a Galaxy Note 4, and vice versa. Throw a 27-inch Apple Thunderbolt Display and the Kindle Fire into the mix, and it becomes clear that we can’t optimize for everything.
Pixel perfect isn’t realistic, and I have found the pursuit to be a waste of time. The ever-evolving browser/screen resolution/device/Internet connection are a continuously moving target that we won’t be able to prepare for. As designers, we need to design robust websites that not only roll with the punches, but look good doing it.
Context Is King
I know, the old saying is “Content is king,” but Google will back me up. So I pose the question: if the appropriate content is displayed in a context that isn’t appropriate, how valuable is that content to the user? The best user experiences are taken for granted. The user interface can be so seamless that a user won’t even notice how intuitive it is. As they get more savvy, they get more demanding; bad UX is bad business. To combat this, we as designers need to create great-looking websites that are frictionless and that effortlessly serve up contextually appropriate content to users.
In order to do great work, designers need to think more broadly than just page templates and to leave the idea of pixel perfect behind us. (Far behind us.) At Gravitate, we shifted our point of view and our thinking about the “page template” quite some time ago. This shift in perspective was critical, as it has allowed us to be more focused on developing design structures and ecosystems rather than pixel-perfect page layouts. We now design systems that incorporate a wide variety of elements. Our approach closely resembles a kit of parts. (Where are my Deborah Sussman fans?) We build a selection of cohesive elements, or a web system, for each client that can be expanded upon over time.
Historically, that is what we as web designers have been doing all along: creating form elements, choosing a balanced and structured set of typography that works with our chosen color palettes. Then pairing them with user experiences that create an emotion and provide a context for delivering relevant content to users.
Our system consists of style guides, content, and content blocks.
Style Guide – Our component library
A thorough but concise collection of all the individual elements that could, would, and should be used on the product or website. Think dialogs, transitions, typography rules, H1s–H6s, all of the hex values, hover states/desired animations, form elements, icons, and whatever else this product requires. A front-end developer uses this file to build a great deal of the website up front.
Content – Why the user is there in the first place
Probably the most straightforward element in our web system: relevant content. Users demand it. We make sure to serve it to them as effectively as possible.
Content Blocks – Fluid structures
We apply the style guide elements to the desired content, and we construct unique building blocks (similar to Legos®) that are prime for that specific content. We then build that block to be flexible and reusable. The goal is to create a fluid system that promotes the strengths of each type of content, but that presents the content cohesively to match the user experience of the entire website. The content blocks are housed in one file and each blog explains the different states and views. We also outline functionality options as well as special responsive guidelines, so extendibility is always at the forefront of our thinking.
Why is this approach beneficial?
We should always be challenging our ideas, re-evaluating our tools and methods, and testing our philosophies. The web design industry is constantly moving, and there is something new to digest every day. In order to stay relevant, our practices are constantly being challenged and approved upon.
The “kit of parts” aspect of our web system is helpful for everyone.
It helps our clients move more quickly on their own. Using a web system allows us to build flexible environments for web content to be updated simply and to have the option to evolve. This approach is collaborative and agile. Our clients can launch a great-looking website and roll out additional features in phases, ensuring we keep the look and feel cohesive.
Our designers and developers can build a faster and more complete product. Long gone are the days of our developers guessing what a form error should look like or inventing the confirmation page layout. We get everything designed up front. So the designers can be more thoughtful and really hone in on the interaction between the users and the website, focusing on appropriate animation and considering the best context and flow for the content. From a layout perspective, it removes the limiting structure of a page and gives us the ability to create custom page layouts on the fly that still look seamless and well thought out.
A technology driven process shift, for a better web.
Our team has a lot of control over the processes we use to create great work. It’s important, as the web industry matures, that our team can mature with it. Since the shift in design thinking, we’ve made some complementary process shifts company-wide, resulting in adding a great deal of value to our clients and our offerings. Our design work has gotten more thorough, and our designer/developer collaboration is going through the roof. We aren’t designing ourselves into a corner anymore. And, most importantly, we are faster and more agile, which results in being able to provide higher value to our clients.
We will never be able to predict the future, but thinking systematically gives us the freedom to make changes and still keep doing the highest-quality work as technology evolves.
Do you have any experiences with flexible content systems, component libraries, and/or content blocks? Share your thoughts below.