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?

Transcript

1. The edge of the web Paul Robert Lloyd Async 13 June – Brighton, England
5. 14:9 image safe 14:9 text safe
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
9. nasa.gov/mission_pages/cassini/multimedia/pia12320.html
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)
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
13. Flexible Adaptable Scalable %, ems The web
14. Fixed Static Rasterised px Flexible Adaptable Scalable %, ems The web Bitmap Images
15. Flexible Adaptable Vectorised %, ems Flexible Adaptable Scalable %, ems The web Scalable Vector Graphics (SVG)
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
19. Meaning is the baseline. Design is an enhancement.
20. When is an image not an ? <img/>
21. Interface Informative Decorative Vector (SVG) Icon font Bitmap (JPG, PNG) Bitmap (JPG, PNG) CSS image replacement <img src=""/> <div data-imgsrc=""/> CSS background Remove? Image Types
22. Interface Informative Decorative Vector (SVG) Icon font Bitmap (JPG, PNG) Bitmap (JPG, PNG) CSS image replacement <img src=""/> <div data-imgsrc=""/> CSS background Remove? Image Types
23. Interface Informative Decorative Vector (SVG) Icon font Bitmap (JPG, PNG) Bitmap (JPG, PNG) CSS image replacement <img src=""/> <div data-imgsrc=""/> CSS background Remove? Image Types
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.
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
27. http:// paulrobertlloyd.github.io/ responsivepatterns
28. 2012.dconstruct.org
29. <picture width="480" height="360"> <source media="(min-width:45em)" src="image-large.jpg"/> <source media="(min-width:18em)" src="image-med.jpg"/> <source src="image-small.jpg"/> <img src="image-small.jpg" alt=""/> <p>Alternative textual description of image.</p> </picture> The picture element: An HTML extension for adaptive images picture.responsiveimages.org
30. <img src="image-small.jpg" alt="" delay/> <img src="image-large.jpg" alt=""/> Feature to make <img> elements not load their images until needed w3.org/Bugs/Public/show_bug.cgi?id=17842 HTML Markup DOMContentLoaded
31. Towards a web aesthetic
32. The Web Aesthetic alistapart.com/article/the-web-aesthetic
33. nytimes.com
34. nytimes.com/skimmer
35. bbcgoodfood.com
36. bbcgoodfood.com/chromeapp
37. rdio.com
38. qz.com
39. buzz.blogger.com/2011/09/dynamic-views-seven-new-ways-to-share.html
40. buzz.blogger.com/2011/09/dynamic-views-seven-new-ways-to-share.html
42. Opportunity
43. Thank you! cc paulrobertlloyd.com @paulrobertlloyd Creative Commons Licensed Attribution, Non-Commercial, Share Alike