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?

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