The Web is Changing
The web is changing, and the rate of that change seems to be increasing, but that’s another story, for now I think we can assume that everyone in the industry would agree that the web is changing. We no longer see sites built with framesets or flash. Most current sites have a separation of content and design, are accessible and are even responsive! New technologies give us new glitter to add to our sites! Things like icon fonts, svgs, webgl, css animations and 3d transforms!
Our Process Needs to Change to Keep Up
Most sites are still built with a similar process as before though: concept, layout and design is primarily a designer’s task. Then, they hand off some design file in the form of a PSD or AI file for the developer(s) to “cut-up”. Then once the page is built out, the designer gets a chance to approve the look and they’re expecting to see a working version of their static comp. This is the first time the design is seen in a browser context and often it’s the first time responsive is considered, no matter how many times an agency repeats “mobile first”, this process has become the bedrock default of building anything in the interactive space. Not that anyone tries to follow this, it’s just what so many end up doing because they haven’t planned to do it another way.
The Template Problem
This can come into play in one form or another with any project. Most sites of any size require a designer to think up at least a handful of layout options, often called templates. There is for example a home page, a landing page, blog page, etc. So the designer goes and creates a comp for each layout, each with it’s own tweaks and requirements. Often these aren’t showing a cohesive or consolidated look and feel. For example the header section in one file may be outdated to the last request from the client to make the logo bigger, some colors may be slightly off or the content area or sidebar may be slightly a different size in one file vs another, the design resolution may even be different in one file vs another. Anyways, the designer receives the elusive client sign-off and (hopefully) cleans up the files and hands off to the developer team. The devs work on building this out and simultaneously collecting questions to bring up that are not in the comps, like which header should be used, what color is the de-facto blue for this brand, does this page really need it’s own template and the inevitable “what does this do on mobile?”
Responsive Template Band-Aid
The Responsive Web Design movement has forced us to rethink our process. Some have applied a band-aid approach though. They follow the same old process but more. They have designers not only create these various template comps, but also a mobile and tablet version too. So this template problem is compounded by creating more static design files. A simple site with 3 templates ends up with a designer having to create (and maintain) 9 design files. Then the developer has direction for responsive, but needs to juggle an unnecessarily large amount of design files. Plus there are always more screen sizes to test for, this band-aid solution is not scalable.
There are many mantras going around the web. Things like ‘Mobile First‘ and ‘Content is King‘. Some newer mantras hopefully will eclipse some, like ‘Pixel Perfect‘ being exchanged for ‘Design in the Browser‘.
A Modular Approach to Pages
Let’s use the monkeywrench we call responsive design as a(nother) reason to step back and work through a more scalable, stronger process. We need to work smarter, not just harder. There are indicators and many smart teams coming up with smart new processes and approaches to building websites. We’re talking about things like interactive wireframes, UX workshops, style guides, responsive grids and pattern libraries. While each of these techniques deserves a post of it’s own (hint), we also can combine them all into a new process which is full of collaboration and for me, brings back a lot of the excitement of the early days of building for the web. We’re passionate about process and understand it’s an iterative journey. We’ll be sharing our findings along the way.