A Responsive Web Design Process

Despite the huge amount of knowledge being shared on the subject of responsive design, I get the feeling that the workflow is still very mysterious. I’ve been thinking about a right process for quite a long time and finally came up with what I think is a good look at the practical side of designing websites in 2013.

1. Plan your Content

Planning your content is the first and foremost solution to any design project. It is clearly the most underrated part of the job, and it’s not because you are a designer that you shouldn’t be doing it. It’s where the best of the teamwork happens and where the creativity of everyone, from UX designer to back-end developer can be put to the test. Our best websites have been those of which the content was thoroughly planned. So here is our basic approach as a 3-man team on content strategy:

1. Content audit: get everything you can, from text to images and logos.
2. Lay out your website in a Google Doc (or anything similar) starting with the general overview (brand message, site architecture, etc) and detailing every page’s content. Sticking to a text editor/word processor will prevent you from prioritizing layout over content as the wire-framing part usually does.
3. Sketch in every context (mobile & desktop) and start thinking about the system supporting your content. Think about responsive layout patterns and reconsider every piece of content to blend interactivity and content. Try sticking to a pen and paper/whiteboard/napkin for this part.
4. Go back to 2. and update your doc with the new ideas. Repeat as many times as you wish.

These are only the very basic components of a content strategy. You can add a lot of steps to this process depending on your project scope. From user personas to content maintenance guidelines, there is a lot to learn on Content Strategy. Fortunately, there is a ton of good reads on the subject but I suggest you start with Erin Kissane’s great book.

2. Design in your context

From my personal experience, the Mobile First approach is excellent for the content strategy and sketching part, but not for Photoshop. I know some people like to start in a 320px wide file, and I recommend trying it to know if it fits you.

Thus, since I work with a 15 inch MacBook Pro (1440px x 900ish), I start by creating a new photoshop file of that exact same size. Then, I create a 1280px “browser” frame inside it. I linked a Free PSD template at the end of this post (okay I know you scrolled to check) so you can start using it too.

3. Drop that 960-12-column-grid thing

Although grid systems are still very relevant for responsive design, I suggest you start with minimal composition rules: frame edges and center. You can then adjust the edges and build your grid as you design. Not only will it help you get out of your 12 column comfort zone, it will also improve the simplicity and creativity of your layout.

4. Identify your constraints

As with any design project, you should first identify any constraints and build around that. These can be: important text block (for blogs or magazines), advertising area, or other medias (images, videos).

Additionally, you can think about the inner pages and about the flow between pages. For example, in one of our first major responsive project, I began with the the 300px wide ad as a first constraint, but soon moved to think about the flow between the three main pages: Jobs → Job → Employer’s page. I then built the layout around that specific flow.

5. Drop the ornaments, focus on typography

Web is 95% typography: it should be the first priority in your design workflow. I personally use Typecast to ease the process of finding type combinations and prototype typography. Doing this before jumping into Photoshop has helped me improve my efficiency.

So, start reading less about web design, and more about typography.

6. Imagine your solution in a mobile context

Having a good idea of the smallest and biggest format is, more often than not, well enough to know how all those in-betweens will look. When you feel good about the current look of things, try to replicate everything in a mobile format. I simply add 320px to the left of my canvas (see image) which then makes it very easy to copy and rearrange all my layers in a new ‘Mobile’ folder.

7. Test your design in the browser

No matter if you or a front-end dev will code the website, getting to feel your design in the browser is a critical step in any responsive web design workflow. Not only will it benefit the design part, it will most importantly get your teammates in the loop. Their impression will help you fuel new ideas and jump back to step 2 with a refreshed view.

No magic trick

Designing responsive websites is a change in mindset from the ground up. You need a good content basis from where you can start and design a system in your current format. Then look at things from a mobile perspective (or vice-versa) and finally see how it looks in the browser.

There’s no secret recipe. It’s a cyclic pattern in which you’ll sometimes get headaches, sometimes bursts of joy, but from which you’ll most importantly learn to create better websites, fit for the web of today and tomorrow.

Freebie

1440px x 1060px Responsive Design Starting PSD