Slide 1

Slide 1 text

This is for everyone Paul Robert Lloyd LDNIA #4 21 August 2013 – London, 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

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

© Jay Harrison

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 700 800 900 1,000 1,100 1,200 1,300 2012 Aug Sep Oct Nov Dec Jan Feb Mar Apr May Jun 2013 88 90 91 97 97 98 98 98 98 100 100 99 100 Total Requests Total Transfer Size (kB)

Slide 22

Slide 22 text

What Users Want From Mobile e-commercefacts.com/research/2011/07/what-usrs-want-from-mobil/19986_WhatMobileUsersWant_Wp.pdf > 5s 12% 5s 18% 4s 11% 3s 24% 2s 21% < 1s 14% 3 seconds or less: 59% What are your expectations for how quickly a website should load on your mobile phone?

Slide 23

Slide 23 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 24

Slide 24 text

flickr.com/photos/teegardin/5913014568/

Slide 25

Slide 25 text

Average Bytes per Page by Content Type: Top 1000 Sites (July 2013) httparchive.org/interesting.php CSS 37 kB HTML 47 kB Other 184 kB Flash 79 kB Scripts 209 kB Images 668 kB Total 1246 kB

Slide 26

Slide 26 text

Responsive images

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Flexible Adaptable Scalable %, ems The web

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 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 33

Slide 33 text

No content

Slide 34

Slide 34 text

Meaning is the baseline Design is an enhancement

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Interface Informative Decorative Vector (SVG) Icon font Bitmap (JPG, PNG) Bitmap (JPG, PNG) CSS image replacement
CSS background Remove? Image Types

Slide 37

Slide 37 text

Interface Informative Decorative Vector (SVG) Icon font Bitmap (JPG, PNG) Bitmap (JPG, PNG) CSS image replacement
CSS background Remove? Image Types

Slide 38

Slide 38 text

Interface Informative Decorative Vector (SVG) Icon font Bitmap (JPG, PNG) Bitmap (JPG, PNG) CSS image replacement
CSS background Remove? Image Types

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 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 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 41

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

Slide 42 text

Alternative textual description of image.

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

Slide 43

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

Slide 44 text

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

Slide 45

Slide 45 text

28 April 2013 @paulrobertlloyd Consider new attributes over new elements over new markup languages. twitter.com/paulrobertlloyd/status/328487022429888512

Slide 46

Slide 46 text

The Web Aesthetic

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

nytimes.com

Slide 49

Slide 49 text

nytimes.com/skimmer

Slide 50

Slide 50 text

rdio.com

Slide 51

Slide 51 text

rdio.com

Slide 52

Slide 52 text

qz.com

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

thatemil.com/blog/2013/05/22/drowning/ HTML, CSS, JavaScript, Sublime Text, PHP, Python, Ruby, Rails, Django, bash, Grunt, Git, Photoshop, Fabric, XPath, GPU, CPU, URLs, pen and paper, BDD, Sharpies, Textmate, IE, Composer, jank, Ice Cream Sandwich, Node, XP, Marionette, Cake, npm, Transmit, e-mail, flexbox, Firefox, a11y, Yeoman, Brunch, zsh, MVC, angular, Ghostlab, Illustrator, Backbone, dotfiles, Express, A/B testing, Chrome, stand-ups, semver, bizdev, Fireworks, .gitkeep, TDD, Silex, HTTP, rebase, jQuery, Jekyll, Travis, Charles, JSON, Hammer, i10n, Bower, Capybara, Capistrano, Watir, Buster, Mocha, Puppet, Chef, Virtualbox, CoffeeScript, Firefox, Adobe Edge, Jellybean, Webdriver, LightTable, Cucumber, Batman, ARIA, Web Components, Flight, AdWords, SPDY, Agile, shadow DOM, uglify, svn, clojure, RWD, blink and you will have missed something. Drowning

Slide 56

Slide 56 text

thatemil.com/blog/2013/05/22/drowning/ HTML, CSS, JavaScript, Sublime Text, PHP, Python, Ruby, Rails, Django, bash, Grunt, Git, Photoshop, Fabric, XPath, GPU, CPU, URLs, pen and paper, BDD, Sharpies, Textmate, IE, Composer, jank, Ice Cream Sandwich, Node, XP, Marionette, Cake, npm, Transmit, e-mail, flexbox, Firefox, a11y, Yeoman, Brunch, zsh, MVC, angular, Ghostlab, Illustrator, Backbone, dotfiles, Express, A/B testing, Chrome, stand-ups, semver, bizdev, Fireworks, .gitkeep, TDD, Silex, HTTP, rebase, jQuery, Jekyll, Travis, Charles, JSON, Hammer, i10n, Bower, Capybara, Capistrano, Watir, Buster, Mocha, Puppet, Chef, Virtualbox, CoffeeScript, Firefox, Adobe Edge, Jellybean, Webdriver, LightTable, Cucumber, Batman, ARIA, Web Components, Flight, AdWords, SPDY, Agile, shadow DOM, uglify, svn, clojure, RWD, blink and you will have missed progressive enhancement. Drowning

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

Design for the web.

Slide 59

Slide 59 text

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