responsible web design        JONAS PÄCKOS    EVRY SENSOMMARSYMPOSIUM 2012
web and mobile ux developer  WEB DESIGNER ++
changes in personal computing  http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/
changes in personal computing  http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/
http://thenextweb.com/apple/2012/01/25/there-are-now-more-iphones-sold-than-babies-born-in-the-world-every-day/
responsive web design
responsive web design      Fluid grids    Flexible Media    Media Queries
fluid gridshttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
640 x 480 800 x 6001024 x 768
http://www.floridadisaster.org/SiteView.htm
flexible media   Images    Video
flexible media
flexible media     1024px                 683px
flexible mediaimg, video {  max-width: 100%;}
media queries@media screen and (min-width:320px) and (max-width: 768px){...}
common breakpoints 320px   mobile portrait 480px   mobile landscape 600px   small tablet 768px   tablet portrait1024px   t...
”Responsive design is not about“designing for mobile.” But it’s notabout “designing for the desktop,”either.              ...
”Rather, it’s about adopting a moreflexible, device-agnostic approachto designing for the web.                             ...
”Fluid grids, flexible images, andmedia queries are the tools we useto get a bit closer to that somewhatabstract-sounding p...
common breakpoints 320px   mobile portrait 480px   mobile landscape 600px   small tablet 768px   tablet portrait1024px   t...
Today’s common breakpoints aren’ttomorrow’s. Create a device-agnosticflexible platform.                                    ...
android fragmentationThe Study. Over the past 6 months weve been logging the new devices that download OpenSignalMaps, wev...
Over the past 6 months weve beenlogging the new devices that downloadOpenSignalMaps, weve based this studyon 681,900 of th...
Weve looked at model, brand, API level(i.e. the version of Android) and screensize and weve tried to present this inthe cl...
android fragmentation  http://opensignalmaps.com/reports/fragmentation.php
android versionshttp://opensignalmaps.com/reports/fragmentation.php
screen resolutionhttp://opensignalmaps.com/reports/fragmentation.php
screen resolution     Android
screen resolutionAndroid, most common screen sizes
screen resolution   iPhone and iPad
http://designmind.frogdesign.com/blog/the-coming-zombie-apocalypse-small-cheap-devices-                       will-disrupt...
responsive web design                                                                                  contentperformance ...
performance
71%  Mobile web users expect websites to load   as fast if not faster than desktop siteshttp://www.compuware.com/d/release...
74%Mobile users will abandon a site if it takes      more than 5 seconds to load  http://www.gomez.com/resources/whitepape...
1 MB          Average page sizehttp://gigaom.com/2012/05/23/the-growing-epidemic-of-page-bloat/
Average Page, 2012JS      IMG         CSS   FLASH   HTML      OTHER            196kb     31kb46kb     82kb                ...
http://mobitest.akamai.com/m/index.cgi
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
structure content first
work with real content
start with mobile
WYSIWYG
Do websites need to look exactly  the same in every browser?
screen resolutionhttp://opensignalmaps.com/reports/fragmentation.php
WYSIWTF
http://styletil.es
http://styletil.es
http://foundation.zurb.com
http://twitter.github.com/bootstrap/
http://twitter.github.com/bootstrap/examples/fluid.html
twitter bootstrap mediaqueries @media       (min-width:                     1200px) {...} @media       (max-width:        ...
a more mobile-first approach@media       (min-width:                     320px) {...}@media       (min-width:             ...
common breakpoints 320px   mobile portrait 480px   mobile landscape 600px   small tablet 768px   tablet portrait1024px   t...
Today’s common breakpoints aren’ttomorrow’s. Create a device-agnosticflexible platform.                                    ...
a mobile-first and content   connected approach@media       (min-width:                     44em) {...}@media       (min-w...
”The absence of a media query isin fact, the first media query.                                                            ...
begin with a lightweight defaultA                      fully flexible with defaultB                     styles for navigati...
each style sheet augments the others            breakpoint                              breakpoint                     sty...
each style sheet augments the others            breakpoint                              breakpoint                        ...
a common approach                                                    One style sheet with media                           ...
a more robust option                                                                         Multiple style sheets with   ...
http://scottjehl.github.com/CSS-Download-Tests/
http://www.zurb.com/article/883/small-painful-buttons-why-social-media-bu
http://www.zurb.com/article/883/small-painful-buttons-why-social-media-bu
To load the Facebook,Twitter and Google socialmedia buttons for a total of19 requests takes 246.7k inbandwidth.   http://w...
https://twitter.com/stephenhay/status/157430546396483587
progressively enhanced social icons<a href="http://www.facebook.com/sharer.php?u=URL&t=TITLE">link or image</a><a href="ht...
progressive enhancement      JavaScript          Behaviour           CSS         Presentation         HTML       Stabile f...
aggressive enhancementSome devices can’t display carousels, so why burden those       devices with content that they don’t...
aggressive enhancement    If a browser doesn’t have JavaScript, it doesn’t evendownload the secondary carousel content. Th...
south street enhancement toolsEnhancea tiny JavaScript framework designed to help developers determine if a browser iscapa...
http://www.lukew.com/ff/entry.asp?1392
the smart tv
http://www.alistapart.com/articles/dao/http://www.alistapart.com/articles/dao/
”Make pages which are accessible,regardless of the browser, platformor screen that your reader choosesor must use to acces...
”Designing adaptable pages isdesigning accessible pages.                                                 - John Allsop    ...
”Design responsibly!                      - Jonas Päckos
thank you.http://about.me/pekkoshttp://www.slideshare.net/pekkos     @pekkos
Responsible Web Design
Responsible Web Design
Responsible Web Design
Responsible Web Design
Responsible Web Design
Responsible Web Design
Responsible Web Design
Responsible Web Design
Responsible Web Design
Responsible Web Design
Responsible Web Design
Responsible Web Design
Responsible Web Design
Upcoming SlideShare
Loading in...5
×

Responsible Web Design

7,606

Published on

A talk I gave at the annual EVRY Summer Symposium, aiming to inspire developers to develop responsibly and responsively.

Published in: Technology, Design

Transcript of "Responsible Web Design"

  1. 1. responsible web design JONAS PÄCKOS EVRY SENSOMMARSYMPOSIUM 2012
  2. 2. web and mobile ux developer WEB DESIGNER ++
  3. 3. changes in personal computing http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/
  4. 4. changes in personal computing http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/
  5. 5. http://thenextweb.com/apple/2012/01/25/there-are-now-more-iphones-sold-than-babies-born-in-the-world-every-day/
  6. 6. responsive web design
  7. 7. responsive web design Fluid grids Flexible Media Media Queries
  8. 8. fluid gridshttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  9. 9. 640 x 480 800 x 6001024 x 768
  10. 10. http://www.floridadisaster.org/SiteView.htm
  11. 11. flexible media Images Video
  12. 12. flexible media
  13. 13. flexible media 1024px 683px
  14. 14. flexible mediaimg, video { max-width: 100%;}
  15. 15. media queries@media screen and (min-width:320px) and (max-width: 768px){...}
  16. 16. common breakpoints 320px mobile portrait 480px mobile landscape 600px small tablet 768px tablet portrait1024px tablet landscape / netbook1280px desktop
  17. 17. ”Responsive design is not about“designing for mobile.” But it’s notabout “designing for the desktop,”either. - Ethan Marcotte http://unstoppablerobotninja.com/entry/toffee-nosed/
  18. 18. ”Rather, it’s about adopting a moreflexible, device-agnostic approachto designing for the web. - Ethan Marcotte http://unstoppablerobotninja.com/entry/toffee-nosed/
  19. 19. ”Fluid grids, flexible images, andmedia queries are the tools we useto get a bit closer to that somewhatabstract-sounding philosophy. - Ethan Marcotte http://unstoppablerobotninja.com/entry/toffee-nosed/
  20. 20. common breakpoints 320px mobile portrait 480px mobile landscape 600px small tablet 768px tablet portrait1024px tablet landscape / netbook1280px desktop
  21. 21. Today’s common breakpoints aren’ttomorrow’s. Create a device-agnosticflexible platform. - Brad Frost http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
  22. 22. android fragmentationThe Study. Over the past 6 months weve been logging the new devices that download OpenSignalMaps, weve based this study on 681,900 of these devices. Weve lat model, brand, API level (i.e. the version of Android) and screen size and weve tried to present this in the clearest form we can. http://opensignalmaps.com/reports/fragmentation.php
  23. 23. Over the past 6 months weve beenlogging the new devices that downloadOpenSignalMaps, weve based this studyon 681,900 of these devices. http://opensignalmaps.com/reports/fragmentation.php
  24. 24. Weve looked at model, brand, API level(i.e. the version of Android) and screensize and weve tried to present this inthe clearest form we can. http://opensignalmaps.com/reports/fragmentation.php
  25. 25. android fragmentation http://opensignalmaps.com/reports/fragmentation.php
  26. 26. android versionshttp://opensignalmaps.com/reports/fragmentation.php
  27. 27. screen resolutionhttp://opensignalmaps.com/reports/fragmentation.php
  28. 28. screen resolution Android
  29. 29. screen resolutionAndroid, most common screen sizes
  30. 30. screen resolution iPhone and iPad
  31. 31. http://designmind.frogdesign.com/blog/the-coming-zombie-apocalypse-small-cheap-devices- will-disrupt-our-old-school-ux-assumptions.htm
  32. 32. responsive web design contentperformance strategy feature touch detection conditional rwd with server-side loading components Photo Credit: http://howthehellshouldiknow-wallyworld.blogspot.se/2011/08/this-is-just-tip-of-iceberg.html
  33. 33. performance
  34. 34. 71% Mobile web users expect websites to load as fast if not faster than desktop siteshttp://www.compuware.com/d/release/592528/new-study-reveals-the-mobile-web-disappoints-global-consumers
  35. 35. 74%Mobile users will abandon a site if it takes more than 5 seconds to load http://www.gomez.com/resources/whitepapers/survey-report-what-users-want-from-mobile/
  36. 36. 1 MB Average page sizehttp://gigaom.com/2012/05/23/the-growing-epidemic-of-page-bloat/
  37. 37. Average Page, 2012JS IMG CSS FLASH HTML OTHER 196kb 31kb46kb 82kb 674kb 37kb
  38. 38. http://mobitest.akamai.com/m/index.cgi
  39. 39. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  40. 40. structure content first
  41. 41. work with real content
  42. 42. start with mobile
  43. 43. WYSIWYG
  44. 44. Do websites need to look exactly the same in every browser?
  45. 45. screen resolutionhttp://opensignalmaps.com/reports/fragmentation.php
  46. 46. WYSIWTF
  47. 47. http://styletil.es
  48. 48. http://styletil.es
  49. 49. http://foundation.zurb.com
  50. 50. http://twitter.github.com/bootstrap/
  51. 51. http://twitter.github.com/bootstrap/examples/fluid.html
  52. 52. twitter bootstrap mediaqueries @media (min-width: 1200px) {...} @media (max-width: 980px) {...} @media (max-width: 768px) {...} @media (max-width: 480px) {...} @media (max-width: 320px) {...} http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css
  53. 53. a more mobile-first approach@media (min-width: 320px) {...}@media (min-width: 480px) {...}@media (min-width: 768px) {...}@media (min-width: 980px) {...}@media (min-width: 1200px) {...} http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css
  54. 54. common breakpoints 320px mobile portrait 480px mobile landscape 600px small tablet 768px tablet portrait1024px tablet landscape / netbook1280px desktop
  55. 55. Today’s common breakpoints aren’ttomorrow’s. Create a device-agnosticflexible platform. - Brad Frost http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
  56. 56. a mobile-first and content connected approach@media (min-width: 44em) {...}@media (min-width: 56em) {...}@media (min-width: 72em) {...}@media (min-width: 100em) {...} http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css
  57. 57. ”The absence of a media query isin fact, the first media query. - Bryan Rieger http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
  58. 58. begin with a lightweight defaultA fully flexible with defaultB styles for navigation, fonts, content andC no media query http://www.slideshare.net/yiibu/pragmatic-responsive-design
  59. 59. each style sheet augments the others breakpoint breakpoint style sheet 1 augment original A A B style sheet with B C (only) the style C changes that are needed to enhance the layout < xx px wide xx px to xxx px (or unable tounderstand further http://www.slideshare.net/yiibu/pragmatic-responsive-design instructions)
  60. 60. each style sheet augments the others breakpoint breakpoint breakpoint style sheet 1 style sheet 2 A C A A B B augment B C once again for C TVs etc. < xx px wide xx px to xxx px >xxx px wide (or unable tounderstand further http://www.slideshare.net/yiibu/pragmatic-responsive-design instructions)
  61. 61. a common approach One style sheet with media queries on the inside. styles.css @media { (min-width: 320px) } a single css file is network @media { efficient, but includes (min-width: 480px) unnecessary style data that } all devices end up downloading @media { (min-width: 640px) } @media { (min-width: 768px)http://www.slideshare.net/yiibu/pragmatic-responsive-design }
  62. 62. a more robust option Multiple style sheets with media queries on the inside.MAJORBREAKPOINTSIN DOCUMENTHEAD basic.css mobile.css desktop.cssMINOR (typically) @media { @media {BREAKPOINTS no media (min-width: 480px) (min-width: 768px)WITHIN EACH queries } }STYLE SHEET @media { (min-width: 640px) } http://www.slideshare.net/yiibu/pragmatic-responsive-design
  63. 63. http://scottjehl.github.com/CSS-Download-Tests/
  64. 64. http://www.zurb.com/article/883/small-painful-buttons-why-social-media-bu
  65. 65. http://www.zurb.com/article/883/small-painful-buttons-why-social-media-bu
  66. 66. To load the Facebook,Twitter and Google socialmedia buttons for a total of19 requests takes 246.7k inbandwidth. http://www.zurb.com/article/883/small-painful-buttons-why-social-media-bu
  67. 67. https://twitter.com/stephenhay/status/157430546396483587
  68. 68. progressively enhanced social icons<a href="http://www.facebook.com/sharer.php?u=URL&t=TITLE">link or image</a><a href="http://twitter.com/home?status=STATUS" title="Clickto share this post on Twitter">Share on Twitter</a><a href="https://m.google.com/app/plus/x/?v=compose&content=CONTENT">Image or text</a>
  69. 69. progressive enhancement JavaScript Behaviour CSS Presentation HTML Stabile foundation
  70. 70. aggressive enhancementSome devices can’t display carousels, so why burden those devices with content that they don’t need? Progressive enhancement is where you gradually layer new functionality into a site according to the capabilities of the browser or device. Aggressive enhancement goes further, treating content itself as an enhancement. http://globalmoxie.com/blog/making-of-people-mobile.shtml
  71. 71. aggressive enhancement If a browser doesn’t have JavaScript, it doesn’t evendownload the secondary carousel content. The result is a light page that lets the browser start rendering that basic content right away. It’s a technique that’s respectful of visitors’ bandwidth, computing power, and time. It’s not only responsive, it’s responsible. http://globalmoxie.com/blog/making-of-people-mobile.shtml
  72. 72. south street enhancement toolsEnhancea tiny JavaScript framework designed to help developers determine if a browser iscapable of handling additional JavaScript and CSS enhancements, and load specificenhancements for that browser as fast and simply as possible.eCSSentialan experimental utility for making browsers load responsive CSS in a more responsibleway.QuickConcata simple dynamic concatenator for html, css, and js files, written in PHPAjaxIncludea plugin that is designed for modular content construction, that runs on jQueryAppendAroundA JavaScript pattern for responsive, roving markup. IA L SOUTH NT DE EC S SE STREET AJ A XIN C LUPictureFilla simple pattern for overhead-free responsive images today. https://github.com/filamentgroup/Southstreet
  73. 73. http://www.lukew.com/ff/entry.asp?1392
  74. 74. the smart tv
  75. 75. http://www.alistapart.com/articles/dao/http://www.alistapart.com/articles/dao/
  76. 76. ”Make pages which are accessible,regardless of the browser, platformor screen that your reader choosesor must use to access your pages. - John Allsop http://www.alistapart.com/articles/dao/
  77. 77. ”Designing adaptable pages isdesigning accessible pages. - John Allsop http://www.alistapart.com/articles/dao/
  78. 78. ”Design responsibly! - Jonas Päckos
  79. 79. thank you.http://about.me/pekkoshttp://www.slideshare.net/pekkos @pekkos

×