This is for Everyone (Port 80)

by Paul Robert Lloyd

Slide 1

Slide 1 text

This is for everyone Paul Robert Lloyd Port80 2013 10 May – Newport, Wales

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

The nature of the web

Slide 9

Slide 9 text

“ The web’s primary design principle is universality... it should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large. scientificamerican.com/article.cfm?id=long-live-the-web Long Live the Web: A Call for Continued Open Standards and Neutrality — Tim Berners-Lee

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

flickr.com/photos/brad_frost/7387823392/

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Slide 16

Slide 16 text

5 July 2012 @marcoarment If you’re a web designer, you really, really need to get a Retina MacBook Pro so you can see how bad your site looks on it and fix it. twitter.com/marcoarment/status/220968507117015040

Slide 17

Slide 17 text

6 July 2012 @anna_debenham If you’re a web designer, you really, really need to get a cheap Dell monitor so you can see how bad your site looks on it and fix it. twitter.com/anna_debenham/status/221277339517067265

Slide 18

Slide 18 text

console.maban.co.uk

Slide 19

Slide 19 text

“ It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility. alistapart.com/articles/dao A Dao of Web Design — John Allsopp

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 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 22

Slide 22 text

Battery Bandwidth Latency

Slide 23

Slide 23 text

Clock designed by Taylor Medlin from The Noun Project Battery Bandwidth Latency

Slide 24

Slide 24 text

Clock designed by Taylor Medlin from The Noun Project Battery Bandwidth Latency

Slide 25

Slide 25 text

“ It’s time for us to treat performance as an essential design feature, not just as a technical best practice. bradfrostweb.com/blog/post/performance-as-design/ Performance As Design — Brad Frost

Slide 26

Slide 26 text

flickr.com/photos/teegardin/5913014568/

Slide 27

Slide 27 text

Responsive Images

Slide 28

Slide 28 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 29

Slide 29 text

No content

Slide 30

Slide 30 text

Flexible Adaptable Scalable %, ems The web

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

“ welcomebrand.co.uk/thoughts/the-responsive-web-will-be-99-9-typography/ The responsive web will be 99% typography — James Young The responsive web will be 99% typography

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Meaning is the baseline Design is an enhancement

Slide 37

Slide 37 text

How do we decide which images should exist in our markup?

Slide 38

Slide 38 text

Interface Informative Decorative Vector (SVG) Icon font Bitmap (JPG, PNG) ~80% quality Bitmap (JPG, PNG) ~60% quality CSS image replacement

CSS background Remove? Image Types

Slide 39

Slide 39 text

Interface Informative Decorative Vector (SVG) Icon font Bitmap (JPG, PNG) ~80% quality Bitmap (JPG, PNG) ~60% quality CSS image replacement

CSS background Remove? Image Types

Slide 40

Slide 40 text

Interface Informative Decorative Vector (SVG) Icon font Bitmap (JPG, PNG) ~80% quality Bitmap (JPG, PNG) ~60% quality CSS image replacement

CSS background Remove? Image Types

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 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 43

Slide 43 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 44

Slide 44 text

Alternative textual description of image.

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

Slide 45

Slide 45 text

Responsive Enhance https://github.com/joshje/Responsive-Enhance Scalable Bitmaps http://ericportis.com/posts/2013/scalables/ Responsive Image Patterns http://paulrobertlloyd.github.com/responsivepatterns

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

The Web Aesthetic

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

nytimes.com

Slide 50

Slide 50 text

nytimes.com/skimmer

Slide 51

Slide 51 text

bbcgoodfood.com

Slide 52

Slide 52 text

bbcgoodfood.com/chromeapp

Slide 53

Slide 53 text

rdio.com

Slide 54

Slide 54 text

qz.com

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

flickr.com/photos/joelhughes/7190011677/

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Design for the web.

Slide 60

Slide 60 text

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