SlideShare a Scribd company logo
ADAPTING TO A
RESPONSIVE
WEB DESIGN
HELLO
I’m Matt
@duckymatt
!
!
!
!
!
!
@cyberduck_uk

cyber-duck.co.uk
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.
Image Copyright: Walt Disney Pictures & Tim Burton Pictures

PEOPLE WILL ACCESS OUR
WEBSITES IN WAYS WE HADN’T
EVEN CONSIDERED YET
THE PREVIOUS STATE(S) OF
OUR OWN WEBSITE

“DESKTOP” SITE

“TABLET” SITE

“MOBILE” SITE

(2011)

(LATER 2011)

(2012)
*Not to scale :)
OUR SEPARATE MOBILE WEBSITES:
A STOP-GAP STRATEGY
SO WHY GO
RESPONSIVE?
Image Copyright: L.A. Films & Home Box Office (HBO)

3 FACTORS
1

MULTIPLE CODE BASES

2

CONTENT STRATEGY

3

KNOWN UNKNOWNS
SETTING 4 GOALS FOR A
RESPONSIVE DESIGN
Image Copyright: Chartoff-Winkler Productions & United Artists
CONTENT
PARITY
THE SAME CONTENT
SHOULD BE AVAILABLE
ON ALL PLATFORMS

Credit: http://wtfmobileweb.com/

1
SPEED
MATTERS

2

BECAUSE PERFORMANCE
AFFECTS EVERYONE

Image Copyright: Universal Pictures
3

FUTURE FRIENDLY
CUT DOWN ON MAINTENANCE AND
SUPPORT KNOWN UNKNOWNS
Image Copyright: Universal TV

See: http://futurefriend.ly/
ACCESSIBILITY
STYLES, BACKGROUNDS AND JAVASCRIPT
ARE PROGRESSIVE ENHANCEMENTS

Photo Credit: Neil McKenzie: http://www.flickr.com/photos/furbyx4/2968376257/

4
1

CONTENT PARITY
1

ASSUMPTIONS

Image Copyright: BBC
KAREN MCGRANE

You don't get to decide which
device people use to access
your website.
http://alistapart.com/article/your-content-now-mobile
Photo credit: Eirik Helland Urke: http://www.flickr.com/photos/webdagene/6149954950/
1

Credit: http://xkcd.com/773/
1
RESEARCHING
CONTENT STRATEGY

1

SPEAKING TO EXISTING CUSTOMERS
GOOGLE ANALYTICS
CRAZYEGG
LEAD FORENSICS

Image Copyright: Warner Bros.
1

OUR CONTENT DEFINES
THE LAYOUTS WE NEED
!

NOT THE OTHER WAY AROUND
2

SPEED MATTERS
2

moto.oakley.com
ANDREW CLARKE

If you were data roaming on an
iPhone, at $9 per Mb data
roaming, that web page would
cost me $785 to look at on my
iPhone!
http://alistapart.com/article/dao/

Photo credit: Jeffrey Zeldman: http://www.flickr.com/photos/zeldman/12621077243
http://dandelion-burdock.com/articles/view/the-weight-of-the-web
DOES RESPONSIVE =
POOR PERFORMANCE?

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

2
2

To react quickly
and positively.
2

IT’S EASY TO CONFUSE
IMPLEMENTATION WITH
TECHNIQUE
Image Copyright: Metro-Goldwyn-Mayer (MGM)
Image Copyright: Twentieth Century Fox Film Corporation

2

MAKING PERFORMANCE A PRIORITY
!

SETTING A PERFORMANCE “BUDGET”
timkadlec.com/2013/01/setting-a-performance-budget/
2

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
2

OFF THE SHELF
FRONT-END FRAMEWORKS
2

TRYING TO DO EVERYTHING
Photo credit: Don Shall: http://www.flickr.com/photos/donshall/3817115551/
THEY MAKE DESIGN
DECISIONS FOR YOU

Photo credit: James Bowe: http://www.flickr.com/photos/jamesrbowe/4231509266/

2
KNOWING YOUR CODE FROM
TOP TO BOTTOM IS ESSENTIAL TO
HAVE TOTAL CONTROL OVER IT

2

Image credit: http://css-tricks.com/
2

WE CREATED A MINI-LIBRARY THAT
IS SIMPLE, FLEXIBLE, LIGHT AND
DOESN’T MAKE DECISIONS FOR YOU

http://cyber-duck.github.io/hoisin.scss/
2

ONLY LOADING
WHAT WE NEED
WHEN WE NEED IT.
JAVASCRIPT

http://requirejs.org/

2
2

CSS

http://sass-lang.com/
IMAGES
BEGIN WITH OPTIMISATION

2
2

IMAGES
THEN COMPRESSION

http://imageoptim.com/

https://tinypng.com/
2

IMAGES
USING THE RIGHT IMAGE FOR THE RIGHT TASK

27 KB

266 KB
2

CACHING
SERVING FILES FASTER

http://www.cloudflare.com/

https://www.varnish-cache.org/
2
3

FUTURE
FRIENDLINESS
3

THE WEB DOESN’T HAVE
A FIXED WIDTH
JOHN ALLSOPP

We should embrace the fact that
the web doesn’t have the same
constraints [as the printed page]
and design for this flexibility.
http://alistapart.com/article/dao/

Photo credit: TEDxNSW: http://www.flickr.com/photos/42645924@N02/3933255654/

3
LAYOUT
AND
FLOW

3
3

LAYOUTS BASED ON CONTENT

RATHER THAN DEVICE
3

RESPONSIVE DESIGN WORKFLOW
3

SKETCH
Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures
3

PROTOTYPE
Copyright: Paramount Pictures & Marvel Enterprises
3

CREATE PATTERN LIBRARIES
PROTOTYPE
Copyright: Universal Pictures & Alphaville Films

http://styletil.es/
ENHANCE FOR CONTEXT

3
Copyright: Touchstone Pictures & Amblin Entertainment & Silver Screen Partners III & Walt Disney

ANIMATION AS AN
ENHANCEMENT

3
4

ACCESSIBILITY
Copyright: Warner Bros.

4

7 QUICK WINS FOR
ACCESSIBILITY
4

1. MAKE THE PURPOSE OF
ALL LINKS AS CLEAR AND
DESCRIPTIVE AS POSSIBLE
AVOID LINK ANCHORS THAT PRESUME THE
INTERACTION METHOD LIKE “CLICK HERE”
4

2. CREATE A HIDDEN SKIP
NAVIGATION LINK
4

3. MAKE URLS HUMAN
READABLE AND PERMANENT
WHERE POSSIBLE
IS THIS HUMAN READABLE?
!

HTTP://ART.COM/ARTGALLERY/DEFAULT.ASP?
ID=9DF4BC0580DF11D3ACB60090271E26A8&COMMAND=FREELIST
4

4. USE DESCRIPTIVE ALT TAGS
FOR WHEN AN IMAGE
CANNOT BE SHOWN.
4

5. DON’T USE PLACEHOLDERS
AS A SUBSTITUTE FOR LABELS
ON FORMS

Image credit: Dave Bushell: http://dbushell.com/2013/11/08/form-label-design/

http://www.webaxe.org/placeholder-attribute-is-not-a-label/
4

6. USE APPROPRIATE INPUT
TYPES AND ATTRIBUTES ON
FORMS
Related: http://24ways.org/2012/colour-accessibility/

7. PROOF DESIGNS IN GREYSCALE
TO CHECK COLOUR CONTRAST
ALSO USE COLOUR BLINDNESS SIMULATORS
AND COLOUR CONTRAST CHECK TOOLS

4
THE RESULTS
SINCE LAUNCH:

200%

2.07% -4000%

INCREASE IN
MOBILE
TRAFFIC

INCREASE IN
CONVERSION
RATE

REDUCTION IN
HOMEPAGE EXIT
RATE ON MOBILE
Copyright: Lucasfilm

MUCH TO LEARN THERE IS
Copyright: Studio 37 & La Petite Reine & La Classe Américaine
& JD Prod & France 3 Cinéma & Jouror Productions & uFilm

THANK YOU
@duckymatt
@cyberduck_uk

More Related Content

Similar to Adapting to a Responsive Web Design - TFM&A - 26-02-14

HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck
HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duckHCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck
HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck
City University London
 
Adapting to Responsive Design - London Web - Feb 2015
Adapting to Responsive Design - London Web - Feb 2015 Adapting to Responsive Design - London Web - Feb 2015
Adapting to Responsive Design - London Web - Feb 2015
Matt Gibson
 
Adapting to Responsive Design - On The Edge Conference #edgebrum
Adapting to Responsive Design - On The Edge Conference #edgebrumAdapting to Responsive Design - On The Edge Conference #edgebrum
Adapting to Responsive Design - On The Edge Conference #edgebrum
Matt Gibson
 
Adapting to Responsive Web Design - Figaro Digital Mobile Seminar - 11 Septem...
Adapting to Responsive Web Design - Figaro Digital Mobile Seminar - 11 Septem...Adapting to Responsive Web Design - Figaro Digital Mobile Seminar - 11 Septem...
Adapting to Responsive Web Design - Figaro Digital Mobile Seminar - 11 Septem...
Matt Gibson
 
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 WorkshopUX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
Matt Gibson
 
Adapting to a Responsive Design at Untangle the Web on 29th July 2013
Adapting to a Responsive Design at Untangle the Web on 29th July 2013Adapting to a Responsive Design at Untangle the Web on 29th July 2013
Adapting to a Responsive Design at Untangle the Web on 29th July 2013
Matt Gibson
 
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the WebResponsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Yiannis Konstantakopoulos
 
Size Doesn't Matter
Size Doesn't MatterSize Doesn't Matter
Size Doesn't Matter
Roy Degler
 
Dylan Beattie "Architecture: The Stuff That's Hard to Change"
Dylan Beattie "Architecture: The Stuff That's Hard to Change"Dylan Beattie "Architecture: The Stuff That's Hard to Change"
Dylan Beattie "Architecture: The Stuff That's Hard to Change"
Fwdays
 
Speed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web Experience
Andy Davies
 
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential DebateEduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
Jon Liu
 
Making the Web Fireproof: A Building Code for Websites
Making the Web Fireproof: A Building Code for WebsitesMaking the Web Fireproof: A Building Code for Websites
Making the Web Fireproof: A Building Code for Websites
Dylan Wilbanks
 
Web3.0- How brands can take advantage of the semantic shift - Brandsential
Web3.0- How brands can take advantage of the semantic shift -  BrandsentialWeb3.0- How brands can take advantage of the semantic shift -  Brandsential
Web3.0- How brands can take advantage of the semantic shift - Brandsential
Jeffrey V
 
Principles, Backbone and Bottlenose
Principles, Backbone and BottlenosePrinciples, Backbone and Bottlenose
Principles, Backbone and Bottlenose
Justin Halsall
 
Web2.0
Web2.0Web2.0
Web2.0
Greg Hardin
 
The image problem of the web and how to solve it…
The image problem of the web and how to solve it…The image problem of the web and how to solve it…
The image problem of the web and how to solve it…
Christian Heilmann
 
Adaptive Content: Designing For The Unknown
Adaptive Content: Designing For The UnknownAdaptive Content: Designing For The Unknown
Adaptive Content: Designing For The Unknown
Myplanet Digital
 
Adaptive Content: Designing For The Unknown
Adaptive Content: Designing For The UnknownAdaptive Content: Designing For The Unknown
Adaptive Content: Designing For The Unknown
myplanetsteph
 
Which matters more: content, design or technology? A rant
Which matters more: content, design or technology? A rantWhich matters more: content, design or technology? A rant
Which matters more: content, design or technology? A rant
Sophie Dennis
 
HTML5 for Web Designers
HTML5 for Web DesignersHTML5 for Web Designers
HTML5 for Web Designers
Goodbytes
 

Similar to Adapting to a Responsive Web Design - TFM&A - 26-02-14 (20)

HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck
HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duckHCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck
HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck
 
Adapting to Responsive Design - London Web - Feb 2015
Adapting to Responsive Design - London Web - Feb 2015 Adapting to Responsive Design - London Web - Feb 2015
Adapting to Responsive Design - London Web - Feb 2015
 
Adapting to Responsive Design - On The Edge Conference #edgebrum
Adapting to Responsive Design - On The Edge Conference #edgebrumAdapting to Responsive Design - On The Edge Conference #edgebrum
Adapting to Responsive Design - On The Edge Conference #edgebrum
 
Adapting to Responsive Web Design - Figaro Digital Mobile Seminar - 11 Septem...
Adapting to Responsive Web Design - Figaro Digital Mobile Seminar - 11 Septem...Adapting to Responsive Web Design - Figaro Digital Mobile Seminar - 11 Septem...
Adapting to Responsive Web Design - Figaro Digital Mobile Seminar - 11 Septem...
 
UX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 WorkshopUX Design for the Responsive Web - UX London 2014 Workshop
UX Design for the Responsive Web - UX London 2014 Workshop
 
Adapting to a Responsive Design at Untangle the Web on 29th July 2013
Adapting to a Responsive Design at Untangle the Web on 29th July 2013Adapting to a Responsive Design at Untangle the Web on 29th July 2013
Adapting to a Responsive Design at Untangle the Web on 29th July 2013
 
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the WebResponsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
 
Size Doesn't Matter
Size Doesn't MatterSize Doesn't Matter
Size Doesn't Matter
 
Dylan Beattie "Architecture: The Stuff That's Hard to Change"
Dylan Beattie "Architecture: The Stuff That's Hard to Change"Dylan Beattie "Architecture: The Stuff That's Hard to Change"
Dylan Beattie "Architecture: The Stuff That's Hard to Change"
 
Speed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web Experience
 
EduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential DebateEduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
 
Making the Web Fireproof: A Building Code for Websites
Making the Web Fireproof: A Building Code for WebsitesMaking the Web Fireproof: A Building Code for Websites
Making the Web Fireproof: A Building Code for Websites
 
Web3.0- How brands can take advantage of the semantic shift - Brandsential
Web3.0- How brands can take advantage of the semantic shift -  BrandsentialWeb3.0- How brands can take advantage of the semantic shift -  Brandsential
Web3.0- How brands can take advantage of the semantic shift - Brandsential
 
Principles, Backbone and Bottlenose
Principles, Backbone and BottlenosePrinciples, Backbone and Bottlenose
Principles, Backbone and Bottlenose
 
Web2.0
Web2.0Web2.0
Web2.0
 
The image problem of the web and how to solve it…
The image problem of the web and how to solve it…The image problem of the web and how to solve it…
The image problem of the web and how to solve it…
 
Adaptive Content: Designing For The Unknown
Adaptive Content: Designing For The UnknownAdaptive Content: Designing For The Unknown
Adaptive Content: Designing For The Unknown
 
Adaptive Content: Designing For The Unknown
Adaptive Content: Designing For The UnknownAdaptive Content: Designing For The Unknown
Adaptive Content: Designing For The Unknown
 
Which matters more: content, design or technology? A rant
Which matters more: content, design or technology? A rantWhich matters more: content, design or technology? A rant
Which matters more: content, design or technology? A rant
 
HTML5 for Web Designers
HTML5 for Web DesignersHTML5 for Web Designers
HTML5 for Web Designers
 

More from Matt Gibson

Business X Design - Digital for People, Product, and Planet - an Intersection...
Business X Design - Digital for People, Product, and Planet - an Intersection...Business X Design - Digital for People, Product, and Planet - an Intersection...
Business X Design - Digital for People, Product, and Planet - an Intersection...
Matt Gibson
 
DIGITAL FOR PEOPLE AND PLANET – AN INTERSECTIONAL DESIGN APPROACH
DIGITAL FOR PEOPLE AND PLANET – AN INTERSECTIONAL DESIGN APPROACH DIGITAL FOR PEOPLE AND PLANET – AN INTERSECTIONAL DESIGN APPROACH
DIGITAL FOR PEOPLE AND PLANET – AN INTERSECTIONAL DESIGN APPROACH
Matt Gibson
 
Empathy through evil thinking - World Interaction Design Day 2018 - Leeds
Empathy through evil thinking - World Interaction Design Day 2018 - LeedsEmpathy through evil thinking - World Interaction Design Day 2018 - Leeds
Empathy through evil thinking - World Interaction Design Day 2018 - Leeds
Matt Gibson
 
Despicable by design - Turning Evil into Empathy - Leeds Digital Festival 2018
Despicable by design - Turning Evil into Empathy - Leeds Digital Festival 2018Despicable by design - Turning Evil into Empathy - Leeds Digital Festival 2018
Despicable by design - Turning Evil into Empathy - Leeds Digital Festival 2018
Matt Gibson
 
Evil UX - Turn Evil into Empathy - Digital Pond September 2017 - Empathy in D...
Evil UX - Turn Evil into Empathy - Digital Pond September 2017 - Empathy in D...Evil UX - Turn Evil into Empathy - Digital Pond September 2017 - Empathy in D...
Evil UX - Turn Evil into Empathy - Digital Pond September 2017 - Empathy in D...
Matt Gibson
 
Redesigning how we work - UX Alive 2016
Redesigning how we work - UX Alive 2016Redesigning how we work - UX Alive 2016
Redesigning how we work - UX Alive 2016
Matt Gibson
 
More than Media Queries: Reframing Responsive UX - SXSW 2016
More than Media Queries: Reframing Responsive UX - SXSW 2016More than Media Queries: Reframing Responsive UX - SXSW 2016
More than Media Queries: Reframing Responsive UX - SXSW 2016
Matt Gibson
 
Redesigning how we work with clients - Reasons.to - 09.09.15
Redesigning how we work with clients - Reasons.to - 09.09.15Redesigning how we work with clients - Reasons.to - 09.09.15
Redesigning how we work with clients - Reasons.to - 09.09.15
Matt Gibson
 
Adapting to Responsive Web Design - Figaro Digital
Adapting to Responsive Web Design - Figaro DigitalAdapting to Responsive Web Design - Figaro Digital
Adapting to Responsive Web Design - Figaro Digital
Matt Gibson
 
Adapting to Responsive Design - UXPA2015
Adapting to Responsive Design - UXPA2015Adapting to Responsive Design - UXPA2015
Adapting to Responsive Design - UXPA2015
Matt Gibson
 
Designing Responsive Experiences - Digital Shoreditch - May 2015
Designing Responsive Experiences - Digital Shoreditch - May 2015Designing Responsive Experiences - Digital Shoreditch - May 2015
Designing Responsive Experiences - Digital Shoreditch - May 2015
Matt Gibson
 
Designing the client experience - #FOWD - April 2015
Designing the client experience - #FOWD - April 2015Designing the client experience - #FOWD - April 2015
Designing the client experience - #FOWD - April 2015
Matt Gibson
 
User Centred Design - Designing Better Experiences - General Assembly - April...
User Centred Design - Designing Better Experiences - General Assembly - April...User Centred Design - Designing Better Experiences - General Assembly - April...
User Centred Design - Designing Better Experiences - General Assembly - April...
Matt Gibson
 
Designing Better Experiences - A Digital Masterclass for the Financial Sector...
Designing Better Experiences - A Digital Masterclass for the Financial Sector...Designing Better Experiences - A Digital Masterclass for the Financial Sector...
Designing Better Experiences - A Digital Masterclass for the Financial Sector...
Matt Gibson
 
Working with Clients Better - Untangle the Web - 24 September 2014
Working with Clients Better - Untangle the Web - 24 September 2014Working with Clients Better - Untangle the Web - 24 September 2014
Working with Clients Better - Untangle the Web - 24 September 2014
Matt Gibson
 
Designing Better Experiences - UXPA Spring Extravaganza Workshop, 30 April 2014
Designing Better Experiences - UXPA Spring Extravaganza Workshop, 30 April 2014Designing Better Experiences - UXPA Spring Extravaganza Workshop, 30 April 2014
Designing Better Experiences - UXPA Spring Extravaganza Workshop, 30 April 2014
Matt Gibson
 
Working better with clients - Digital Pond - Feb 2014
Working better with clients - Digital Pond - Feb 2014Working better with clients - Digital Pond - Feb 2014
Working better with clients - Digital Pond - Feb 2014
Matt Gibson
 
Adapting to Responsive UX Design - Digital Shoreditch 2013
Adapting to Responsive UX Design - Digital Shoreditch 2013Adapting to Responsive UX Design - Digital Shoreditch 2013
Adapting to Responsive UX Design - Digital Shoreditch 2013
Matt Gibson
 
Designing Better Experiences
Designing Better ExperiencesDesigning Better Experiences
Designing Better Experiences
Matt Gibson
 

More from Matt Gibson (19)

Business X Design - Digital for People, Product, and Planet - an Intersection...
Business X Design - Digital for People, Product, and Planet - an Intersection...Business X Design - Digital for People, Product, and Planet - an Intersection...
Business X Design - Digital for People, Product, and Planet - an Intersection...
 
DIGITAL FOR PEOPLE AND PLANET – AN INTERSECTIONAL DESIGN APPROACH
DIGITAL FOR PEOPLE AND PLANET – AN INTERSECTIONAL DESIGN APPROACH DIGITAL FOR PEOPLE AND PLANET – AN INTERSECTIONAL DESIGN APPROACH
DIGITAL FOR PEOPLE AND PLANET – AN INTERSECTIONAL DESIGN APPROACH
 
Empathy through evil thinking - World Interaction Design Day 2018 - Leeds
Empathy through evil thinking - World Interaction Design Day 2018 - LeedsEmpathy through evil thinking - World Interaction Design Day 2018 - Leeds
Empathy through evil thinking - World Interaction Design Day 2018 - Leeds
 
Despicable by design - Turning Evil into Empathy - Leeds Digital Festival 2018
Despicable by design - Turning Evil into Empathy - Leeds Digital Festival 2018Despicable by design - Turning Evil into Empathy - Leeds Digital Festival 2018
Despicable by design - Turning Evil into Empathy - Leeds Digital Festival 2018
 
Evil UX - Turn Evil into Empathy - Digital Pond September 2017 - Empathy in D...
Evil UX - Turn Evil into Empathy - Digital Pond September 2017 - Empathy in D...Evil UX - Turn Evil into Empathy - Digital Pond September 2017 - Empathy in D...
Evil UX - Turn Evil into Empathy - Digital Pond September 2017 - Empathy in D...
 
Redesigning how we work - UX Alive 2016
Redesigning how we work - UX Alive 2016Redesigning how we work - UX Alive 2016
Redesigning how we work - UX Alive 2016
 
More than Media Queries: Reframing Responsive UX - SXSW 2016
More than Media Queries: Reframing Responsive UX - SXSW 2016More than Media Queries: Reframing Responsive UX - SXSW 2016
More than Media Queries: Reframing Responsive UX - SXSW 2016
 
Redesigning how we work with clients - Reasons.to - 09.09.15
Redesigning how we work with clients - Reasons.to - 09.09.15Redesigning how we work with clients - Reasons.to - 09.09.15
Redesigning how we work with clients - Reasons.to - 09.09.15
 
Adapting to Responsive Web Design - Figaro Digital
Adapting to Responsive Web Design - Figaro DigitalAdapting to Responsive Web Design - Figaro Digital
Adapting to Responsive Web Design - Figaro Digital
 
Adapting to Responsive Design - UXPA2015
Adapting to Responsive Design - UXPA2015Adapting to Responsive Design - UXPA2015
Adapting to Responsive Design - UXPA2015
 
Designing Responsive Experiences - Digital Shoreditch - May 2015
Designing Responsive Experiences - Digital Shoreditch - May 2015Designing Responsive Experiences - Digital Shoreditch - May 2015
Designing Responsive Experiences - Digital Shoreditch - May 2015
 
Designing the client experience - #FOWD - April 2015
Designing the client experience - #FOWD - April 2015Designing the client experience - #FOWD - April 2015
Designing the client experience - #FOWD - April 2015
 
User Centred Design - Designing Better Experiences - General Assembly - April...
User Centred Design - Designing Better Experiences - General Assembly - April...User Centred Design - Designing Better Experiences - General Assembly - April...
User Centred Design - Designing Better Experiences - General Assembly - April...
 
Designing Better Experiences - A Digital Masterclass for the Financial Sector...
Designing Better Experiences - A Digital Masterclass for the Financial Sector...Designing Better Experiences - A Digital Masterclass for the Financial Sector...
Designing Better Experiences - A Digital Masterclass for the Financial Sector...
 
Working with Clients Better - Untangle the Web - 24 September 2014
Working with Clients Better - Untangle the Web - 24 September 2014Working with Clients Better - Untangle the Web - 24 September 2014
Working with Clients Better - Untangle the Web - 24 September 2014
 
Designing Better Experiences - UXPA Spring Extravaganza Workshop, 30 April 2014
Designing Better Experiences - UXPA Spring Extravaganza Workshop, 30 April 2014Designing Better Experiences - UXPA Spring Extravaganza Workshop, 30 April 2014
Designing Better Experiences - UXPA Spring Extravaganza Workshop, 30 April 2014
 
Working better with clients - Digital Pond - Feb 2014
Working better with clients - Digital Pond - Feb 2014Working better with clients - Digital Pond - Feb 2014
Working better with clients - Digital Pond - Feb 2014
 
Adapting to Responsive UX Design - Digital Shoreditch 2013
Adapting to Responsive UX Design - Digital Shoreditch 2013Adapting to Responsive UX Design - Digital Shoreditch 2013
Adapting to Responsive UX Design - Digital Shoreditch 2013
 
Designing Better Experiences
Designing Better ExperiencesDesigning Better Experiences
Designing Better Experiences
 

Recently uploaded

Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
f22b6g9c
 
一比一原版(soton毕业证书)英国南安普顿大学毕业证在读证明如何办理
一比一原版(soton毕业证书)英国南安普顿大学毕业证在读证明如何办理一比一原版(soton毕业证书)英国南安普顿大学毕业证在读证明如何办理
一比一原版(soton毕业证书)英国南安普顿大学毕业证在读证明如何办理
yufen5
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
Harry Harrold
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
lunaemel03
 
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
67n7f53
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
lhtvqoag
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
pavankumarpayexelsol
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
67n7f53
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
bo44ban1
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
PabloMartelLpez
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
k4krdgxx
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 

Recently uploaded (20)

Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
 
一比一原版(soton毕业证书)英国南安普顿大学毕业证在读证明如何办理
一比一原版(soton毕业证书)英国南安普顿大学毕业证在读证明如何办理一比一原版(soton毕业证书)英国南安普顿大学毕业证在读证明如何办理
一比一原版(soton毕业证书)英国南安普顿大学毕业证在读证明如何办理
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
 
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
 
定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
一比一原版(CSU毕业证书)查尔斯特大学毕业证如何办理
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 

Adapting to a Responsive Web Design - TFM&A - 26-02-14