Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ADAPTING TO A
RESPONSIVE
WEB DESIGN
HOW DO WE DEFINE
RESPONSIVE?
To react quickly
and positively.
http://goo.gl/hMFzFm
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 HAVEN’T
EVEN CONSIDERED YET
Image Copyright: Walt Disney Pictures & Tim Burton ...
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
ASSUMPTION IS
THE ENEMY OF A
GOOD CONTENT
STRATEGY
1
Image Copyright: BBC
1
Image Copyright: BBC
You don't get to decide which
device people use to access
your website.
KAREN MCGRANE
Source: http://alistapart.com/articl...
1
Credit: http://xkcd.com/773/
1
1
RESEARCHING
CONTENT STRATEGY
SPEAKING TO EXISTING CLIENTS
GOOGLE ANALYTICS
CRAZYEGG
LEAD TO SALES
1
Image Copyright: Warne...
OUR CONTENT DEFINES
THE LAYOUTS WE NEED
NOT THE OTHER WAY AROUND
1
11
MOBILE FIRST
CONTENT STRATEGY
SPEED MATTERS
2
2
TRANSFER
SIZE
2010 2015
700KB
1900KB
http://httparchive.org/trends.php
71% OF PEOPLE EXPECT WEBSITES
TO LOAD AS QUICKLY (OR FASTER)
ON THEIR MOBILE PHONE
2
See: http://e-commercefacts.com/resea...
It’s time for us to treat
performance as an essential
design feature, not just as a
technical best practice.
BRAD FROST
Ph...
PERFORMANCE AT THE HEART
OF ALL DESIGN DECISIONS
2
Copyright: Paramount Pictures,
Robert Stigwood Organisation,
Allan Car ...
SO,
TO ENHANCE PERFORMANCE WE…
2
SET PERFORMANCE BUDGETS
2
timkadlec.com/2013/01/setting-a-performance-budget/Image Copyright: Twentieth Century Fox Film C...
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
CUT DOWN ON FRAMEWORK BLOAT
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/
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...
3
LAYOUTS BASED ON CONTENT
RATHER THAN DEVICE
3
RESPONSIVE DESIGN WORKFLOW
3
SKETCH
3
Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures
SKETCH
PROTOTYPE
3
Copyright: Paramount Pictures & Marvel Enterprises
http://styletil.es/
3
3
TEST, TEST AND TEST SOME MORE
Copyright: The Ladd Company & Shaw Brothers & Warner Bros. http://vanamco.com/ghostlab/
ACCESSIBILITY
4
7 QUICK WINS FOR
ACCESSIBILITY
4
Image Copyright: Paramount Pictures & Lucasfilm
1. DESIGN FOR TOUCH BY
DEFAULT
4
ARE YOUR DESIGNS FINGER FRIENDLY?
ARE YOU RELYING TOO HEAVILY ON HOVER?
2. MAKE THE PURPOSE OF
ALL LINKS AS CLEAR AND
DESCRIPTIVE AS POSSIBLE
IF YOUR LINKS SAY “CLICK HERE”
YOU’RE DOING IT WRONG...
3. MAKE URLS HUMAN
READABLE AND PERMANENT
WHERE POSSIBLE
HTTP://ART.COM/ARTGALLERY/DEFAULT.ASP?
ID=9DF4BC0580DF11D3ACB6009...
4. USE APPROPRIATE INPUT
TYPES AND ATTRIBUTES ON
FORMS
4
5. CREATE A HIDDEN SKIP
NAVIGATION LINK
4
6. DON’T USE PLACEHOLDERS
AS A SUBSTITUTE FOR LABELS
ON FORMS
4
http://www.webaxe.org/placeholder-attribute-is-not-a-label...
7. PROOF DESIGNS IN GREYSCALE
TO CHECK COLOUR CONTRAST
4
Related: http://24ways.org/2012/colour-accessibility/
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 - London Web - Feb 2015
Upcoming SlideShare
Loading in …5
×

Adapting to Responsive Design - London Web - Feb 2015

Slides from my talk at London Web http://www.meetup.com/londonweb/events/176097702/ given on 19th February 2015.

  • Login to see the comments

Adapting to Responsive Design - London Web - Feb 2015

  1. ADAPTING TO A RESPONSIVE WEB DESIGN
  2. HOW DO WE DEFINE RESPONSIVE?
  3. To react quickly and positively. http://goo.gl/hMFzFm
  4. Responsive web design is a design approach that aims to create interfaces that react quickly and positively to the user’s conditions.
  5. PEOPLE WILL ACCESS OUR WEBSITES IN WAYS WE HAVEN’T EVEN CONSIDERED YET Image Copyright: Walt Disney Pictures & Tim Burton Pictures
  6. THE PREVIOUS STATE(S) OF OUR OWN WEBSITE “DESKTOP” SITE (2011) “TABLET” SITE (LATER 2011) *Not to scale :) “MOBILE” SITE (2012)
  7. OUR SEPARATE MOBILE WEBSITES: A STOP-GAP STRATEGY
  8. SO WHY GO RESPONSIVE?
  9. 3 FACTORS Image Copyright: L.A. Films & Home Box Office (HBO)
  10. MULTIPLE CODE BASES1 CONTENT STRATEGY2 KNOWN UNKNOWNS3
  11. SETTING 4 GOALS FOR A RESPONSIVE DESIGN Image Copyright: Chartoff-Winkler Productions & United Artists
  12. CONTENT PARITY Credit: http://wtfmobileweb.com/ THE SAME CONTENT SHOULD BE AVAILABLE ON ALL PLATFORMS 1
  13. SPEED MATTERS BECAUSE PERFORMANCE AFFECTS EVERYONE 2 Image Copyright: Universal Pictures
  14. FUTURE FRIENDLY See: http://futurefriend.ly/ CUT DOWN ON MAINTENANCE AND SUPPORT KNOWN UNKNOWNS 3 Image Copyright: Universal TV
  15. ACCESSIBILITY STYLES, BACKGROUNDS AND JAVASCRIPT ARE PROGRESSIVE ENHANCEMENTS 4 Photo Credit: Neil McKenzie: http://www.flickr.com/photos/furbyx4/2968376257/
  16. CONTENT PARITY 1
  17. ASSUMPTION IS THE ENEMY OF A GOOD CONTENT STRATEGY 1 Image Copyright: BBC
  18. 1 Image Copyright: BBC
  19. You don't get to decide which device people use to access your website. KAREN MCGRANE Source: http://alistapart.com/article/your-content-now-mobile Photo credit: Eirik Helland Urke: http://www.flickr.com/photos/webdagene/6149954950/ 1
  20. 1
  21. Credit: http://xkcd.com/773/ 1
  22. 1
  23. RESEARCHING CONTENT STRATEGY SPEAKING TO EXISTING CLIENTS GOOGLE ANALYTICS CRAZYEGG LEAD TO SALES 1 Image Copyright: Warner Bros.
  24. OUR CONTENT DEFINES THE LAYOUTS WE NEED NOT THE OTHER WAY AROUND 1
  25. 11 MOBILE FIRST CONTENT STRATEGY
  26. SPEED MATTERS 2
  27. 2 TRANSFER SIZE 2010 2015 700KB 1900KB http://httparchive.org/trends.php
  28. 71% OF PEOPLE EXPECT WEBSITES TO LOAD AS QUICKLY (OR FASTER) ON THEIR MOBILE PHONE 2 See: http://e-commercefacts.com/research/2011/07/what-usrs-want-from-mobil/19986_WhatMobileUsersWant_Wp.pdf
  29. It’s time for us to treat performance as an essential design feature, not just as a technical best practice. BRAD FROST Photo credit: John Davey: http://www.flickr.com/photos/johndavey/8891059281/ Source: http://bradfrostweb.com/blog/post/performance-as-design/ 2
  30. PERFORMANCE AT THE HEART OF ALL DESIGN DECISIONS 2 Copyright: Paramount Pictures, Robert Stigwood Organisation, Allan Car Production
  31. SO, TO ENHANCE PERFORMANCE WE… 2
  32. SET PERFORMANCE BUDGETS 2 timkadlec.com/2013/01/setting-a-performance-budget/Image Copyright: Twentieth Century Fox Film Corporation
  33. 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
  34. OFF THE SHELF FRONT-END FRAMEWORKS 2
  35. Photo credit: Don Shall: http://www.flickr.com/photos/donshall/3817115551/ 2 CUT DOWN ON FRAMEWORK BLOAT
  36. KNOWING YOUR CODE FROM TOP TO BOTTOM IS ESSENTIAL TO HAVE TOTAL CONTROL OVER IT 2 Image credit: http://css-tricks.com/
  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. ONLY LOADING WHAT WE NEED WHEN WE NEED IT. 2
  39. JAVASCRIPT 2 http://requirejs.org/
  40. CSS 2 http://sass-lang.com/
  41. IMAGES 2 BEGIN WITH OPTIMISATION
  42. IMAGES 2 THEN COMPRESSION http://imageoptim.com/ https://tinypng.com/
  43. FUTURE FRIENDLINESS 3
  44. THE WEB DOESN’T HAVE A FIXED WIDTH 3
  45. 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
  46. 3
  47. LAYOUTS BASED ON CONTENT RATHER THAN DEVICE 3
  48. RESPONSIVE DESIGN WORKFLOW 3
  49. SKETCH 3 Copyright: Twentieth Century Fox Film Corporation & Paramount Pictures
  50. SKETCH
  51. PROTOTYPE 3 Copyright: Paramount Pictures & Marvel Enterprises
  52. http://styletil.es/ 3
  53. 3
  54. TEST, TEST AND TEST SOME MORE Copyright: The Ladd Company & Shaw Brothers & Warner Bros. http://vanamco.com/ghostlab/
  55. ACCESSIBILITY 4
  56. 7 QUICK WINS FOR ACCESSIBILITY 4 Image Copyright: Paramount Pictures & Lucasfilm
  57. 1. DESIGN FOR TOUCH BY DEFAULT 4 ARE YOUR DESIGNS FINGER FRIENDLY? ARE YOU RELYING TOO HEAVILY ON HOVER?
  58. 2. MAKE THE PURPOSE OF ALL LINKS AS CLEAR AND DESCRIPTIVE AS POSSIBLE IF YOUR LINKS SAY “CLICK HERE” YOU’RE DOING IT WRONG 4
  59. 3. MAKE URLS HUMAN READABLE AND PERMANENT WHERE POSSIBLE HTTP://ART.COM/ARTGALLERY/DEFAULT.ASP? ID=9DF4BC0580DF11D3ACB60090271E26A8&COMMAND=FREELIST 4
  60. 4. USE APPROPRIATE INPUT TYPES AND ATTRIBUTES ON FORMS 4
  61. 5. CREATE A HIDDEN SKIP NAVIGATION LINK 4
  62. 6. 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/
  63. 7. PROOF DESIGNS IN GREYSCALE TO CHECK COLOUR CONTRAST 4 Related: http://24ways.org/2012/colour-accessibility/
  64. THE RESULTS
  65. SINCE LAUNCH: 200% INCREASE IN MOBILE TRAFFIC 43% INCREASE IN CONVERSION RATE -4000% REDUCTION IN HOMEPAGE EXIT RATE ON MOBILE
  66. MUCH TO LEARN THERE IS Copyright: Lucasfilm
  67. THANK YOU @duckymatt @cyberduck_uk Copyright: Studio 37 & La Petite Reine & La Classe Américaine & JD Prod & France 3 Cinéma & Jouror Productions & uFilm

×