The Edge of the Web (Async)

by Paul Robert Lloyd

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

14:9 image safe 14:9 text safe

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

“ 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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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)

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Flexible Adaptable Scalable %, ems The web

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

“ 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

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Meaning is the baseline. Design is an enhancement.

Slide 20

Slide 20 text

When is an image not an ?

Slide 21

Slide 21 text

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

CSS background Remove? Image Types

Slide 22

Slide 22 text

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

CSS background Remove? Image Types

Slide 23

Slide 23 text

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

CSS background Remove? Image Types

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

http:// paulrobertlloyd.github.io/ responsivepatterns

Slide 28

Slide 28 text

2012.dconstruct.org

Slide 29

Slide 29 text

Alternative textual description of image.

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Towards a web aesthetic

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

nytimes.com

Slide 34

Slide 34 text

nytimes.com/skimmer

Slide 35

Slide 35 text

bbcgoodfood.com

Slide 36

Slide 36 text

bbcgoodfood.com/chromeapp

Slide 37

Slide 37 text

rdio.com

Slide 38

Slide 38 text

qz.com

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Opportunity

Slide 43

Slide 43 text

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