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 full-size slide

  2. 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 full-size slide

  3. 14:9 image safe
    14:9 text safe

    View full-size slide

  4. “ The medium is the message
    — Marshall Mcluhan

    View full-size slide

  5. The nature of the web

    View full-size slide


  6. 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 full-size slide

  7. Image Credit: Associated Press

    View full-size slide

  8. Image Credit: Brad Frost

    View full-size slide

  9. Retina®
    HiDPI

    View full-size slide

  10. 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 full-size slide

  11. 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 full-size slide


  12. 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 full-size slide

  13. Embracing the web

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. flickr.com/photos/aussiegall/6382775153/

    View full-size slide


  20. 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 full-size slide

  21. “ 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 full-size slide

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

    View full-size slide

  23. 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 full-size slide

  24. 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 full-size slide

  25. 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 full-size slide


  26. 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 full-size slide

  27. flickr.com/photos/teegardin/5913014568/

    View full-size slide

  28. Responsive Images

    View full-size slide

  29. Flexible
    Adaptable
    Scalable
    %, ems
    The web

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. flickr.com/photos/hippie/2467407294/

    View full-size slide

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

    View full-size slide






  35. Accessible text

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

    View full-size slide

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

    View full-size slide

  37. flickr.com/photos/speedoflightspeedoflight/4317191723/

    View full-size slide

  38. 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 full-size slide

  39. 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 full-size slide


  40. 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 full-size slide

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

    View full-size slide

  42. Typography Panel in Mac OS X

    View full-size slide

  43. Typography Panel in Mac OS X

    View full-size slide

  44. Typography Panel in Mac OS X

    View full-size slide

  45. Rdio.com
    rdio.com

    View full-size slide

  46. NYTimes.com
    nytimes.com/

    View full-size slide

  47. NYTimes Skimmer
    nytimes.com/skimmer/

    View full-size slide

  48. Quartz
    qz.com

    View full-size slide


  49. 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 full-size slide

  50. Embrace constraints.
    Create something new.

    View full-size slide

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

    View full-size slide