The interactive feature in the November, 2014 issue of HOW Magazine is an article I wrote about modular content, and how this new approach to content management is requiring a new approach to web design. It’s called Moving to Modular…
Things aren’t always what they seem — and that’s especially true when it comes to the web. Some of the most inspiring internet sites today are surrounded by the trappings you’d expect from contemporary, database-driven content management system-powered websites — chock-full of advanced engagement points, complex templates, third-party integrations, and, of course, doggedly persistant tracking. But, much to our surprise, many of these web beauties are in fact custom static-page old-school designs. They stand alone within the workings of the larger, more complex web ecosystem we’ve come to know so well.
You’ve likely encountered these noteworthy sites before. They’re the Pitchfork cover stories, the Teehan+Lax case studies, the Snow Falls — the sort of visual storytelling that requires a completely different approach than the typical web template or framework supports. These are web pages that are, technically and visually speaking, in but not of their parent websites.
Unfortunately, that the set-apartness of these pages is not immediately obvious does tend to present a perception problem. When you can seamlessly click from a standard New York Times news story, for example, to a piece like Snow Fall — which, if you’re unfamiliar, is an almost 20,000-word piece of investigative journalism presented with layers of animation, video, and other immersive media that went viral last year, drawing in an unprecedented 3.5 million unique visitors! — it’s all too easy to assume that both were created using the same tools and processes. That there’s some magical content management system (CMS) that makes creating pages like Snow Fall as simple as, say, a 500-word blog post. But there isn’t. Not even close! These gorgeous and rich multimedia experiences are thoroughly custom-made. They are what happens when teams of designers, developers, and writers fuse content and structure into one thing and slowly shape it, like a piece of art, over months. There’s no editing layer for this kind of content. It’s code down to its core — which, by the way, is not what I had in mind when I called these things “old-school.” To be sure, the code is the latest and greatest in HTML5 and CSS3. It’s the lack of CMS — or, perhaps better put, the lack of a separation of content and form — that is the throwback. Nevertheless, once you’ve experienced the Snow Falls out there, it’s tough to not let them shape your expectations for what is sophisticated or good or even necessary on the web.
Now, that might not be a problem. If you have the time and resources to follow the Snow Fall approach — which reportedly took 6 months and 15 people to complete — or if, at a smaller scale, you’re simply designing things that only you and your developer and writer pals are going to maintain, then why not do as much “snowfalling” (as it’s come to be called) as you like? But most of us are designing things for other people, which is why we have learned to love the CMS. It helps us make things that are useable and scaleable.
Exploring Content Management
Once you’ve experienced the Snow Falls out there, it’s tough to not let them shape your expectations for what is sophisticated or good or even necessary on the web.
We do love the CMS now, right? OK, maybe there’s some angst left there. After all, designing websites that use a CMS hasn’t been easy. In fact, for years now, the CMS has backed us into a bit of a dichotomous corner. On the one hand, we have the basic, one-size-fits-all page template that can be used for “anything.” Typically adding and naming a page like this is just one click away in a CMS, but then you have hours of fussing with a WYSIWYG tool to look forward to before you dare publish the thing. (Sadly, there’s no greater lie on the web than “what you see is what you get.”) But we go this route because it’s a whole lot simpler to design the container and assume its contents are someone else’s problem. On the other hand, we have the complex, custom templates that automatically call information out of a database and specifically arrange it in a unique layout on the page. This approach seems great at the outset because it offers such fine control over the presentation, but it quickly leads to template bloat and a design management problem the CMS cannot solve. CMSes make changing a page’s contents easy, but changing a page’s structure and styling — how it looks — usually requires delving into the code. That’s the creatively disappointing history of the CMS in a nutshell.
Pushing Responsive Design
But, there’s been a lot of movement over the last year or so to solve these problems — to expand the creative potential of the CMS. The proposed solution, like responsive design, is very much of the community; an unbranded concept of the zeitgeist, that, at the moment, goes by many names. You may have heard it called “content blocks,” or “flexible templates,” or (my favorite) “modular content.” Though each one is slightly different, the basic concept they share is of a tool that makes it easy to design and arrange a page composed of a variety of media without having to write even one div’s worth of code. This kind of flexibility offers site administrators the autonomy they’ve craved for years, and saves everyone from wasteful, front-loaded planning phases where the same what-if mentality that makes a stockpile of food seem essential in a suburban basement convinces design teams that a stockpile of templates are necessary for a mini-site. That all food eventually spoils is the Achilles heel of every prepper. Well, templates spoil, too. But they bloat first. So instead of designing every possible layout that might be needed someday, modular systems are layout-agnostic; they focus on offering content components that can be safely arranged ad hoc. Many developers have offered versions of this concept for use in some of the largest CMS communities on the web. There are several modular-style themes for WordPress, one of the most plug-and-play being Divi. Similarly, Drupal users can use the tools created by the Layout project to offer more flexibility to their sites. You should try them out.
Modular content is obviously a major leap forward for content management. But it’s also a paradigm shift for web design. It will continue to push the transition that responsive design began, propelling us into a new phase — one which Dan Mall recently referred to at a Typecast event as the “post-comp era.” See, modular content kind of scratches the “snowfalling” itch, but the custom nature of Snow Fall’s presentation is really the uber-comp. It’s a precision-designed closed system — a single composition. Throughout its creation, benchmarking could quite literally happen by looking at a snapshot of the page, or the page itself. But the entire point of a modular content system is that it enables creative flexibility such that no single comp could accurately represent the many ways a page using it might look. The design deliverable of the post-comp era is a system. It’s a visual language distributed among the many functional patterns of a website.
Embracing the New Paradigm
This transition is pushing web designers out of working in Photoshop exclusively and into a diverse set of other tools and systems that better account for the complexity of web design today. While that can look quite different depending upon your individual preferences, a possible process could begin in Keynote, where you can loosely assemble a visual inventory of possible styles and solutions from around the web that will help establish a general direction for the design. Next, assembling an equally loose mood board can help to explore how the website’s overall visual language — its colors, textures, and imagery — might take shape in specific UI details. In parallel, typography can be explored with tools like Typecast, and grid systems with a variety of responsive frameworks freely shared on the web. All of these individual steps are part of establishing a design system, which can finally be documented as a complete style-guide in Photoshop, if you like, or even a working pattern library, depending upon how closely you work with a developer.
It’s not as if you’ll never again lay out a specific web page in Photoshop. You will, of course. There are still plenty of uses for that, among them generating a snapshot that can show someone without design expertise what a website might look like. But this new way isn’t about showing, is it? It’s about knowing — knowing each piece of the greater whole, how they work, how they look, and how they can form future possibilities.
Years ago, we thought we made a single transition, from print to web. But we’re continuing to discover that, for designers, transitions aren’t finite. They’re a way of life. Design, of course, is, in its very nature, about transition. It’s about forming with intent. Our context — the web — has changed and will continue to do so, making the print-to-web transition and the comp-to-system transition just two small pieces of this permanent work in progress.