Upgrade to Pro — share decks privately, control downloads, hide ads and more …

This is for Everyone

This is for Everyone

With the help of Doctor Who and the Avengers, discover how to embrace the unpredictable nature of the web.


Paul Robert Lloyd

January 16, 2013

More Decks by Paul Robert Lloyd

Other Decks in Design


  1. Paul Robert Lloyd This is for Everyone University of Greenwich:

    Talk Web Design 16 January 2013
  2. None
  3. None
  4. 1964 BBC2 launches, higher definition 625-line 1967 BBC2 begins regular

    colour broadcasts 1969 BBC1 & ITV begin broadcasting in colour 1976 7.5m colour television sets sold 2013 13,000 homes still have black and white sets
  5. None
  6. 14:9 image safe 14:9 text safe

  7. “ The medium is the message — Marshall Mcluhan

  8. None
  9. The nature of the web

  10. “ scientificamerican.com/article.cfm?id=long-live-the-web The web’s primary design principle is universality… it

    should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large. Long Live the Web: A Call for Continued Open Standards and Neutrality — Tim Berners-Lee
  11. Image Credit: Associated Press

  12. Image Credit: Brad Frost

  13. None
  14. None
  15. None
  16. Retina®

  17. Retina® HiDPI

  18. 5 July 2012 @marcoarment If you’re a web designer, you

    really, really need to get a Retina MacBook Pro so you can see how bad your site looks on it and fix it. twitter.com/marcoarment/status/220968507117015040
  19. 6 July 2012 @anna_debenham If you’re a web designer, you

    really, really need to get a cheap Dell monitor so you can see how bad your site looks on it and fix it. twitter.com/anna_debenham/status/221277339517067265
  20. E Ink

  21. “ alistapart.com/articles/dao It is the nature of the web to

    be flexible, and it should be our role as designers and developers to embrace this flexibility. A Dao of Web Design — John Allsopp
  22. Embracing the web

  23. flickr.com/photos/jglitten/3167874991 Progressive enhancement

  24. Blogger’s Dynamic Views buzz.blogger.com/2011/09/dynamic-views-seven-new-ways-to-share.html

  25. Blogger’s Dynamic Views buzz.blogger.com/2011/09/dynamic-views-seven-new-ways-to-share.html

  26. “ Who doesn’t have JavaScript? Everyone doesn’t have JavaScript until

    the JavaScript has loaded. — Jake Archibald
  27. flickr.com/photos/canonsnapper/1350813019/ Responsive web design

  28. None
  29. flickr.com/photos/aussiegall/6382775153/

  30. “ blog.andyhume.net/responsive-by-default/ The web is responsive on its own—by default.

    It’s us that’s been breaking it all these years by placing content in fixed- width containers. Responsive by default — Andy Hume
  31. “ Responsive design is the most interesting, yet least important

    aspect of web design. WARNING: THE CONTENT OF THIS SLIDE MAY PROVE CONTROVERSIAL! — Me, just then
  32. flickr.com/photos/thatguyfromcchs08/2300190277/ Performance tuning

  33. What Users Want from Mobile e-commercefacts.com/research/2011/07/what-usrs-want-from-mobil/19986_WhatMobileUsersWant_Wp.pdf Not available 13% Didn’t

    function as expected 15% Formatting made it difficult to use 15% Crashed/froze 18% Slow to load 38% What is the most common problem you’ve encountered accessing websites on your mobile phone? “
  34. Total Transfer Size and Total Requests: Top 1000 Sites httparchive.org/trends.php

    600 700 800 900 1,000 1,100 1,200 Dec 2010 Mar 2011 Jun 2011 Sep 2011 Dec 2011 Mar 2012 Jun 2012 Sep 2012 Dec 2012 82 84 84 87 90 90 91 92 101 Total Requests Total Transfer Size (kB)
  35. Average Bytes per Page by Content Type httparchive.org/interesting.php CSS 35

    kB HTML 53 kB Other 91 kB Flash 91 kB Scripts 207 kB Images 793 kB Total 1284 kB
  36. None
  37. “ blog.cloudfour.com/first-thing-you-should-do-to-optimize-your-desktop-site-for-mobile/ If you could only do one thing to

    prepare your desktop site for mobile, and had to choose between employing media queries to make it look good or optimizing the site for performance, you would be better served by making the site blazingly fast. First thing you should do to optimize your desktop site for mobile — Jason Grigsby
  38. flickr.com/photos/teegardin/5913014568/

  39. Responsive Images

  40. Flexible Adaptable Scalable %, ems The web

  41. Flexible Adaptable Scalable %, ems Fixed Static Rasterised px The

    web Bitmap images
  42. Flexible Adaptable Scalable %, ems The web Scalable Vector Graphics

    Flexible Adaptable Vectorised %, ems
  43. Flexible Adaptable Scalable %, ems The web Scalable Vector Graphics

    Flexible Adaptable Vectorised %, ems Remember to optimise!
  44. flickr.com/photos/hippie/2467407294/

  45. JPEG 2000 JPEG XR (Microsoft) WebP (Google)

  46. <picture width="500" height="500"> <source media="(min-width: 45em)" src="large.jpg"/> <source media="(min-width: 18em)"

    src="med.jpg"/> <source src="small.jpg"/> <img src="small.jpg" alt=""/> <p>Accessible text</p> </picture> The picture element: An HTML extension for adaptive images picture.responsiveimages.org
  47. • Compressive Images filamentgroup.com/lab/rwd_img_compression/ calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/ • Progressive JPEGs

  48. flickr.com/photos/speedoflightspeedoflight/4317191723/

  49. Our front page makes 7 requests in total, at approximately

    21kb. Everyone gets this initial payload… Cutting the mustard blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard “
  50. Cutting the mustard blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard …a block of JavaScript checks the

    capabilities of the browser before deciding whether to kick start the enhanced experience. “
  51. “ netmagazine.com/features/20-top-web-design-and-development-trends-2013 Although people now know web design isn’t print,

    they’ve forgotten it’s actually software, and performance is therefore a critical UX factor Interview with Graig Grannell for .net magazine — Stephanie Rieger
  52. The Web Aesthetic alistapart.com/articles/the-web-aesthetic/

  53. Typography Panel in Mac OS X

  54. Typography Panel in Mac OS X

  55. Typography Panel in Mac OS X

  56. Rdio.com rdio.com

  57. NYTimes.com nytimes.com/

  58. NYTimes Skimmer nytimes.com/skimmer/

  59. Quartz qz.com

  60. “ alistapart.com/articles/the-web-aesthetic/ We should now have the confidence to choose

    which aspects of other media and platforms to take inspiration from, and which to ignore. We should be inspired by the conventions of other media, but no longer governed by them. The Web Aesthetic
  61. None
  62. None
  63. Embrace constraints. Create something new.

  64. Thank you! Creative Commons Licensed Attribution, Non-Commercial, Share Alike cc

    paulrobertlloyd.com/archive @paulrobertlloyd