Awwwards

The 5 Steps of An Effective Responsive Web Design Process

by Ciprian Paraschiv on 11th April, 2017

Web design

How many of you start your designs creating a desktop centric psd file, throw in some Lorem ipsum and then present the results to your clients for review? The problem with this approach is that, in a mobile world, those static elements won’t offer any interactivity and will speak little of the user experience.

There must be some better approach, you may say, and surely it is.

You should start by thinking both content and mobile first. This way, you’ll be able to create low fidelity responsive prototypes early in the process.

Mobile first design

A mobile first approach will allow you to design creating gradual enhancements. It will help you prioritize the content so it can adapt to the constraints imposed by the small screens. This approach enhances usability and helps you make sure that the UI won’t be loaded with unnecessary functionality. Also, make sure that the essential content will create fast-loading mobile experiences.

The advanced layout created can then be used to build up the desktop version of your design.

At the beginning of the project, diving into Photoshop and creating high fidelity wireframes might be tricky as what we should be focused on is the big picture of our design: colors, typefaces, buttons, menus, inputs.

A better approach is using style tiles. These are design deliverables which include all the above listed design elements that are key to define the visual brand, without defining any layout.

Think of them as a “catalog of assumptions” that do not refer to any dimension or device. Just as interior designers offer you different fabric samples so they can get your approval, the same way you can use style tiles to get your client’s go-ahead.

Content first

Initiating a web design without content is like buying a present bag without having any idea what the present for you beloved one will be.

A content first approach will enable you to better complement the message the page needs to transmit. It will let you know what part of the content will need to be prioritised and emphasized. Having a content hierarchy at the beginning of your design process will also help you make better layout decisions.

I assume that most of you are aware of these benefits, but what we all suffer of in reality is that our clients almost never know what the final content will be in this initial stage.

But this shouldn’t stop us from asking at least some ideas of what the content will be. We should at least ask for some samplings of a first draft. Try to reach the one responsible for the content and ask for his input as early as possible in the process. If there is no such person, the last thing you can do is to use text samples from the competitor’s website.

The overall information architecture and content strategy should of course have their grounds in a solid user research. It’s also relevant to answer important questions of how each content type comes under the site’s goals.

Sketching and creating a responsive prototype

Static elements don’t transmit much of the real experience. The layout don’t adapt according to the screen size and they lack interactions. In order to bring value in your process, you should present your client a responsive prototype.

So how can a workflow for producing such a deliverable should look like:

  1. Map the entire website’s content
  2. Prioritize the content that will be part of your mobile pages. A visual hierarchy is starting to get shape. Content wireframes are really easy to understand. They consist of blocks that include content categories. In Photoshop, due to the high level of details, any change in layout implies having to change how the text flows through the document. With content wireframes you can play with your layout much easier, you can estimate how big something will be. They are also really easy to do in html/css (container elements: divs, sections). You can make these responsive. You can them to start showing the client what happens when you are on the phone. As long as you will walk with your client across the entire process, the client will understand it. With content wireframes we are not designing pages, we are designing systems of components.
  3. Once your content is clearly listed and the strategy in place, move forward to sketching your responsive workflow. This step will help create a clever, organized layout that will scale up easily.
  4. Sketching allows you to discuss your assumptions, refine rethink them.
  5. With a set of sketches in hand you can move forward to low to high fidelity prototyping, which means creating a simple HTML layout or using dedicated softwares such as UXPin and InVision. The goal at this point is to determine if the navigation, the content hierarchy markup and breakpoints work properly. Such prototypes also enable some functionality and interaction.

If you want to speed up the process you can decide on using one of the existing CSS Frameworks, with Bootstrap and Foundation being the best known options. The are many benefits of using a CSS framework: they offer an organized, grid based approach and reduce cross browser issues, less testing and debugging being required.

Ciprian Paraschiv

LEAD DESIGNER

I am a breed of SEO specialist and UX Design advocate. My strong engineering knowledge is key to reconcile the distinct goals of the two areas. I design with user’s delight in my mind, while not averting from optimizing conversion rates.