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

The Edge of the Web

The Edge of the Web

Graphic designers have long honed their craft to meet the specific constraints of television. As web designers begin to understand the true nature of our own medium, isn’t about time we did the same?

Paul Robert Lloyd

March 01, 2013
Tweet

More Decks by Paul Robert Lloyd

Other Decks in Design

Transcript

  1. The edge
    of the web
    Paul Robert Lloyd
    Responsive Day Out
    1 March 2013

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide


  7. markboulton.co.uk/journal/a-richer-canvas
    Creating layouts on the web
    has to be different because
    there are no edges.
    A Richer Canvas
    — Mark Boulton

    View Slide

  8. nasa.gov/mission_pages/cassini/multimedia/pia12320.html

    View Slide

  9. 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

  10. 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

  11. View Slide

  12. Flexible
    Adaptable
    Scalable
    %, ems
    The web

    View Slide

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

    View Slide

  14. Flexible
    Adaptable
    Vectorised
    %, ems
    Flexible
    Adaptable
    Scalable
    %, ems
    The web Scalable Vector Graphics (SVG)

    View Slide

  15. View Slide


  16. welcomebrand.co.uk/thoughts/the-responsive-web-will-be-99-9-typography/
    The responsive web will be
    99.9% typography
    The responsive web will be 99% typography
    — James Young

    View Slide

  17. View Slide

  18. Meaning is the baseline
    Design is an enhancement

    View Slide

  19. When is an image not
    an ?

    View Slide

  20. Interface Content Decorative
    Vector (SVG)
    Icon font
    Optimised bitmap
    80% quality
    Optimised bitmap
    60% quality
    CSS image replacement

    View Slide

  21. Interface Content Decorative
    Vector (SVG)
    Icon font
    Optimised bitmap
    ~80% quality
    Optimised bitmap
    ~60% quality
    CSS image replacement

    View Slide

  22. Interface Content Decorative
    Vector (SVG)
    Icon font
    Optimised bitmap
    ~80% quality
    Optimised bitmap
    ~60% quality
    CSS image replacement

    View Slide

  23. ‘HiDPI’ image
    46kb
    Standard resolution image
    8kb
    UK unemployment total
    falls to 2.5m
    UK unemployment fell in the three months to
    December, while the number in work also jumped to a
    new record, official figures show.
    The jobless total fell by 14,000 between October and
    December to 2.5 million, the Office for National
    Statistics (ONS) said.
    The number in work rose by 154,000 to 29.7 million. More
    than 580,000 more people are employed than a year ago.
    The number of people claiming Jobseeker's Allowance in
    January fell by 12,500 to 1.54 million.
    UK unemployment total
    falls to 2.5m
    UK unemployment fell in the three months to
    December, while the number in work also jumped to a
    new record, official figures show.
    The jobless total fell by 14,000 between October and
    December to 2.5 million, the Office for National
    Statistics (ONS) said.
    The number in work rose by 154,000 to 29.7 million. More
    than 580,000 more people are employed than a year ago.
    The number of people claiming Jobseeker's Allowance in
    January fell by 12,500 to 1.54 million.

    View Slide

  24. View Slide

  25. http://
    prlloyd.com/responsiveconf

    View Slide

  26. 2012.dconstruct.org

    View Slide

  27. View Slide






  28. This image is wrong on so many levels.

    View Slide

  29. The Web Aesthetic
    alistapart.com/article/the-web-aesthetic

    View Slide

  30. nytimes.com

    View Slide

  31. nytimes.com/skimmer

    View Slide

  32. View Slide

  33. Opportunities

    View Slide

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

    View Slide