Following on from creating a new identity, the next step was to completely re-build our website from the ground up.
Our approach to the design process was to focus on the content. This meant we concentrated on our message and what we wanted to communicate above everything else. And so content strategy and wireframing was the first practical stage of defining the layout and structure.
‘Mobile-first’ is a design process advocated by LukeW. On a technical level it involves coding the website at its most basic form and to progressively enhance for devices that are more capable, as opposed to serving a full “desktop” style website to a mobile user before stripping away superfluousness after-the-fact.
The core idea is elegantly simple. Rather than the traditional approach of starting with the ‘desktop version’ of a website and then simplifying it for mobile, Wroblewski proposes we begin by building sites that work well on small-screen, portable devices, then build up from there.
Mobile first forces you to get down to the bare essence of what makes your content work. “You don’t think: ‘Oh, let’s add another thing’ – because you simply can’t. Which keeps everything clean and focused from the outset.”
We found this an enjoyable approach as it forces an intense focus on getting the content right. Thinking in a mobile way focussed us. Why should our homepage have this many elements? Does it enhance our core message? If not, then get rid of it—we don’t need it.
Group blackboard session: defining the content hierarchy.
I wrote a blog post about responsive web design back in May and have since experimented with the technique in this memory: a “responsive story” part of our MemCode PLC series.
Traditional websites have been designed and developed around the notion of a canvas—a fixed dimension from which to base a layout and design—a relic from the pre-digital print era. The problem of course is that the web and the browser are not a fixed size, especially when taking into account emergent platforms and their proliferation of screen sizes.
From Brad Frost”s “Responsive Web Design: Missing the Point” blog post.
‘Responsive web design’ (coined by Ethan Marcotte) is an emergent process being adopted as a solution to the fragmented web. Recent high profile examples include the Channel 4 News website () and the new Gov.uk website (launched 17th Oct 2012). These websites have a single responsive layout and design that adapts to the users’ device. The same website will be optimised for both a mobile device (smaller text, more of a ‘stacked’ layout, etc.) and a large desktop screen; as well as everything in between. This is not only monetarily advantageous over maintaining a separate mobile optimised website for the same content, but it also means the user is getting the best possible user experience for their device.
One big “a-ha!” moment was coming to terms with thinking in proportions rather than pixels.
We were mindful that different devices mean different considerations. For example, elements will generally be smaller for a mobile user—but as these devices are often touch enabled—certain elements like buttons ought to be large enough to be easily tapped.
And so if we are to think about the web in terms of proportions rather than pixels, how is Photoshop going to be an appropriate web design tool? There”s too big a disconnect between the fixed nature of Photoshop (pixels) and the fluid nature of the web (proportions and responsiveness).
The standard way of website development is the ‘waterfall’ delivery process. Websites would first be sketched out as wireframes, then approved. Then fleshed out as a Photoshop comp, then approved. These mockups then inform how the website would be coded, and finally signed off.
The new multi-device web makes this process less appropriate, less feasible. How can you create a layout in the thousands of possible variations to be approved in this linear way?
We had to change our workflow.
As we waded through these unfamiliar waters we found that the process was cyclical and iterative rather than linear.
- Sketch (Content strategy with mobile-first, loose wireframes)
- Prototype (rapid HTML builds)
- Design (Introduce layers of typographic / visual treatments)
- Talk (Discuss with team)
- Iterate (Make changes / code refinements)
We favoured low-fidelity iterative sketches and mockups of key screens rather than a pixel-perfect comps of each page. Designing in the browser was a new method that seemed to complement this. By using our brand assets we could design and experiment—see our designs in situ—work out what didn’t work and quickly iterate ensuring a layout or design would work across device types.
Wireframing key pages for desktop.
Never really finished
Websites are never finished, they are a fluid ever-evolving thing. There will be imperfections, quirks and cross-browser issues that pop up.
You”re looking at version three of the new Mudlark site, and I”ve got a new version ready to go. You might not notice the change, but we”ll be happier with it, and on particularly small or large screens it will carry our content and branding in the best way possible.