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

The Edge of the Web (Async)

The Edge of the Web (Async)

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

June 13, 2013
Tweet

More Decks by Paul Robert Lloyd

Other Decks in Design

Transcript

  1. The edge
    of the web
    Paul Robert Lloyd
    Async
    13 June – Brighton, England

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. 14:9 image safe
    14:9 text safe

    View Slide

  6. View Slide

  7. View Slide


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

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

    View Slide

  10. Total Transfer Size and Total Requests: Top 1000 Sites
    httparchive.org/trends.php
    500
    600
    700
    800
    900
    1,000
    1,100
    1,200
    1,300
    DEC 2010 MAR 2011 JUN 2011 SEP 2011 DEC 2011 MAR 2012 JUN 2012 SEP 2012 DEC 2012 MAR 2013 JUN 2013
    82 84 84 87 90 89 90 90
    99 100 102
    Total Requests
    Total Transfer Size (kB)

    View Slide

  11. Average Bytes per Page by Content Type: Top 1000 Sites (March 2013)
    httparchive.org/interesting.php
    CSS
    37 kB
    HTML
    45 kB
    Other
    165 kB
    Flash
    90 kB
    Scripts
    202 kB
    Images
    639 kB
    Total
    1197 kB

    View Slide

  12. View Slide

  13. Flexible
    Adaptable
    Scalable
    %, ems
    The web

    View Slide

  14. Fixed
    Static
    Rasterised
    px
    Flexible
    Adaptable
    Scalable
    %, ems
    The web Bitmap Images

    View Slide

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

    View Slide

  16. View Slide


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

  18. View Slide

  19. Meaning is the baseline.
    Design is an enhancement.

    View Slide

  20. When is an image not
    an ?

    View Slide

  21. Interface Informative Decorative
    Vector (SVG)
    Icon font
    Bitmap (JPG, PNG) Bitmap (JPG, PNG)
    CSS image replacement

    CSS background
    Remove?
    Image Types

    View Slide

  22. Interface Informative Decorative
    Vector (SVG)
    Icon font
    Bitmap (JPG, PNG) Bitmap (JPG, PNG)
    CSS image replacement

    CSS background
    Remove?
    Image Types

    View Slide

  23. Interface Informative Decorative
    Vector (SVG)
    Icon font
    Bitmap (JPG, PNG) Bitmap (JPG, PNG)
    CSS image replacement

    CSS background
    Remove?
    Image Types

    View Slide

  24. The Jobcentre Plus brand
    Our brand encompasses the nature of our
    relationship with customers. It is expressed
    throughout our communications, the attitude of
    our staff, and is symbolised by our identity.
    Within the offices, the expression of the brand
    identity is delivered through branded signs,
    graphic communications, and a range of
    component elements that are synonymous with
    Jobcentre Plus. These are set against a backdrop
    of colours, finishes and materials of the brand
    environment. The consistent application of the
    Informative
    Decorative
    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

  25. Facebook U-turn after
    charities criticise
    decapitation videos
    Facebook has said it will delete videos of people
    being decapitated which had been spread on its site.
    "We will remove instances of these videos that are
    reported to us while we evaluate our policy and approach
    to this type of content," it said.
    The news came less than two hours after the BBC
    revealed a member of Facebook's own safety advisory
    board had criticised its stance.
    The social network had previously refused to ban the
    Facebook U-turn after
    charities criticise
    decapitation videos
    Facebook has said it will delete videos of people
    being decapitated which had been spread on its site.
    "We will remove instances of these videos that are
    reported to us while we evaluate our policy and approach
    to this type of content," it said.
    The news came less than two hours after the BBC
    revealed a member of Facebook's own safety advisory
    board had criticised its stance.
    The social network had previously refused to ban the
    ‘HiDPI’ image Standard resolution image
    Decorative
    46kb 8kb
    Decorative

    View Slide

  26. View Slide

  27. http://
    paulrobertlloyd.github.io/
    responsivepatterns

    View Slide

  28. 2012.dconstruct.org

    View Slide






  29. Alternative textual description of image.

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

    View Slide



  30. Feature to make elements not load their images until needed
    w3.org/Bugs/Public/show_bug.cgi?id=17842
    HTML Markup
    DOMContentLoaded

    View Slide

  31. Towards a web aesthetic

    View Slide

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

    View Slide

  33. nytimes.com

    View Slide

  34. nytimes.com/skimmer

    View Slide

  35. bbcgoodfood.com

    View Slide

  36. bbcgoodfood.com/chromeapp

    View Slide

  37. rdio.com

    View Slide

  38. qz.com

    View Slide

  39. buzz.blogger.com/2011/09/dynamic-views-seven-new-ways-to-share.html

    View Slide

  40. buzz.blogger.com/2011/09/dynamic-views-seven-new-ways-to-share.html

    View Slide

  41. View Slide

  42. Opportunity

    View Slide

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

    View Slide