Slide 1

Slide 1 text

Paul Robert Lloyd Designing for Everyone Multipack Presents: Show & Tell 10 November 2012

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

The medium is the message

Slide 7

Slide 7 text

Image Credit: Associated Press

Slide 8

Slide 8 text

“ scientificamerican.com/article.cfm?id=long-live-the-web 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. Long Live the Web: A Call for Continued Open Standards and Neutrality — Tim Berners-Lee

Slide 9

Slide 9 text

Image Credit: Brad Frost

Slide 10

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

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

Slide 12 text

Game Console Browsers console.maban.co.uk

Slide 13

Slide 13 text

Responsive web design

Slide 14

Slide 14 text

Responsible web design

Slide 15

Slide 15 text

Image Credit: Brad Frost

Slide 16

Slide 16 text

“ Who doesn’t have JavaScript? Everyone doesn’t have JavaScript until the JavaScript has loaded. — Jake Archibald

Slide 17

Slide 17 text

Blogger’s Dynamic Views buzz.blogger.com/2011/09/dynamic-views-seven-new-ways-to-share.html

Slide 18

Slide 18 text

Blogger’s Dynamic Views buzz.blogger.com/2011/09/dynamic-views-seven-new-ways-to-share.html

Slide 19

Slide 19 text

Progressive enhancement

Slide 20

Slide 20 text

Our front page makes 7 requests in total, at approximately 21kb. Everyone gets this initial payload… “ Cutting the mustard blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard

Slide 21

Slide 21 text

…a block of JavaScript checks the capabilities of the browser before deciding whether to kick start the enhanced experience. “ Cutting the mustard blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard

Slide 22

Slide 22 text

2012: Responsive Images

Slide 23

Slide 23 text

Do you get the picture?

Slide 24

Slide 24 text

Accessible text

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

Slide 25

Slide 25 text

•Issue exists at the file format/browser level •Art direction concerns style, not content •Image size is relative to container, not display •Symptom of print-inspired design Picture problems:

Slide 26

Slide 26 text

The Web Aesthetic

Slide 27

Slide 27 text

Typography Panel in Mac OS X

Slide 28

Slide 28 text

Typography Panel in Mac OS X

Slide 29

Slide 29 text

Typography Panel in Mac OS X

Slide 30

Slide 30 text

Rdio.com rdio.com

Slide 31

Slide 31 text

NYTimes.com nytimes.com/

Slide 32

Slide 32 text

NYTimes Skimmer nytimes.com/skimmer/

Slide 33

Slide 33 text

Quartz qz.com

Slide 34

Slide 34 text

2013: Web Native Design

Slide 35

Slide 35 text

“ jasonsantamaria.com/articles/baseline-grids-on-the-web Baselines grids can be too rigid for the inherently flexible nature of the web. Just because something works at one size doesn’t mean the same ratio will be appropriate at larger or smaller sizes. Baseline Grids on the Web — Jason Santa Maria

Slide 36

Slide 36 text

“ speakerdeck.com/espylaub/pagination-on-the-internet-and-why-its-weird The meaning of page numbers changes over time. Which defies the whole point of a URL. Pagination on the Internet and why it’s weird — Alex Feyerke

Slide 37

Slide 37 text

30 years ago…

Slide 38

Slide 38 text

http://dribbble.com/shots/179916-Channel-4-Ident-1982

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

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