Musings on implementing a recent responsive design
Responsive design. A real hot topic, and one of the interesting things that has come out of improvements in browser technology combined with the constant creative pushing of designers and developers to make the most of the power and limitations of HTML and CSS3.
Time to go the responsive route
Before starting a website redesign process recently at work, I thought it was a good time to suggest to our stakeholders that we design responsively. My initial aims were, having read the wonderful 'Mobile First' by Luke Wroblewski, to try a mobile first approach, as this would both help prioritise content and provide a framework to help settle some design decisions, as well as look at a responsive design. We had already planned on a content audit and rewrite to slim down the monolithic beast that was our old site, so it seemed a good time to go the responsive route.
In the past, having developed process-heavy web applications rather than content focused websites, stakeholders were often more concerned with just the desktop experience, things like tablets and iPhones were not a common sight, and both developers/stakeholders felt that mobile was a 'nice to have' feature that often got shelved when a deadline loomed.
To my surprise, I was really pleased when one of the stakeholders approached me and asked whether the website design would work on their smartphones with little prompting from myself. The concept of a fixed desktop browser truly is on the way out it seems.
Fixed designs and unlimited devices
The designers we were working with went through the design process, and after several iterations came up with a lovely set of designs, one for mobile devices, one for 'desktop' sized browsers, with some options for screens with larger real estate, with the collective idea that site elements would reflow between the designs.
We started the Drupal build, and this is where the challenges started. I'd recently just bought a Nexus 7, and started looking around the office to see what others things people were using. Turns out, all sorts of phones (several generations of iPhone, and also iPad, plus a bevvy of Android devices).
As development progressed, I soon realised that the designs that had been delivered worked perfectly at specific viewports (small, big), but just didn't look quite right on things in between, and my nice idea of content reflow wasn't going to work without a lot more effort.
Herein lies the problem. We were designing responsively for specific device widths from the get go. By the end of the project, who knows what new devices (and viewports widths and heights) would have been unleashed on the world?
Solution: design around the content
My epiphany came late in development, when I was getting frustrated wrangling with different targeted media queries for specific viewports, each containing a huge number of selectors.
When coding up responsive CSS, design around content, not specific devices.
I realise that it is impossible to design and test on all devices, but by designing around content, more often than not you will find that things just work on different devices, often even if you haven't specifically targeted them.
Responsive design is hard but very worthwhile, and while it certainly adds massively to the time needed to create a site, by starting with the focus on the content, not devices, you can ease the site creation process on all levels.
Further to this, I've started a list of tips, and will be adding to them as I go.