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

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

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.

B852b104baed98f4b7f02f5a7a75ab6b?s=128

Matthew Reidsma

June 25, 2012
Tweet

More Decks by Matthew Reidsma

Other Decks in How-to & DIY

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 }
  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/ 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

  22. None
  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”
  30. None
  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) { ... }
  32. None
  33. MORE OKAY, TELL ME

  34. None
  35. None
  36. None
  37. None
  38. None
  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

  43. None
  44. CONTENT FIRST

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

    FOOTER
  46. None
  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 =

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

  94. None
  95. reidsmam@gvsu.edu :: @mreidsma matthewreidsma.com :: gvsu.edu/library/labs YOU THANK