From time to time while reading my Kindle I run across a stray hyphen in a word that doesn’t require a hyphen. The first few times it happened, I thought it must have been a weird glitch. But eventually I realized that it was likely a well-intentioned designer manually adding a hyphen to a word for the print version of the book. It’s an approach I’ve used dozens of times myself, but it’s becoming a problematic one.
This accidental hyphen situation reminds me of line break tags in website content. Every time I enter this tag in a site it makes me wince because I know that it’s a short-term solution, for one context (typically the desktop browser).
The days of creating content — and therefore designing the way content is presented — for discreet contexts are quickly entering our rearview mirrors.
These days, content is created to be used across any number of devices, including those that haven’t even been invented yet. And design solutions need to adapt to this reality. This means a move away from traditional static Photoshop web page mockups that appear so final and suggest there is a “right” way that the content will look.
To break out of this static approach and emphasize designing for adaptive content (and responsive design), I’m exploring three tools and techniques:
Page description diagrams
Page description diagrams help guide the structure of a page because they clarify the priorities of each content block. I think this will me help look at pages as groupings of distinct content blocks (or types of content), rather than consider each page on the site a discreet element. Really, a web site is a grouping of all of these content blocks, and they could be presented in a number of formats in addition to a “page”.
In an effort to move away from static web page designs, I’d like to use style tiles to define basic elements and allow the components of the site to shift as needed on different devices. I like that they put the emphasis on building an adaptable, flexible visual language rather than fixed solutions.
Components rather than pages
Putting page description diagrams together with style tiles will allow me to design the basic look of the website components. The components will likely be presented differently on different devices. So considering them as units that all work together (remembering to use the priorities defined in the page description diagrams) to present a group of content will help me think through how they’ll be designed for different states.
I think it’s still necessary to show a couple of key page mockups, such as the homepage and a basic internal page, so that the team can see the components in action. But ideally more emphasis will be put on creating a kit of parts that supports a fluid, flexible, and scalable design.
How are you changing your design process to be more responsive or prepare for adaptive content?