The Edge of the Web (Redux)

The Edge of the Web (Redux)

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?

0bce06bd06ee7a2c4f5500f25dcf7f18?s=128

Paul Robert Lloyd

March 28, 2013
Tweet

Transcript

  1. The edge of the web Paul Robert Lloyd Front-end London

    28 March 2013
  2. None
  3. None
  4. None
  5. None
  6. None
  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
  8. nasa.gov/mission_pages/cassini/multimedia/pia12320.html

  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 MAR 2013 82 84 84 87 90 89 90 90 99 100 Total Requests Total Transfer Size (kB)
  10. 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
  11. None
  12. Flexible Adaptable Scalable %, ems The web

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

    web Bitmap images
  14. Flexible Adaptable Vectorised %, ems Flexible Adaptable Scalable %, ems

    The web Scalable Vector Graphics (SVG)
  15. None
  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
  17. None
  18. Meaning is the baseline Design is an enhancement

  19. When is an image not an ? <img/>

  20. Interface Content Decorative Vector (SVG) Icon font Optimised bitmap ~80%

    quality Optimised bitmap ~60% quality CSS image replacement <img src=""/> <div data-imgsrc=""/>
  21. Interface Content Decorative Vector (SVG) Icon font Optimised bitmap ~80%

    quality Optimised bitmap ~60% quality CSS image replacement <img src=""/> <div data-imgsrc=""/>
  22. Interface Content Decorative Vector (SVG) Icon font Optimised bitmap ~80%

    quality Optimised bitmap ~60% quality CSS image replacement <img src=""/> <div data-imgsrc=""/>
  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.
  24. None
  25. http:// paulrobertlloyd.github.com/ responsivepatterns

  26. 2012.dconstruct.org

  27. None
  28. <picture width="500" height="500"> <source media="(min-width:45em)" src="carpark-large.jpg"/> <source media="(min-width:18em)" src="carpark-med.jpg"/> <source

    src="carpark-small.jpg"/> <img src="carpark-small.jpg" alt=""/> <p>This image is wrong on so many levels.</p> </picture>
  29. The Web Aesthetic alistapart.com/article/the-web-aesthetic

  30. nytimes.com

  31. nytimes.com/skimmer

  32. None
  33. Opportunity

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

    paulrobertlloyd.com @paulrobertlloyd