Adapting to Responsive Design
Responsive design involves more than just fluid grids and media queries. The move to adaptive web sites touches every part of an organisation: from content needs and content management, to editorial workflows and project management. The way we design and build web sites is changing, but the way we write, manage, and evolve our websites needs to change, too. Mark will share his thoughts and experience of how adopting responsive web design practices needs to begin in the the boardroom, rather than the developer’s office.
Talking about content and business: the technical side is really the simple bit of the equation – but the business needs to change and it hurts. This talk will be cathartic, it will be about pain and you can all nod knowingly to each other…
(film clip – alice down the rabbit hole from The Matrix. You are living in a prison for your mind. Take the red pill and stay in wonderland and see how deep the rabbit hole goes…)
John Allsopp’s article A Dao Of Web Design showed us, long ago, that the web is not a medium of control. The first page ever made on the web was fluid, it was responsive, it adapted to whatever it was viewed on. Then we broke the web. But now we have finally taken the red pill.
Quote from Bobby Solomon (Disney) – that they’re bored of talking about responsive design; it’s how self-respecting websites should behave in 2012. But that’s ok for Disney, who are huge and don’t have clients the same way as designers! For the rest of us this has been hard.
Designers have been making books for a long, long time. You can make a beautiful, legible, readable thing. Text block based on the object (shows an example of a canon) start with the page and work in to set the grid. Responsive design turns that upside down. We can no longer design from the edge inwards any more, because we no longer know what the edges are!
Centuries of knowledge about creating grids… that’s a lot of baggage to discard. That’s a lot of knowledge to throw away. It’s painful. We’re already trying to force pages back into responsive design with breakpoints.
But what happens in between the breakpoints? That’s where it needs to be fluid and we need to be designing in that fluidity.
So how does responsive design affect and challenge businesses?
It costs more. Perhaps 30-50% more time than a traditional fixed website design. Because it’s hard and we’re still freaking out about it. We don’t have a good body of knowledge about it yet. This costs money, so how do you convince the client to pay more? Well certainly don’t pitch two options where responsive is more expensive… they’ll pick the cheaper one or the one they at least understand. Instead sell the usefulness, sell the ways it will win them more customers/business, say you’ll build something that adapts to different devices (don’t say “responsive”!). Use distraction techniques! Talk about sustainable design…
Advertising. “Advertising has been ruining the design of content websites for 20 years” – Roger Black. Elephant in the room! It can make things into a non-starter. When big display ads bring in the cash, the sales teams will say no. Technically speaking serving responsive ads would be fairly straightforward; but the way ads have been made and sold has been set for a long time. People buy slots and put known ad sizes into them. Including those massive takeovers. How do you make crap like that responsive? You can’t really. The cultural shift required is to stop people buying “a slot” and start buying a set of slots; the same ad in different contexts/breakpoints/etc. But that’s not what really kills it dead is mobile sites (m sites, m.foo.com) with their own teams and revenue streams. So going responsive kills an entire team and revenue stream. That can kill responsive dead. Dead in the water. It’s difficult but not impossible to solve… but it’s a big bit of business pain.
Process challenges. (“Google ‘bob ross squirrel’, I’m not going to say why…”). Bob Ross always turned little mistakes into something in his paintings. “Everyone has a game plan until you punch them in the face.” – Mike Tyson. Responsive design is a right hook to design process. Mark spends much more time sketching now; and more of the time with clients. Good clients can handle it… you get more honest feedback. Some get a bit freaked out by the design process, they thought they were buying a pretty picture. But it works to get them involved. The old design processes don’t work – wireframes don’t work, are you going to multiply your work by the number of breakpoints? Prototypes work, get into the browser sooner. It gets you into the environment sooner – it gets the client into the Content Problem(tm) sooner (and they all have a content problem they don’t want to deal with…).
Teams – specifically, silos. Break the silos, get people sitting together, you will learn heaps from each other. Work in product teams (not discipline teams) and iterate quickly.
“Does this work in X browser?” isn’t really a question you can even answer any more. X browser in X resolution at X size……
“Responsive design forces a focus on content that many organisations don’t understand” – @baskwalla …Mark would say “don’t want to understand”.
Editorial process. News, for example. A news story starts as a little seed of content, it could be one single sentence when news breaks. More content comes in from the wire, from leads and contacts, other news organisations. The story coalesces, snowballs, picks things up on the way. The story, the content, is not a page! It has quotes, blogs, tweets, videos, links… this big snowball of stuff is the story. The content is not the page. The story is the link – the links between all that content. The story is the metadata.
We’re the only people who resize their browser. (mimes us waving the browser window back and forwards) Only we do this!
The web is made of HTTP, links, files. But what is our content made of?
Talking about CERN – they have the LHC, but they also just invent things to solve their unusual problems. They have brilliantly interesting stories that aren’t being told. They think boring graphs are awesome content. Mark had to develop a guide to “what is the wonder of this content”? Mapped out the comprehension levels from scientist to general public. Got the great visualisations instead of boring graphs.
We need to have good content with good metadata, so we can put it together into great things.
We’ve taken the red pill, it’s an incredibly exciting time. We’re changing design theory of thousands of years. It’s up to us to push this forward, to push the tools forward, to challenge the way things are done.
