‘Reasons to be Responsive’ workshop report

Drew and I recently travelled down to Shoreditch to attend Brad Frost’s ‘Reasons to be Responsive‘ workshop; if you haven’t read Brad’s blog you may have seen his amazing catalogue of poor QR code placement at WTF QR CODES.

The first time Brad’s work really came to my attention was in January when I read his controversial Post-PSD Era blog (which discussed whether Photoshop has a place in modern day web design); it provoked a mixed response among designers and developers, so when the opportunity to hear him talk came up, I jumped at it.

After a painful morning spent watching Drew attempt to iron his shirt (which I’m pretty sure he just stuffed into his bag the night before) it was a relief to finally make our way to a renovated old school hall to listen to Brad’s thoughts on responsive design.

This subject’s pretty much been talked to death, but this workshop was particularly useful as it both clarified the approach and execution of responsive web design without resorting to just repeating what’s already been said many times before.

Rather than just reeling off an account of the whole day, I thought I’d cover just a few of the points that really stuck with me:

The ever-shifting landscape

Amusing (but, amazingly, true) stats like “more iPhones are sold than babies are born every day” back up the increasing prominence of mobile web browsing and, more importantly, the necessity in getting mobile experiences right.

Mobile now accounts for 20% of all web traffic, and it’s not just smartphones either; it’s predicted that tablets will outsell PCs this year. It’s pretty obvious what this means for both us and our clients, but Karen McGrane, a leading content strategist sums it up well:

“If your stuff, if your content, if your information, if your products, if your services are not available on mobile, they don’t exist for these people.”

The approach

In summary, in seems the answer is always: mobile first. Now, in no way was this the first time I’ve heard this, but it was probably the first time I fully understood why this is the best solution. Starting off with the smallest screen size allows a distillation and clearer focus on each page’s intent. It’s not about stripping functionality back or giving the users less, or taking content out and saying “mobile users won’t want that”; mobile users just want to be able to access the content that’s relevant to them, quickly and easily.

Atomic web design

Brad explained how atomic design, a really useful way of progressing and delivering a site, works. Essentially, it’s the production of look and feel, completed step by step to eventually form a system of components.

Creating full pages is obviously going to be necessary sometimes as everyone likes to see what a full page will look like, but designing in this way instead allows us to “riff” on an idea and really explore visual treatment of components.

Brad showed us the navigation variations Dan Mall did for his recent ‘Reading Is Fundamental‘ project and it illustrated how showing work in this way focuses everyone’s attention and makes completing tasks more efficient in both the feedback and signing off phases.

“That’s great — so how will it look on a Galaxy tab?”

One of the challenge when designing a responsive site is that everyone wants to know how it will look on specific devices and at specific screen sizes — but, really, we need to avoid thinking about sites in this way.

In the past two months alone, around 32 new web accessible devices were released, so to test a site on every last device is almost impossible. Instead, Brad proposes we should start thinking about screens as small(ish), medium(ish), large(ish) and extra-large(ish). This ensures that, no matter what the screen size or device, content and layout will always be the best it can possibly be.

Brad advised: “Let content, determine breakpoints not device widths”. Rather than deciding “this is a tablet breakpoint”, expand the mobile navigation until it doesn’t feel right then insert your breakpoint. Have a play with Brad’s ‘Ish’ viewport resizer to really appreciate how this works.

There were also a number of other quick points that came up surrounding mobile and responsive site:

– 74% of users will abandon a site if it takes more than five seconds to load, yet 72% of responsive websites currently have small screen views that weigh as much as the large screen versions.

– It’s ok for different users to get different experiences, as long as the functionality remains accessible.

– Larger screens do not equal faster connections.

– Navigation should be like a good friend…there when you need them, but cool enough to give you your space.

– Always be looking for opportunities to enhance elements for touch devices.

It was great to hear a well-informed and experienced opinion cut through the many voices talking and writing about this subject, and it was also reassuring to hear him explain that everyone, even people who are ‘experts’ on responsive design, are still learning as they go along.

Brad’s going to be speaking at the Reasons to be Creative conference in Brighton later in the year, and I highly recommend you go along — but then, any guy who can teach his bulldog to skateboard is alright by me.