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