The Responsive Design Secret
Responsive website design - what technique should we use?
…there’s the three fixed sizes approach - little (320px), medium (700px) and large (960px). There’s 100% fluid, 100% fluid with media queries for one or two stages smaller, or 100% fluid from 320 up. Or fluid with a min & max-width. Fixed at 960 with a separate domain and redirects for mobile? So many options…
What is best practice?
I’ve used most techniques but none of them are a catch all solution. After writing in favour of good content (Content is King) I’ve realised the obvious.
Mapping Content
At Base Creative we’re making big changes to our design process and content strategy is at its heart. We’re mapping content _very _early doors – be it text, images, video or interactive functionality – be it unique, reoccurring or aggregated. Our “content map” (similar to a site map) will drill down into each page creating a hierarchy of importance for all content and other elements.
The content map will allow us to visualise navigation and wireframe page elements based on their importance. It will also read exactly as our future HTML structure (top to bottom).
When we start thinking responsively we’ll know immediately what order to re-flow (or hide) content. What responsive technique do we use? Whatever suits the content best.
I go through a similar mental process to shape a design anyway, but writing it down like this will help everyone understand – especially the client! It will also keep focus on what’s important: content.
This approach is the perfect start towards a device agnostic website.
Understanding content is key, so remember:
- Content doesn’t “fill in the blanks”, it’s quite the opposite; content directs design.
- Website design isn’t strictly a page-by-page process. Identify the main elements (content or functionality) that will occur across multiple areas.
- Base all content decisions around a hierarchy of importance (relating to the ultimate goals and call-to-action of the website).
When you consider content in this manner responsive web design is a piece of cake.
