Responsive retrofitting can be hard and time-consuming as the design hasn’t originally been considered for all screen sizes. It can be a challenge to deal with fixed sized elements and non-flexible modules.
Fortunately, there’s a good side too! You already have everything you need to rethink the website: content, imagery, information architecture… which rarely happens when designing a website from scratch.
Step 1: gather printed desktop screenshots of the pages you will work on, a few blank paper sheets (I used A3), pens, scissors and blu-tack.
Step 2: Cut cut cut cut cut! Roughly split modules, content, navigation. It doesn’t need to be perfect!
Step 3: Compose your mobile/small screen layout by putting the pieces together on an A3 sheet, recut elements if necessary, discard modules, cross out elements, draw others on top, add notes, communicate!
Responsifying with collage is a simple exercise of layout design, similar to sketching. Although can be done by one person, using it in a group can facilitate discussion. It is especially adapted for producing small screen layouts (for mobile phone) but nothing stops you from using your elements for tablet-size or very large screens layouts.
Above, a mobile version/small screen version of a blog page listing all the articles. Some elements have been removed, as we decided they were not a part of the core content. Buttons are moved and restyled to adapt to tapping on a touch screen.
A homepage with elements on 1 and 2 columns on mobile. In order to preserve readability, it changed again later during development.
Above, a service page on mobile/small screen. The multiple subnavigation was a challenge we tackled by using select fields and expanding modules of content.
Collage is a great communication tool to throw ideas around responsive layouts. As it references existing elements, it gives a common vocabulary for client, designers and developers on the project. It doesn’t require any technical skill to create the layouts and can be less intimidating than sketching.
As I mentioned before, it’s a good occasion to review, simplify your design and assess what’s your core content by moving, adding or discarding elements.
It’s fun, engaging, accessible and allows us to stay away from a computer for a bit!
Article originally posted on fffunction blog.