A more responsive layout

31.07.12

Posted by Craig

The problem with static mockups for responsive web design is that they are more suited to print – where a design is constrained by a set number of pages, and by the page itself.

The designer uses their skills to create a visual hierarchy within those constraints. Headings are picked out. Important points are bulleted, or pull-quotes are used. Typography is combined with images to create a ‘layout’ that conveys the essence of the message in a single glance. If the reader wants more information, he/she can drill down through the hierarchy to gain more understanding. It is the designer’s job to guide them through this process. Such is the power of ‘layout’ in print design, that it often dictates where the content goes, and in some cases what the content actually is.

On the web however, content is king. Content can be repackaged and redistributed in any way that the user chooses to consume it. The designer has less control over the layout, and in some cases a carefully crafted hierarchy might come unstuck. On the web, the user has a lot of say in their own content hierarchy.

Another idea we like is something called Style Tiles <http://styletil.es> . If we remove ‘layout’ from the initial design process, we can concentrate on visual design and content hierarchy as two separate things. Then combine the two at a later stage once a visual language has been agreed. This can be great for clients who are just getting started in the digital arena and perhaps don’t yet have a defined content structure. Perhaps they just have a few photos and a rough idea of what they want to achieve. A perfectly crafted design filled with ‘lorem ipsum’ might look great and get you super-enthusiastic about your project, but once you begin to think about your content, the layout and structure of the site has to change anyway.

Less time bogged down with the complexities of ‘layout’ in the early stages of the process mean more time to iterate on the design. And we think the end result will benefit from this.