Responsive Web Design for Libraries: Get Beyond the Myth of the Mobile Web

An introduction to Responsive Web Design with a basic code walkthrough to get you started making your library website responsive.

Transcript

1. LIBRARIES RESPONSIVE WEB DESIGN FOR GET BEYOND THE MYTH OF THE MOBILE WEB MATTHEW REIDSMA : GVSU
2. GO AWAY Totally stolen from John Fink, @adr
3. MOBILE WEB DESKTOP WEB VS.
4. m.yourwebsite.com
5. if (device == iPhone) OR (device == Droid) { // Show mobile site } else { // Show “Desktop” site }
6. http://techcrunch.com/2012/05/11/this-is-what-developing-for-android-looks-like/
7. http://opensignalmaps.com/reports/fragmentation.php
8. if (browser == Mobile Safari) OR (browser == Opera Mini) { // Show mobile site } else { // Show “Desktop” site }
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/ 61% LIARS
12. MOBILE WEB THERE IS NO http://www.the-haystack.com/2011/01/07/there-is-no-mobile-web/
13. We should embrace the fact that the web doesn’t have the same constraints [as print], and design for this flexibility. JOHN ALSOPP, 2000 http://www.alistapart.com/articles/dao/
14. SCALABLE FLEXIBLE RESPONSIVE
15. WEB DESIGN RESPONSIVE
16. 1 FLEXIBLE GRIDS
17. { 80px { 24px
18. 960px 288px 600px
19. TARGET ÷ CONTEXT = RESULT From Ethan Marcotte, Responsive Web Design, 2011.
20. ELEMENT ÷ CONTAINER = RESULT From Ethan Marcotte, An Event Apart, May 2011
21. 960px 288px 600px
23. 600 ÷ 960 = 62.5% 288 ÷ 960 = 30% TARGET ÷ CONTEXT = RESULT
24. .left { float: left; width: 30%; } .right { float: right; width: 62.5%; }
25. 100% 30% 62.5%
26. 2 FLEXIBLE IMAGES
27. img { max-size: 100%; }
28. 3 MEDIA QUERIES
29. 320px Phone - portrait 480px Phone - landscape 600px 7” tablets - portrait 768px 10” tablets - portrait 980px #blue-banner-bar width 1024px 10” tablets - landscape, “desktop”
31. @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) { ... }
33. MORE OKAY, TELL ME
39. AT HOME PLAY ALONG LOLLIBRARY.ORG
40. HTML WELL-STRUCTURED
41. SOURCE ORDER
42. IS LAYOUT ENHANCEMENT AN -Ethan Marcotte https://twitter.com/zeldman/status/166653639383973889
44. CONTENT FIRST
45. HEADING 1 FORM SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS NAV FOOTER
47. AT HOME CODE ALONG REMMBR.US/LOL
48. THANK YOU MARIO! BUT OUR DESIGN IS IN ANOTHER CASTLE.
49. GRIDS MORE ON
50. TO CODE FROM PICTURES
51. CONTENT FIRST MOBILE
52. MOBILE BASE STYLES =
54. BLOCK ELEMENTS NAVIGATION AT THE BOTTOM ANCHOR LINK TO NAV IN HEADER SMALL-SCREEN LAYOUT ENHANCEMENTS
55. HEADING 1 ANCHOR # INPUT TYPE=”TEXT” INPUT TYPE=”SUBMIT” SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS FOOTER NAVIGATION
56. h1 { float: left; width: 66%; } header .nomed { float: right; width: 33%; } HEADING 1 ANCHOR #
57. h1 { float: left; padding-left: .65%; width: 65%; } header .nomed { float: right; margin-right: 1%; width: 32%; }
58. 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%; }
59. SIZE ENHANCE WITH
60. @media screen and (min-width: 33.75em) { /* Styles at least this wide go here */ }
61. EM WHAT?
62. SIZ RELATIVE ES
63. = 1 EM 16 PX*
64. RELATIVE RELATIVE EMS ARE
65. = 33.75 EM 540 PX*
66. IS 540 PX? WHAT DEVICE
67. 320px Phone - portrait 480px Phone - landscape 600px 7” tablets - portrait 768px 10” tablets - portrait 980px #blue-banner-bar width 1024px 10” tablets - landscape, “desktop”
68. THE DEVICE IT’S NOT ABOUT
69. CONTENT IT’S ABOUT
70. = BREAK POINT? WHEN IT LOOKS STUPID
71. FORM IN HEADER TO RIGHT NAVIGATION AT THE TOP ANCHOR LINK TO NAV IN HEADER GONE ENHANCEMENTS FOR > 33.75EM
72. HEADING 1 ANCHOR # INPUT TYPE=”TEXT” INPUT TYPE=”SUBMIT” SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS FOOTER HEADING 1 SUBMIT INPUT NAVIGATION
73. .nomed { display: none; }
74. INPUT SUBMIT h1 { width: 32%; } form { float: left; width: 66%; } input[type=”text”] { width: 66%; } input[type=”submit”] { float: right; width: 28%; } HEADING 1
75. 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/
76. NEWS & EVENTS IN RIGHT COLUMN EXHIBITS IN LEFT COLUMN ENHANCEMENTS FOR > 43.75EM
77. SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS FOOTER HEADING 1 SUBMIT INPUT NAVIGATION SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS
78. <div id=”right-column”> <section id=”news”> ... </section> <section id=”events”> ... </section> </div>
79. #right-column { float: right; width: 30%; } #exhibits { float: right; width: 66%; }
80. NEWS & EVENTS ACROSS THE TOP EXHIBITS BELOW IN 3 COLUMNS ENHANCEMENTS FOR > 64EM HEADING CHANGED TO FULL NAME
81. FOOTER HEADING 1 SUBMIT INPUT NAVIGATION SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS SECTION #EVENTS SECTION #EXHIBITS
82. #right-column { float: none; margin-left: 0; width: 100%; } #events { clear: none; width: 66%; float: right; } #news { width: 30%; margin-left: 3%; float: right; }
83. .event-img { float: left; margin: 0 1.5%; width: 47%; }
84. #exhibits { ! width: 100%; ! float: none; ! clear: both; } ! #exhibits .exhibit-section { ! float: left; ! width: 31.3%; ! margin: 0 1%; }
85. <h1> <a href="index.html"> <abbr title="Library or Librarian"> LOL </abbr> <span> Library or Librarian </span> Library </a> </h1>
86. h1 span { display: none; } @media screen and (min-width: 64em) { h1 abbr { display: none; } h1 span { display: inline; } }
87. SUPPORT A WORD ABOUT
88. https://github.com/scottjehl/Respond/
89. CHEATS? WHERE ARE THE
90. http://twitter.github.com/bootstrap/ TWITTER BOOTSTRAP http://foundation.zurb.com/ FOUNDATION
91. PEEPS? WHERE MY
92. http://cantonpl.org
93. http://preview.lib.virginia.edu
95. reidsmam@gvsu.edu :: @mreidsma matthewreidsma.com :: gvsu.edu/library/labs YOU THANK