LIBRARIES
RESPONSIVE
WEB DESIGN
MATTHEW REIDSMA
FOR
GRAND VALLEY STATE UNIVERSITY
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
The control which designers
know in the print medium,
and often desire in the web
medium, is simply a
func on of the limita on of
the printed page.
http://www.alistapart.com/articles/dao/
“
John Allsopp
Slide 5
Slide 5 text
We should embrace the fact
that the web doesn’t have
the same constraints, and
design for this flexibility.
http://www.alistapart.com/articles/dao/
John Allsopp
“
My website will
meet you wherever
you are...
“
Trent Walton
http://trentwalton.com/2011/05/10/fit-to-scale/
Slide 8
Slide 8 text
MOBILE
DESKTOP
VS.
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
http://googlemobileads.blogspot.com/2011/04/complimentary-copy-of-mobile-movement.html
84%
80%
76%
64%
39%
AT HOME
RANDOM DOWNTIMES
WAITING IN LINE
AT WORK
IN THE BATHROOM
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
Slide 12
Slide 12 text
http://googlemobileads.blogspot.com/2011/04/complimentary-copy-of-mobile-movement.html
84%
80%
76%
64%
39%
AT HOME
RANDOM DOWNTIMES
WAITING IN LINE
AT WORK
IN THE BATHROOM
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
61% LIARS
Slide 13
Slide 13 text
“ There is no mobile web.
There is only The Web,
which we view in different
ways
Stephen Hay
http://www.the-haystack.com/2011/01/07/there-is-no-mobile-web/
@media screen and (min-width: 480px) { ... }
/* Base styles */
...
/* Progressive styles */
@media screen and (min-width: 600px) { ... }
@media screen and (min-width: 768px) { ... }
@media screen and (min-width: 980px) { ... }
@media screen and (min-width: 1024px) { ... }
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
HOME
PLAY ALONG
LOLLIBRARY.ORG
AT
Slide 42
Slide 42 text
HTML
WELL-
STRUCTURED
Slide 43
Slide 43 text
SOURCE
ORDER
Slide 44
Slide 44 text
IS
LAYOUT
ENHANCEMENT
AN
-Ethan Marcotte
https://twitter.com/zeldman/status/166653639383973889
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
CONTENT
FIRST
Slide 47
Slide 47 text
HEADING 1
FORM
SECTION #NEWS
SECTION #EVENTS
SECTION #EXHIBITS
NAV
FOOTER
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
http://www.flickr.com/photos/splorp/6141775264/
Slide 50
Slide 50 text
HOME
CODE ALONG
GITHUB.COM/MREIDSMA/LOL
AT
Slide 51
Slide 51 text
GRIDS
MORE ON
Slide 52
Slide 52 text
TO
PICTURES
CODE
FROM
Slide 53
Slide 53 text
CONTENT
FIRST
Slide 54
Slide 54 text
MOBILE
FIRST
Slide 55
Slide 55 text
The absence of support for
@media queries is in fact the
first @media query.
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
“
Bryan Rieger
Slide 56
Slide 56 text
MOBILE
STYLES
BASE
ARE
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
BLOCK ELEMENTS
NAVIGATION AT THE BOTTOM
ANCHOR LINK TO NAV IN HEADER
1
2
3
STYLES
BASE