0
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 ...
PEOPLE WILL ACCESS OUR
WEBSITES IN WAYS WE HADN’T
EVEN CONSIDERED YET
Image Copyright: Walt Disney Pictures & Tim Burton P...
THE PREVIOUS STATE(S) OF
OUR OWN WEBSITE
“DESKTOP” SITE
(2011)
“TABLET” SITE
(LATER 2011)
*Not to scale :)
“MOBILE” SITE
(...
OUR SEPARATE MOBILE WEBSITES:
A STOP-GAP STRATEGY
SO WHY GO
RESPONSIVE?
3 FACTORS
Image Copyright: L.A. Films & Home Box Office (HBO)
MULTIPLE CODE BASES1
CONTENT STRATEGY2
KNOWN UNKNOWNS3
SETTING 4 GOALS FOR A
RESPONSIVE DESIGN
Image Copyright: Chartoff-Winkler Productions & United Artists
CONTENT
PARITY
Credit: http://wtfmobileweb.com/
THE SAME CONTENT
SHOULD BE AVAILABLE
ON ALL PLATFORMS
1
SPEED
MATTERS
BECAUSE PERFORMANCE
AFFECTS EVERYONE
2
Image Copyright: Universal Pictures
FUTURE FRIENDLY
See: http://futurefriend.ly/
CUT DOWN ON MAINTENANCE AND
SUPPORT KNOWN UNKNOWNS
3
Image Copyright: Univers...
ACCESSIBILITY
STYLES, BACKGROUNDS AND JAVASCRIPT
ARE PROGRESSIVE ENHANCEMENTS
4
Photo Credit: Neil McKenzie: http://www.fli...
CONTENT PARITY
1
ASSUMPTIONS
1
Image Copyright: BBC
You don't get to decide which
device people use to access
your website.
KAREN MCGRANE
http://alistapart.com/article/your-c...
Credit: http://xkcd.com/773/
1
1
RESEARCHING
CONTENT STRATEGY
SPEAKING TO EXISTING CUSTOMERS
GOOGLE ANALYTICS
CRAZYEGG
LEAD FORENSICS
1
Image Copyright: Wa...
OUR CONTENT DEFINES
THE LAYOUTS WE NEED!
NOT THE OTHER WAY AROUND
1
SPEED MATTERS
2
2
moto.oakley.com
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...
DOES RESPONSIVE =
POOR PERFORMANCE?
Credit: Guy Podjarny - Creator of Mobitest: http://www.guypo.com/mobile/what-are-respo...
To react quickly
and positively.
2
IT’S EASY TO CONFUSE
IMPLEMENTATION WITH
TECHNIQUE
2
Image Copyright: Metro-Goldwyn-Mayer (MGM)
MAKING PERFORMANCE A PRIORITY
!
SETTING A PERFORMANCE “BUDGET”
2
timkadlec.com/2013/01/setting-a-performance-budget/
Image...
To load the Facebook, Twitter and Google social
media buttons for a total of 19 requests takes
246.7 KB in bandwidth.
http...
OFF THE SHELF
FRONT-END FRAMEWORKS
2
Photo credit: Don Shall: http://www.flickr.com/photos/donshall/3817115551/
2
2
Photo credit: James Bowe: http://www.flickr.com/photos/jamesrbowe/4231509266/
KNOWING YOUR CODE FROM
TOP TO BOTTOM IS ESSENTIAL TO
HAVE TOTAL CONTROL OVER IT
2
Image credit: http://css-tricks.com/
http://cyber-duck.github.io/hoisin.scss/
WE CREATED A MINI-LIBRARY THAT
IS SIMPLE, FLEXIBLE, LIGHT AND
DOESN’T MAKE DECISI...
ONLY LOADING
WHAT WE NEED
WHEN WE NEED IT.
2
JAVASCRIPT
2
http://requirejs.org/
CSS
2
http://sass-lang.com/
IMAGES
2
BEGIN WITH OPTIMISATION
IMAGES
2
THEN COMPRESSION
http://imageoptim.com/ https://tinypng.com/
IMAGES
2
27 KB 266 KB
USING THE RIGHT IMAGE FOR THE RIGHT TASK
CACHING
2
SERVING FILES FASTER
http://www.cloudflare.com/ https://www.varnish-cache.org/
2
FUTURE
FRIENDLINESS
3
THE WEB DOESN’T HAVE
A FIXED WIDTH
3
We should embrace the fact that
the web doesn’t have the same
constraints [as the printed page]
and design for this flexibi...
LAYOUT
AND
FLOW
3
LAYOUTS BASED ON CONTENT
RATHER THAN DEVICE
3
RESPONSIVE DESIGN WORKFLOW
3
SKETCH
3
Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures
PROTOTYPE
3
Copyright: Paramount Pictures & Marvel Enterprises
USE STYLE TILES
http://styletil.es/
3
Copyright: Sandollar Productions & Touchstone Pictures
PROTOTYPECREATE PATTERN LIBRARIES
http://boagworld.com/design/pattern-library/
3
Copyright: Universal Pictures & Alphavill...
ENHANCE FOR CONTEXT
3
ANIMATION AS AN
ENHANCEMENT
3
Copyright: Touchstone Pictures & Amblin Entertainment & Silver Screen Partners III & Walt Di...
ACCESSIBILITY
4
7 QUICK WINS FOR
ACCESSIBILITY
4
Copyright: Warner Bros.
1. MAKE THE PURPOSE OF
ALL LINKS AS CLEAR AND
DESCRIPTIVE AS POSSIBLE
IF YOUR LINKS SAY “CLICK HERE”
YOU’RE DOING IT WRONG...
2. CREATE A HIDDEN SKIP
NAVIGATION LINK
4
3. MAKE URLS HUMAN
READABLE AND PERMANENT
WHERE POSSIBLE
HTTP://ART.COM/ARTGALLERY/DEFAULT.ASP?
ID=9DF4BC0580DF11D3ACB6009...
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
4
http://www.webaxe.org/placeholder-attribute-is-not-a-label...
6. USE APPROPRIATE INPUT
TYPES AND ATTRIBUTES ON
FORMS
4
7. PROOF DESIGNS IN GREYSCALE
TO CHECK COLOUR CONTRAST
4
ALSO USE COLOUR BLINDNESS SIMULATORS
AND COLOUR CONTRAST CHECK TO...
THE RESULTS
SINCE LAUNCH:
200%
INCREASE IN
MOBILE
TRAFFIC
43%
INCREASE IN
CONVERSION
RATE
-4000%
REDUCTION IN
HOMEPAGE EXIT
RATE ON MO...
MUCH TO LEARN THERE IS
Copyright: Lucasfilm
THANK YOU
@duckymatt
@cyberduck_uk
Copyright: Studio 37 & La Petite Reine & La Classe Américaine
& JD Prod & France 3 Ciné...
Adapting to Responsive Design - HCID2014, 24 April 2014
Upcoming SlideShare
Loading in...5
×

Adapting to Responsive Design - HCID2014, 24 April 2014

3,924

Published on

Slides from my talk at HCID2014 at City University.

Published in: Design, Technology

Transcript of "Adapting to Responsive Design - HCID2014, 24 April 2014"

  1. 1. ADAPTING TO A RESPONSIVE WEB DESIGN
  2. 2. HELLO I’m Matt @duckymatt ! ! ! ! ! !
  3. 3. @cyberduck_uk cyber-duck.co.uk
  4. 4. HOW DO WE DEFINE RESPONSIVE?
  5. 5. To react quickly and positively.
  6. 6. Responsive web design is a design approach that aims to create interfaces that react quickly and positively to the user’s conditions.
  7. 7. PEOPLE WILL ACCESS OUR WEBSITES IN WAYS WE HADN’T EVEN CONSIDERED YET Image Copyright: Walt Disney Pictures & Tim Burton Pictures
  8. 8. THE PREVIOUS STATE(S) OF OUR OWN WEBSITE “DESKTOP” SITE (2011) “TABLET” SITE (LATER 2011) *Not to scale :) “MOBILE” SITE (2012)
  9. 9. OUR SEPARATE MOBILE WEBSITES: A STOP-GAP STRATEGY
  10. 10. SO WHY GO RESPONSIVE?
  11. 11. 3 FACTORS Image Copyright: L.A. Films & Home Box Office (HBO)
  12. 12. MULTIPLE CODE BASES1 CONTENT STRATEGY2 KNOWN UNKNOWNS3
  13. 13. SETTING 4 GOALS FOR A RESPONSIVE DESIGN Image Copyright: Chartoff-Winkler Productions & United Artists
  14. 14. CONTENT PARITY Credit: http://wtfmobileweb.com/ THE SAME CONTENT SHOULD BE AVAILABLE ON ALL PLATFORMS 1
  15. 15. SPEED MATTERS BECAUSE PERFORMANCE AFFECTS EVERYONE 2 Image Copyright: Universal Pictures
  16. 16. FUTURE FRIENDLY See: http://futurefriend.ly/ CUT DOWN ON MAINTENANCE AND SUPPORT KNOWN UNKNOWNS 3 Image Copyright: Universal TV
  17. 17. ACCESSIBILITY STYLES, BACKGROUNDS AND JAVASCRIPT ARE PROGRESSIVE ENHANCEMENTS 4 Photo Credit: Neil McKenzie: http://www.flickr.com/photos/furbyx4/2968376257/
  18. 18. CONTENT PARITY 1
  19. 19. ASSUMPTIONS 1 Image Copyright: BBC
  20. 20. You don't get to decide which device people use to access your website. KAREN MCGRANE http://alistapart.com/article/your-content-now-mobile Photo credit: Eirik Helland Urke: http://www.flickr.com/photos/webdagene/6149954950/
  21. 21. Credit: http://xkcd.com/773/ 1
  22. 22. 1
  23. 23. RESEARCHING CONTENT STRATEGY SPEAKING TO EXISTING CUSTOMERS GOOGLE ANALYTICS CRAZYEGG LEAD FORENSICS 1 Image Copyright: Warner Bros.
  24. 24. OUR CONTENT DEFINES THE LAYOUTS WE NEED! NOT THE OTHER WAY AROUND 1
  25. 25. SPEED MATTERS 2
  26. 26. 2 moto.oakley.com
  27. 27. 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! ANDREW CLARKE 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
  28. 28. DOES RESPONSIVE = POOR PERFORMANCE? Credit: Guy Podjarny - Creator of Mobitest: http://www.guypo.com/mobile/what-are-responsive-websites-made-of/ 2
  29. 29. To react quickly and positively. 2
  30. 30. IT’S EASY TO CONFUSE IMPLEMENTATION WITH TECHNIQUE 2 Image Copyright: Metro-Goldwyn-Mayer (MGM)
  31. 31. MAKING PERFORMANCE A PRIORITY ! SETTING A PERFORMANCE “BUDGET” 2 timkadlec.com/2013/01/setting-a-performance-budget/ Image Copyright: Twentieth Century Fox Film Corporation
  32. 32. 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
  33. 33. OFF THE SHELF FRONT-END FRAMEWORKS 2
  34. 34. Photo credit: Don Shall: http://www.flickr.com/photos/donshall/3817115551/ 2
  35. 35. 2 Photo credit: James Bowe: http://www.flickr.com/photos/jamesrbowe/4231509266/
  36. 36. KNOWING YOUR CODE FROM TOP TO BOTTOM IS ESSENTIAL TO HAVE TOTAL CONTROL OVER IT 2 Image credit: http://css-tricks.com/
  37. 37. http://cyber-duck.github.io/hoisin.scss/ WE CREATED A MINI-LIBRARY THAT IS SIMPLE, FLEXIBLE, LIGHT AND DOESN’T MAKE DECISIONS FOR YOU 2
  38. 38. ONLY LOADING WHAT WE NEED WHEN WE NEED IT. 2
  39. 39. JAVASCRIPT 2 http://requirejs.org/
  40. 40. CSS 2 http://sass-lang.com/
  41. 41. IMAGES 2 BEGIN WITH OPTIMISATION
  42. 42. IMAGES 2 THEN COMPRESSION http://imageoptim.com/ https://tinypng.com/
  43. 43. IMAGES 2 27 KB 266 KB USING THE RIGHT IMAGE FOR THE RIGHT TASK
  44. 44. CACHING 2 SERVING FILES FASTER http://www.cloudflare.com/ https://www.varnish-cache.org/
  45. 45. 2
  46. 46. FUTURE FRIENDLINESS 3
  47. 47. THE WEB DOESN’T HAVE A FIXED WIDTH 3
  48. 48. 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 http://alistapart.com/article/dao/ Photo credit: TEDxNSW: http://www.flickr.com/photos/42645924@N02/3933255654/ 3
  49. 49. LAYOUT AND FLOW 3
  50. 50. LAYOUTS BASED ON CONTENT RATHER THAN DEVICE 3
  51. 51. RESPONSIVE DESIGN WORKFLOW 3
  52. 52. SKETCH 3 Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures
  53. 53. PROTOTYPE 3 Copyright: Paramount Pictures & Marvel Enterprises
  54. 54. USE STYLE TILES http://styletil.es/ 3 Copyright: Sandollar Productions & Touchstone Pictures
  55. 55. PROTOTYPECREATE PATTERN LIBRARIES http://boagworld.com/design/pattern-library/ 3 Copyright: Universal Pictures & Alphaville Films
  56. 56. ENHANCE FOR CONTEXT 3
  57. 57. ANIMATION AS AN ENHANCEMENT 3 Copyright: Touchstone Pictures & Amblin Entertainment & Silver Screen Partners III & Walt Disney
  58. 58. ACCESSIBILITY 4
  59. 59. 7 QUICK WINS FOR ACCESSIBILITY 4 Copyright: Warner Bros.
  60. 60. 1. MAKE THE PURPOSE OF ALL LINKS AS CLEAR AND DESCRIPTIVE AS POSSIBLE IF YOUR LINKS SAY “CLICK HERE” YOU’RE DOING IT WRONG 4
  61. 61. 2. CREATE A HIDDEN SKIP NAVIGATION LINK 4
  62. 62. 3. MAKE URLS HUMAN READABLE AND PERMANENT WHERE POSSIBLE HTTP://ART.COM/ARTGALLERY/DEFAULT.ASP? ID=9DF4BC0580DF11D3ACB60090271E26A8&COMMAND=FREELIST 4
  63. 63. 4. USE DESCRIPTIVE ALT TAGS FOR WHEN AN IMAGE CANNOT BE SHOWN. 4
  64. 64. 5. DON’T USE PLACEHOLDERS AS A SUBSTITUTE FOR LABELS ON FORMS 4 http://www.webaxe.org/placeholder-attribute-is-not-a-label/Image credit: Dave Bushell: http://dbushell.com/2013/11/08/form-label-design/
  65. 65. 6. USE APPROPRIATE INPUT TYPES AND ATTRIBUTES ON FORMS 4
  66. 66. 7. PROOF DESIGNS IN GREYSCALE TO CHECK COLOUR CONTRAST 4 ALSO USE COLOUR BLINDNESS SIMULATORS AND COLOUR CONTRAST CHECK TOOLS Related: http://24ways.org/2012/colour-accessibility/
  67. 67. THE RESULTS
  68. 68. SINCE LAUNCH: 200% INCREASE IN MOBILE TRAFFIC 43% INCREASE IN CONVERSION RATE -4000% REDUCTION IN HOMEPAGE EXIT RATE ON MOBILE
  69. 69. MUCH TO LEARN THERE IS Copyright: Lucasfilm
  70. 70. THANK YOU @duckymatt @cyberduck_uk Copyright: Studio 37 & La Petite Reine & La Classe Américaine & JD Prod & France 3 Cinéma & Jouror Productions & uFilm
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×