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
Tweet

More Decks by Paul Robert Lloyd

Other Decks in Design

Transcript

  1. Paul Robert Lloyd
    This is for
    Everyone
    University of Greenwich: Talk Web Design
    16 January 2013

    View Slide

  2. View Slide

  3. View Slide

  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

    View Slide

  5. View Slide

  6. 14:9 image safe
    14:9 text safe

    View Slide

  7. “ The medium is the message
    — Marshall Mcluhan

    View Slide

  8. View Slide

  9. The nature of the web

    View Slide


  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

    View Slide

  11. Image Credit: Associated Press

    View Slide

  12. Image Credit: Brad Frost

    View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. Retina®

    View Slide

  17. Retina®
    HiDPI

    View Slide

  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

    View Slide

  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

    View Slide

  20. E Ink

    View Slide


  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

    View Slide

  22. Embracing the web

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  26. “ Who doesn’t have JavaScript? Everyone
    doesn’t have JavaScript until the JavaScript
    has loaded.
    — Jake Archibald

    View Slide

  27. flickr.com/photos/canonsnapper/1350813019/
    Responsive web design

    View Slide

  28. View Slide

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

    View Slide


  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

    View Slide

  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

    View Slide

  32. flickr.com/photos/thatguyfromcchs08/2300190277/
    Performance tuning

    View Slide

  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?

    View Slide

  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)

    View Slide

  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

    View Slide

  36. View Slide


  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

    View Slide

  38. flickr.com/photos/teegardin/5913014568/

    View Slide

  39. Responsive Images

    View Slide

  40. Flexible
    Adaptable
    Scalable
    %, ems
    The web

    View Slide

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

    View Slide

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

    View Slide

  43. Flexible
    Adaptable
    Scalable
    %, ems
    The web Scalable Vector Graphics
    Flexible
    Adaptable
    Vectorised
    %, ems Remember
    to optimise!

    View Slide

  44. flickr.com/photos/hippie/2467407294/

    View Slide

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

    View Slide






  46. Accessible text

    The picture element: An HTML extension for adaptive images
    picture.responsiveimages.org

    View Slide

  47. • Compressive Images
    filamentgroup.com/lab/rwd_img_compression/
    calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/
    • Progressive JPEGs

    View Slide

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

    View Slide

  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

    View Slide

  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.

    View Slide


  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

    View Slide

  52. The Web Aesthetic
    alistapart.com/articles/the-web-aesthetic/

    View Slide

  53. Typography Panel in Mac OS X

    View Slide

  54. Typography Panel in Mac OS X

    View Slide

  55. Typography Panel in Mac OS X

    View Slide

  56. Rdio.com
    rdio.com

    View Slide

  57. NYTimes.com
    nytimes.com/

    View Slide

  58. NYTimes Skimmer
    nytimes.com/skimmer/

    View Slide

  59. Quartz
    qz.com

    View Slide


  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

    View Slide

  61. View Slide

  62. View Slide

  63. Embrace constraints.
    Create something new.

    View Slide

  64. Thank you!
    Creative Commons Licensed
    Attribution, Non-Commercial, Share Alike
    cc
    paulrobertlloyd.com/archive
    @paulrobertlloyd

    View Slide