Responsive Web Design for Libraries

Slides for webinar on Responsive Design given to the Metropolitain New York Library Council on October 1, 2012.

Transcript

1. LIBRARIES RESPONSIVE WEB DESIGN MATTHEW REIDSMA FOR GRAND VALLEY STATE UNIVERSITY
4. 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
5. 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 “
6. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
7. My website will meet you wherever you are... “ Trent Walton http://trentwalton.com/2011/05/10/fit-to-scale/
8. MOBILE DESKTOP VS.
11. 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/
12. 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
13. “ 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/
14. DESIGN RESPONSIVE WEB
15. FLEXIBLE GRIDS 1
16. { 80px { 24px
17. 960px 288px 600px
18. .left { float: left; width: 288px; } .right { float: right; width: 600px; }
19. 960px 288px 600px
23. 960px 288px 600px
24. 960px 288px 600px
25. 960px 288px 600px
26. TARGET CONTEXT ÷ RESULT From Ethan Marcotte, Responsive Web Design, 2011.
28. 600 ÷ 960 = 62.5% 288 ÷ 960 = 30% TARGET ÷ CONTEXT = RESULT
29. .left { float: left; width: 30%; } .right { float: right; width: 62.5%; }
30. 100% 30% 62.5%
31. FLUID IMAGES 2
32. img { max-size: 100%; }
33. MEDIA QUERIES 3
34. 320px Phone - portrait 480px Phone - landscape 600px 7” tablets - portrait 768px 10” tablets - portrait 980px #blue-banner-bar width 1024px 10” tablets - landscape, “desktop”
36. @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) { ... }
41. HOME PLAY ALONG LOLLIBRARY.ORG AT
42. HTML WELL- STRUCTURED
43. SOURCE ORDER
44. IS LAYOUT ENHANCEMENT AN -Ethan Marcotte https://twitter.com/zeldman/status/166653639383973889
46. CONTENT FIRST
47. HEADING 1 FORM SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS NAV FOOTER
49. http://www.flickr.com/photos/splorp/6141775264/
50. HOME CODE ALONG GITHUB.COM/MREIDSMA/LOL AT
51. GRIDS MORE ON
52. TO PICTURES CODE FROM
53. CONTENT FIRST
54. MOBILE FIRST
55. 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
56. MOBILE STYLES BASE ARE
58. BLOCK ELEMENTS NAVIGATION AT THE BOTTOM ANCHOR LINK TO NAV IN HEADER 1 2 3 STYLES BASE
59. HEADING 1 ANCHOR # INPUT TYPE=”TEXT” INPUT TYPE=”SUBMIT” SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS FOOTER NAVIGATION
60. h1 { float: left; width: 66%; } header .nomed { float: right; width: 33%; } HEADING 1 ANCHOR #
61. h1 { float: left; padding-left: .65%; width: 65%; } header .nomed { float: right; margin-right: 1%; width: 32%; }
62. INPUT TYPE=”TEXT” INPUT TYPE=”SUBMIT” input[type=”text”] { display: block; margin: 0 1%; padding: .4em .96%; width: 96%; } input[type=”submit”] { display: block; margin: .5em 1%; width: 98%; }
63. SIZE ENHANCE WITH
64. @media screen and (min-width: 33.75em) { /* Styles at least this wide go here */ }
65. WHAT? EM
66. SIZ RELATIVE ES
67. = 1 EM 16 PX*
68. RELATIVE RELATIVE EMSARE
69. = 33.75 EM 540 PX*
70. IS WHAT DEVICE 540 PIXELS?
71. 320px Phone - portrait 480px Phone - landscape 600px 7” tablets - portrait 768px 10” tablets - portrait 980px #blue-banner-bar width 1024px 10” tablets - landscape, “desktop”
72. 320px Phone - portrait 480px Phone - landscape 600px 7” tablets - portrait 768px 10” tablets - portrait 980px #blue-banner-bar width 1024px 10” tablets - landscape, “desktop”
73. THE NOT ABOUT DEVICE
74. THE IT’S ABOUT CONTENT
75. BREAK POINT? WHEN LAYOUT BREAKS
77. FORM IN HEADER TO RIGHT NAVIGATION AT THE TOP ANCHOR LINK TO NAV IN HEADER GONE 1 2 3 STYLES >33.75EM
78. HEADING 1 ANCHOR # INPUT TYPE=”TEXT” INPUT TYPE=”SUBMIT” SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS FOOTER NAVIGATION
79. SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS FOOTER HEADING 1 INPUT SUBMIT NAVIGATION
80. .nomed { display: none; }
81. h1 { width: 32%; } form { float: left; width: 66%; } input[type=”text”] { width: 66%; } input[type=”submit”] { float: right; width: 28%; } HEADING 1 INPUT SUBMIT
82. body { display: table; caption-side: top; } nav[role="navigation"] { display: table-caption; } nav[role="navigation"] ol { display: table-row; } nav[role="navigation"] ol li { display: table-cell; } NAVIGATION http://adactio.com/journal/4780/
84. NEWS & EVENTS IN RIGHT COLUMN EXHIBITS IN LEFT COLUMN 1 2 STYLES >43.75EM
85. FOOTER HEADING 1 SUBMIT INPUT NAVIGATION SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS HEADING 1 INPUT SUBMIT NAVIGATION
86. <div id=”right-column”> <section id=”news”> ... </section> <section id=”events”> ... </section> </div>
87. #right-column { float: right; width: 30%; } #exhibits { float: right; width: 66%; }
89. NEWS & EVENTS ACROSS THE TOP EXHIBITS IN LEFT COLUMN HEADING CHANGED TO FULL NAME 1 2 3 STYLES >64 EM
90. FOOTER HEADING 1 SUBMIT INPUT NAVIGATION SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS HEADING 1 SUBMIT INPUT NAVIGATION HEADING 1 INPUT SUBMIT NAVIGATION
91. #right-column { float: none; margin-left: 0; width: 100%; } #events { clear: none; width: 66%; float: right; } #news { width: 30%; margin-left: 3%; float: right; }
92. .event-img { float: left; margin: 0 1.5%; width: 47%; }
93. #exhibits { ! width: 100%; ! float: none; ! clear: both; } ! #exhibits .exhibit-section { ! float: left; ! width: 31.3%; ! margin: 0 1%; }
94. <h1> <a href="index.html"> <abbr title="Library or Librarian"> LOL </abbr> <span> Library or Librarian </span> Library </a> </h1>
95. h1 span { display: none; } @media screen and (min-width: 64em) { h1 abbr { display: none; } h1 span { display: inline; } }
96. My website will meet you wherever you are... “ Trent Walton http://trentwalton.com/2011/05/10/fit-to-scale/
98. LIBRARIES OTHER (THAT EXIST)
99. http://gvsu.edu/library
100. http://lib.virginia.edu
101. http://cantonpl.org
102. http://www.hendrix.edu/baileylibrary/
103. http://allisonlibrary.regent-college.edu/
104. RWD LIBRARIES http://bit.ly/rwd-highered AND
105. ABOUT A WORD SUPPORT
107. https://github.com/scottjehl/Respond/
108. READ ARTICLES http://readlists.com/46e48ddd/ TO
109. http://www.abookapart.com/products/responsive-web-design
110. http://bradfrost.github.com/this-is-responsive/
111. CHEATS? WHERE ARE THE
112. http://twitter.github.com/bootstrap/ TWITTER BOOTSTRAP http://foundation.zurb.com/ FOUNDATION
114. reidsmam@gvsu.edu :: @mreidsma matthewreidsma.com :: gvsu.edu/library/labs YOU THANK