Designing for Responsive Websites

I realise that everyone has different views and that some people think responsive web design is mainly for developers to worry about. However in this post I don’t want to get into the pros and cons of designer/developers and dare I say ‘designing in the browser’. For now I would like to focus on the role of the designer and the challenges we face.

In my last blog post, I discuss the development of Flat Design and how I believe flat design has partly emerged as a result of multi-platforms. The post discusses how we live in a world where everyone wants to access information on the move and that mobile/tablets are becoming a common sight in society. The move away from desktop over the last few years has required designers and developers to refocus on digital projects. I’m not saying we are moving away from desktop design all together however it is no longer the only thing to consider. This is why, when executed correctly, responsive web design is an increasingly popular option.

Inevitably, when designing responsive websites, layout becomes a much harder task. Since the layout will vary on different devices, we need to have a clear understanding of how we want to arrange the content on each device. The responsive concept is very simple, to create one website that works on all screen sizes however this is not a straightforward task.

The major challenge I have faced centres around the fluidity of responsive designs. When designing for print, the positioning of an element is always fixed and a few years ago the same could be said for the majority of web design. With responsive web design we need a strategy to make the design and the content flexible. If we take imagery as a basic example, static images can be cropped anywhere and that’s it, job done. However with responsive imagery the size and crop is constantly on the move. This is the same for all the elements in a responsive website and as a designer this is hard to come to terms with. Designers are used to control, we move an element a couple pixels to the right and all of a sudden it’s perfect, move it back a couple of pixels to the left and we are guaranteed to lose sleep over it.

With modern websites, not only can an element move on the page, it can change size, structure and shape. Good responsive design takes all this into consideration so that we maintain a consistent user experience. For me, this has triggered a big shift in my mindset when it comes to web design.

At Cargo, I have a lot of discussion with the development team around working ‘mobile-up’ as opposed to ‘desktop-down’. This is a prime example of a developer challenging their process and trying to come up with a better solution. By nature designers love to do this, granted we very rarely share this information, unless of course it’s via a Keynote in a room full of similar ‘creative minds’. But this got me thinking when it comes to web design why should designers leave it down to the developers?

I honestly believe a Designers role is more than just supplying some pretty visuals in a frustratingly layered Photoshop file. The emergence of responsive web design means we have to push ourselves further and constantly look to develop our own process and knowledge of the web. It’s true that a designer does not need to be able to code but we do need a good understanding of the web.

Personally the responsive world has opened my eyes when it comes to designing responsive websites. It brings with it a lot of new challenges that I believe designers should embrace in the same way developers do. If we are designing responsive websites we should design a fully responsive website. We are not doing our job correctly if we just pass on a Photoshop file and wash our hands with it. I’m not saying we need to visualise every page at every breakpoint, but we should definitely consider it and by increasing our knowledge and pushing our process I believe we can create a more seamless project experience.