Slide 1
Slide 1 text
Paul Robert Lloyd
This is for
Everyone
University of Greenwich: Talk Web Design
16 January 2013
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
1964 BBC2 launches, higher definition 625-line
1967 BBC2 begins regular colour broadcasts
1969 BBC1 & ITV begin broadcasting in colour
1976 7.5m colour television sets sold
2013 13,000 homes still have black and white sets
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
14:9 image safe
14:9 text safe
Slide 7
Slide 7 text
“ The medium is the message
— Marshall Mcluhan
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
The nature of the web
Slide 10
Slide 10 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 11
Slide 11 text
Image Credit: Associated Press
Slide 12
Slide 12 text
Image Credit: Brad Frost
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Retina®
Slide 17
Slide 17 text
Retina®
HiDPI
Slide 18
Slide 18 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 19
Slide 19 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 20
Slide 20 text
E Ink
Slide 21
Slide 21 text
“
alistapart.com/articles/dao
It is the nature of the web to be flexible,
and it should be our role as designers and
developers to embrace this flexibility.
A Dao of Web Design
— John Allsopp
Slide 22
Slide 22 text
Embracing the web
Slide 23
Slide 23 text
flickr.com/photos/jglitten/3167874991
Progressive enhancement
Slide 24
Slide 24 text
Blogger’s Dynamic Views
buzz.blogger.com/2011/09/dynamic-views-seven-new-ways-to-share.html
Slide 25
Slide 25 text
Blogger’s Dynamic Views
buzz.blogger.com/2011/09/dynamic-views-seven-new-ways-to-share.html
Slide 26
Slide 26 text
“ Who doesn’t have JavaScript? Everyone
doesn’t have JavaScript until the JavaScript
has loaded.
— Jake Archibald
Slide 27
Slide 27 text
flickr.com/photos/canonsnapper/1350813019/
Responsive web design
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
flickr.com/photos/aussiegall/6382775153/
Slide 30
Slide 30 text
“
blog.andyhume.net/responsive-by-default/
The web is responsive on its own—by
default. It’s us that’s been breaking it all
these years by placing content in fixed-
width containers.
Responsive by default
— Andy Hume
Slide 31
Slide 31 text
“ Responsive design is the most interesting,
yet least important aspect of web design.
WARNING: THE CONTENT OF THIS SLIDE MAY PROVE CONTROVERSIAL!
— Me, just then
Slide 32
Slide 32 text
flickr.com/photos/thatguyfromcchs08/2300190277/
Performance tuning
Slide 33
Slide 33 text
What Users Want from Mobile
e-commercefacts.com/research/2011/07/what-usrs-want-from-mobil/19986_WhatMobileUsersWant_Wp.pdf
Not available
13%
Didn’t function as expected
15%
Formatting made it difficult to use
15%
Crashed/froze
18%
Slow to load
38%
What is the most
common problem
you’ve encountered
accessing websites on
your mobile phone?
“
Slide 34
Slide 34 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
82 84 84 87 90 90 91 92
101
Total Requests
Total Transfer Size (kB)
Slide 35
Slide 35 text
Average Bytes per Page by Content Type
httparchive.org/interesting.php
CSS
35 kB
HTML
53 kB
Other
91 kB
Flash
91 kB
Scripts
207 kB
Images
793 kB
Total
1284 kB
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
“
blog.cloudfour.com/first-thing-you-should-do-to-optimize-your-desktop-site-for-mobile/
If you could only do one thing to prepare
your desktop site for mobile, and had to
choose between employing media queries
to make it look good or optimizing the site
for performance, you would be better
served by making the site blazingly fast.
First thing you should do to optimize your desktop site for mobile
— Jason Grigsby
Slide 38
Slide 38 text
flickr.com/photos/teegardin/5913014568/
Slide 39
Slide 39 text
Responsive Images
Slide 40
Slide 40 text
Flexible
Adaptable
Scalable
%, ems
The web
Slide 41
Slide 41 text
Flexible
Adaptable
Scalable
%, ems
Fixed
Static
Rasterised
px
The web Bitmap images
Slide 42
Slide 42 text
Flexible
Adaptable
Scalable
%, ems
The web Scalable Vector Graphics
Flexible
Adaptable
Vectorised
%, ems
Slide 43
Slide 43 text
Flexible
Adaptable
Scalable
%, ems
The web Scalable Vector Graphics
Flexible
Adaptable
Vectorised
%, ems Remember
to optimise!
Slide 44
Slide 44 text
flickr.com/photos/hippie/2467407294/
Slide 45
Slide 45 text
JPEG 2000 JPEG XR
(Microsoft)
WebP
(Google)
Slide 46
Slide 46 text
Accessible text
The picture element: An HTML extension for adaptive images picture.responsiveimages.orgSlide 47
Slide 47 text
• Compressive Images
filamentgroup.com/lab/rwd_img_compression/
calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/
• Progressive JPEGs
Slide 48
Slide 48 text
flickr.com/photos/speedoflightspeedoflight/4317191723/
Slide 49
Slide 49 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 50
Slide 50 text
Cutting the mustard
blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard
…a block of JavaScript
checks the capabilities
of the browser before
deciding whether to
kick start the enhanced
experience.
“
Slide 51
Slide 51 text
“
netmagazine.com/features/20-top-web-design-and-development-trends-2013
Although people now know web design
isn’t print, they’ve forgotten it’s actually
software, and performance is therefore a
critical UX factor
Interview with Graig Grannell for .net magazine
— Stephanie Rieger
Slide 52
Slide 52 text
The Web Aesthetic
alistapart.com/articles/the-web-aesthetic/
Slide 53
Slide 53 text
Typography Panel in Mac OS X
Slide 54
Slide 54 text
Typography Panel in Mac OS X
Slide 55
Slide 55 text
Typography Panel in Mac OS X
Slide 56
Slide 56 text
Rdio.com
rdio.com
Slide 57
Slide 57 text
NYTimes.com
nytimes.com/
Slide 58
Slide 58 text
NYTimes Skimmer
nytimes.com/skimmer/
Slide 59
Slide 59 text
Quartz
qz.com
Slide 60
Slide 60 text
“
alistapart.com/articles/the-web-aesthetic/
We should now have the confidence to
choose which aspects of other media and
platforms to take inspiration from, and
which to ignore. We should be inspired by
the conventions of other media, but no
longer governed by them.
The Web Aesthetic
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
Embrace constraints.
Create something new.
Slide 64
Slide 64 text
Thank you!
Creative Commons Licensed
Attribution, Non-Commercial, Share Alike
cc
paulrobertlloyd.com/archive
@paulrobertlloyd