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

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. [email protected] :: @mreidsma matthewreidsma.com :: gvsu.edu/library/labs YOU THANK