The Edge of the Web (Redux)

by Paul Robert Lloyd

Slide 1

Slide 1 text

The edge of the web Paul Robert Lloyd Front-end London 28 March 2013

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

No content

Slide 6

Slide 6 text

No content

Slide 7

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

Slide 8 text

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

Slide 9

Slide 9 text

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)

Slide 10

Slide 10 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 11

Slide 11 text

No content

Slide 12

Slide 12 text

Flexible Adaptable Scalable %, ems The web

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 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 17

Slide 17 text

No content

Slide 18

Slide 18 text

Meaning is the baseline Design is an enhancement

Slide 19

Slide 19 text

When is an image not an ?

Slide 20

Slide 20 text

Interface Content Decorative Vector (SVG) Icon font Optimised bitmap ~80% quality Optimised bitmap ~60% quality CSS image replacement

Slide 21

Slide 21 text

Interface Content Decorative Vector (SVG) Icon font Optimised bitmap ~80% quality Optimised bitmap ~60% quality CSS image replacement

Slide 22

Slide 22 text

Interface Content Decorative Vector (SVG) Icon font Optimised bitmap ~80% quality Optimised bitmap ~60% quality CSS image replacement

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

http:// paulrobertlloyd.github.com/ responsivepatterns

Slide 26

Slide 26 text

2012.dconstruct.org

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

This image is wrong on so many levels.

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

nytimes.com

Slide 31

Slide 31 text

nytimes.com/skimmer

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Opportunity

Slide 34

Slide 34 text

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