I had the good fortune to attend Drupalcon in Portland, Oregon this year. This series of blog posts will recap what I learned while attending the Business + Strategy category of sessions.
The second session I attended at Drupalcon was a great presentation about responsive design, given by Jared Ponchot of Lullabot.
His presentation was a great follow up to a particular aspect from the first session; the pixel perfect design is dead. Web design is no longer about making pretty images on the web, it’s about how to best show off the content of a website on as many devices as possible.
Designing for multiple devices necessitates a design that can change and flow based on the size of the screen, while showing the user the content they most need.
While there was a time that a designer could work to creating an image of a site, based on the partner’s color and style preferences, they now must work with content strategists, marketers, and developers to ensure that the strategy is foremost during the process.
So what does the design process look like now?
Focus on the Purpose
The website team needs to understand the purpose of the site, and that means asking why. Design is problem discovery first and problem-solving second.
That means asking the right questions so that the team can understand the context and problem for the partner, as well as the various target audiences the partner wants to reach. That means not asking what the client’s favorite color is because it rarely correlates to the purpose of the site.
Focus on Content and Hierarchy
It’s about understanding the priority of the content, not the position. And that means having real content when designing. Without real content, the design is just decoration, and the partner’s website is just another pretty picture without any substance or value.
Part of creating a website design based on real content is understanding a content model and the types of content that will be used. Content Modeling: A Master Skill, is a great read about this process.
The focus on content and hierarchy means not worrying about the layout of a page, which is independent of the style. So instead of mockups of the page, a style guide should be built. The style guide communicates the purpose of the design, without dictating every possible layout and nuance.
Focus on Wireframes
A wireframe is a working, coded, responsive, design document. It shows the content priority and works on the targeted device sizes. It does not have styles to it, as styles are displayed in the style guide.
We need to be able to do as few mock-ups as possible, instead involving the client in an iterative process of HTML wireframes that they can view in their browser.
The shift to responsive websites that allow for optimized websites regardless of device size has necessitated a change in how website teams work. It is no longer feasible to create mockups of every page type in every device resolution. Instead, our process has to be more responsive. This presentation did a great job of laying out that concept and validating a number of opinions and processes that we have been working to improve at Mindscape.