Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Design for Libraries

Responsive Web Design for Libraries

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

B852b104baed98f4b7f02f5a7a75ab6b?s=128

Matthew Reidsma

September 29, 2012
Tweet

More Decks by Matthew Reidsma

Other Decks in Technology

Transcript

  1. LIBRARIES RESPONSIVE WEB DESIGN MATTHEW REIDSMA FOR GRAND VALLEY STATE

    UNIVERSITY
  2. None
  3. None
  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.

  9. None
  10. None
  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

  20. None
  21. None
  22. None
  23. 960px 288px 600px

  24. 960px 288px 600px

  25. 960px 288px 600px

  26. TARGET CONTEXT ÷ RESULT From Ethan Marcotte, Responsive Web Design,

    2011.
  27. None
  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”
  35. None
  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) { ... }
  37. None
  38. None
  39. None
  40. None
  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

  45. None
  46. CONTENT FIRST

  47. HEADING 1 FORM SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS NAV

    FOOTER
  48. None
  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

  57. None
  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

  76. None
  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/
  83. None
  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%; }
  88. None
  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/
  97. None
  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

  106. None
  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

  113. None
  114. reidsmam@gvsu.edu :: @mreidsma matthewreidsma.com :: gvsu.edu/library/labs YOU THANK