A response to responsive design

The web has changed dramatically over the last 20 years. We’ve evolved far past the early days of the Internet when clunky, largely text-based interfaces ran rampant with dancing GIFS and neon backgrounds. It's given way to minimal aesthetics as the importance of UX has come into the spotlight, bringing more use to our screens.

But the way we design? 

That has remained largely static. 

With the advent of responsive design, we’re not designing for a single viewport anymore. Gone are the days of 760 x 540 safe zones. This is also complicated by the need for agile project management structures (we want it quicker now too right?). Designers are being asked to do more work with more iterations…. but the process hasn’t changed.

We design for web primarily using tools meant for print. That doesn't make sense anymore.

At Edgar Allan, we set out to redesign the design process, in the only way we know how: scrappily, one-mistake-a-a-time (much like how we built out our office).

Testing the Waters

Our goal was to create a process better suited to today’s multi-platform web. On our quest, we tried a couple approaches:  

1: The Side-By-Side

The most basic approach, designers sit with a presentation layer developer.

Pro: You get to see the design evolve in real-time and help work out the details as they are decided.

Con: Lots and lots of back and forth around the nuances of type and elements at different viewports…it kind of drove everyone nuts.

2: Document All the Things

With the goal of taking out the guesswork, we documented every teensy piece of the design with old school red lines and measurements.

Pro: We could remove all the possible questions by having every piece of design at every viewport meticulously accounted for.

Con: Maintaining all the documentation is sloth-slow and subject to human condition. For the developer, it’s like trying to assemble code from a 200-page written instruction manual that might be completely wrong. Good intent from the designers, but might not work in code.

3: Template or Components: Pick Your Poison...

Getting running quickly sounds nice, but once we were mid-river we discovered maybe we weren't in the best of places.

Pro: 80 percent of our design goals came very very quickly but..

Con: It’s the other 20 percent that kills you, dragging down the project. In the end, we spent more time modifying things that were already built than solving for customer needs.

4: Just Make the Dang Thing Already

Getting our design out of astatic environment and on the web as quickly as possible proved the most efficient. After one round of feedback it gave us the ability to get into the browser — and more importantly, see what breaks — in real time.

There are lots of tools that facilitated this approach but after getting past the marketing layers to understand the capabilities, they fell short. They either abstract too much or do too little to provide a realistic web rendering. 

And that's when we found Webflow.

‍

What ultimately won us over wasn’t features — it was the company’s mission. 

It felt like they understood our pain.

Annnd Done...

That was 2015, we were sold. At that point we moved all our production design onto the Webflow platform. 

Instead of building static style guides in InDesign, we define primitive elements — H1 through H6, root colors, list items — as another page within our build, not as a separate document. 

Then as the design evolves, so does our style guide. More importantly, as the design happens in the browser we can craft every variation in different viewports and obsess over details without everyone losing their minds (or ruining inter-office relationships).

It allows us to iterate faster — benefiting our clients. Rather than flat comps and multi-page pdf decks, our clients get working prototypes that help them better envision their future web presence — enabling better feedback — helping us deliver the final product quicker. 

Clients get working prototypes that help them better envision the actual site.

We’re now able to move from creative brief to live build within a matter of weeks instead of months. That's right, weeks.

Webflow is our sandbox. It gives us a head start. We’ve refined our design process as the platform evolves. We understand the it's capabilities and are able to give the Webflow team real-time feedback of our clients needs. This translates to a set of standards that scale out to broader design and development teams.

If you'd like to accelerate the way you work and design, give us a shout. We'd love to talk with you.