adapting to a responsive design at untangle the web on 29th july 2013

Adapting to a Responsive

DesignMatt Gibson / Cyber-Duck

@duckymatt / @cyberduck_uk#untangletheweb

How do we define responsive?

To react quickly and positively.

Responsive web design is a design approach that aims to create interfaces

that react quickly and positively to the user’s

conditions.

Flickr credit: @alui0000

People will access our websites in ways we perhaps hadn’t even considered yet.

The previous state(s) of our website

“Desktop” site (2011)

“Tablet” site (Later 2011)

*Not to scale :)

“Mobile” site (2012)

Our separate mobile websites:A stop-gap strategy

So why go responsive?

1. Multiple code bases

2. Content management

3. More and more new devices and form factors

You don't get to decide which device people use to access your website.

Karen McGrane

http://bondartscience.com/

Setting goals for a RWD...

1. Content Parity

Credit: http://wtfmobileweb.com/

The same content and functionality should be on all platforms.

2. Speed

Flickr credit: @myoldpostcards

Performance affects everyone.

3. Future friendly

Credit: http://futurefriend.ly/

Cut down on maintenance and support known unknowns

#ffly

4. Accessibility

Credit: http://futurefriend.ly/

Styles, backgrounds and JavaScript are progressive enhancements

1. Content Parity

RWD meansassuming less

about our users

Begin by defining the content people visit your website for.

http://xkcd.com/773/

Researching our content strategy

Speaking to existing customers

Google Analytics

CrazyEgg

Lead Forensics

Defining the content first

Our content defines the layouts we need.

Not the other way around.

2. Speed

Does responsive = poor performance?

Credit: Guy Podjarny - Creator of Mobitest: http://www.guypo.com/mobile/what-are-responsive-websites-made-of/

To react quickly and positively.

It’s easy to confuse implementation with

technique.

Making performance a priority.

We set ourselves a performance budget of 500kb for mobile.

To load the Facebook, Twitter and Google social media buttons for a total of 19 requests takes 246.7 KB in bandwidth.

http://zurb.com/article/883/small-painful-buttons-why-social-media-bu

Off the shelf front-end frameworks

The next big thing TM

Flickr credit: @donshall

They try to do everything.

They make design decisions for you.

Flickr credit: @jamesrbowe

Knowing your code from top to bottom is essential to have total control over it.

Using frameworks doesn’t help with that.

https://github.com/Cyber-Duck/hoisin.scss

We created a mini-library that doesn’t include any predefined

styling for layout / grid, buttons, typography etc.

Did we need CMS software to manage

our content?

No CMS Software ≠ No CMS

For most projects the answer would

be yes.

For our own website it was no (apart from our blog).

Only loading what we need

when we need it.

Javascript

CSS

Images

3. Future friendliness

The web doesn’t have a fixed width.

We should embrace the fact that the web doesn’t have the same

constraints [as the printed page] and design for this flexibility.

John Allsopp, A Dao of Web Designhttp://alistapart.com/article/dao

Layout & flowBreakpoints based on content and design, rather than device

Designing for context

The right code for the right task

Leave styling to CSS and use JS only to change

the “state” of an element.

Animation as an enhancement

Using CSS3 for animations enhances the experience for browsers

that support it, while older browsers still get the functionality if not

the eye candy.

4. Accessibility

6 quick wins for accessibility

1. Make the purpose of all links as clear and

descriptive as possible

Avoid link anchors that presume the interaction method like “click here”

2. Create a hidden skip navigation link

3. Make URLs human readable and permanent

where possible.

Is this human readable?http://art.com/artgallery/default.asp?

sid=9DF4BC0580DF11D3ACB60090271E26A8&command=freelist.

4. Use descriptive alt tags for when an image cannot be shown.

5. Don’t use placeholders as an alternative for

labels on forms.

6. Use appropriate input types and attributes on

forms.

The results?

Since launch:

200%increase in

mobile traffic

2.07%increase in

conversion rate

-4000%reduction in homepage

exit rate on mobile

Our conclusion

We are still learning.

There is more to do to make our websites faster, more

future friendly, more accessible.

AKA more responsive.

Thank you.Matt Gibson / Cyber-Duck

@duckymatt / @cyberduck_uk#untangletheweb