Dave Rupert: Real-Life Responsive Web Design: Lessons Learned

Dave Rupert (@davatron5000) was speaking at Smashing Conference about lessons learned during a responsive re-design, these are my notes from his talk.

Pre RWD

Take a PSD and match it exactly.  Make it pixel perfect.  That's why I drink.

Then...

Ethan Marcotte described RWD.  I was very angry about it but it won me over.  Why was I angry?  We started on small computers, then we got bigger and bigger screens which we thought would cary on forever.  Then the iPhone launched and our websites looked stupid.  m-dot sites fixed it.  Then the iPad.  Dammnit!  Then there were even more devices - we had IE6.5 on the phone and I was already drinking.  Now your fridge can play Netflix.  And your car.  And your glasses - you have a computer on your face!

All comes back to A Dao of Web Design.  We should have been embracing fluidity from the start, had we been flexible before the shift to RWD wouldn't be too hard.  Our home base is being device agnostic:

• Hostile browsers.
• Tiny screens.
• Slow connections.
• Touch inputs.

Hostile browsers

For example IE8.  What a curse.  What if the boss uses IE8?  I'll buy him a new computer.

Opera mini:  stupid and I hate it.  Hasn't been udated since 2009(?).  But people use it.  Their desire to save money is greater than their desire to use our cool web browser.  Why can't they use mobile Safari?  What about the embedded browser in Twitter?  If you use mobile enough you start to realise how important supporting hostile browsers like the iOS UIWebView is.  Not everyone has the choice of which browser to use.

Tiny screens

Mobile first is the new default.  Desktop usage has seen a 10% decline over the last year.  There's more mobile everything than anything else.  For people a mobile (tablet) device is their main way of interacting with the web. 

90% of users use multiple screens sequentially to accomplish a task over time.

Starting mobile and builiding up is better than starting with the desktop comp of lies.

Slow connections

John Maeda, Laws of Simplicity: No one likes to suffer the frustration of waiting.  Slow == unhappy. 

Not your fault:

• Airplane wifi
• Train in a tunnel
• Conference wifi
• Far corner of your house
• Standing by some metal(!?)

Your fault:

• Too many images
• Too many fonts
• Too much JS
• Non minified assets
• Not minimising requests

Set a performance budget.  Put yourself on a diet, web wise.

Touch inputs

Even desktops now have touch inputs.  Windows 8 is touch first.  Size != touch.  http://cdpn.io/ylGho  Apple doesn't support touch on the desktop and it's the one we all use.  Our ethos is all Apple centred and they are the odd one out.  With the Kinect you can control the device with gestures.  It's impossible to reliably detect touch :-(   The best thing you can do is test  on a device.  The iPad mini is the same as the iPad but 80% smaller.

Responsive process

"If you see the Buddha on the street, kill him."  If you see someone who thinks they have responsive process figured out then they don't.  "80% of a website's dev time is spent on talking about what links go in the navigation"  ~Dave Rupert.  When it was the m-dot people didn't care because it wasn't the website, nobody saw it.

Most organisations are waterfall:  Plan -> Design -> Code.   This setup is really hostile, the groups don't talk to each other unless it's by short emails.  They can even be in separate country!   A better version is to mix up the teams - make hybrid teams.  You can still get the same waterfall flow but now it's within a team rather than between teams.

Designer/Developer relationships

Devs:  give designers access to staging or local builds.  It takes away the mystery of what they're going to get.  If they freak out it's much earlier and you get more time to sort things out.

Designers:  Learn how to use web inspector so your feedback is more valuable.  Keep the barrier to fixes low by supplying code that's in roughly the right shape.  Learn the venacular of how the web is built.

The best thing to do is sit next to each other.  Know who the other person is and how they think.

Deliverabless

We're handing over tiny bootstraps.  Should be a system to build a site, not a built site.  Modular pieces.   This empowers your client.

Clients

TL;DR:  it's messy. 

Ends up being a lot of talking.  Talk about the decisions you make.  Like any good bank heist you need to find an inside person.  Work with that person. 

Let the wookie win!  Your life, your mental health, you - aren't worth sacrificing for a client.  Pick your battles.  Use data and A/B testing to validate approaches.  Share more of your usability data - especially the failures.

If you love something, set it free.  When you hand something over let people use it.  This can be good and bad.