Slide 1

Slide 1 text

LIBRARIES RESPONSIVE MATTHEW REIDSMA WEB DESIGN FOR GRAND VALLEY STATE UNIVERSITY

Slide 2

Slide 2 text

http://www.telegraph.co.uk/news/worldnews/northamerica/usa/9640488/Interactive-compare-Hurricane-Sandy-to-Irene.html

Slide 3

Slide 3 text

http://www.theatlantic.com/infocus/2012/10/hurricane-sandy-in-photos/100395/

Slide 4

Slide 4 text

http://www.ﬂoridadisaster.org/SiteView.htm

Slide 5

Slide 5 text

GET HERE? HOW DID WE

Slide 6

Slide 6 text

http://www.youtube.com/watch?v=IaFjNyLuENk

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

http://adactio.com/journal/4443/ For over a decade, we have pretended that there’s a mythical perfect size [viewport] that every person will be using. Jeremy Keith “

Slide 9

Slide 9 text

Ethan Marcotte, Responsive Web Design, p. 3 The problem with this approach is that we’re one step removed from our actual canvas: the browser window Ethan Marco e “

Slide 10

Slide 10 text

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

Slide 11

Slide 11 text

https://twitter.com/zeldman/status/166653639383973889 Layout is an enhancement. Ethan Marco e “

Slide 12

Slide 12 text

http://bostonglobe.com

Slide 13

Slide 13 text

http://www.ﬂickr.com/photos/splorp/6141775264/

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

We should embrace the fact that the web doesn’t have the same constraints, and design for this ﬂexibility. http://www.alistapart.com/articles/dao/ John Allsopp “

Slide 16

Slide 16 text

http://techcrunch.com/2012/05/11/this-is-what-developing-for-android-looks-like/

Slide 17

Slide 17 text

http://opensignalmaps.com/reports/fragmentation.php

Slide 18

Slide 18 text

My website will meet you wherever you are... “ Trent Walton http://trentwalton.com/2011/05/10/ﬁt-to-scale/

Slide 19

Slide 19 text

MOBILE DESKTOP VS.

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

OWN A SMARTPHONE 2011-12 US ADULTS 46% http://pewinternet.org/Reports/2012/Smartphone-Update-2012.aspx http://pewinternet.org/Reports/2011/Smartphones.aspx

Slide 23

Slide 23 text

OWN A SMARTPHONE 2011-12 US ADULTS 46% USE WEB ONLY ON PHONE 25% http://pewinternet.org/Reports/2012/Smartphone-Update-2012.aspx http://pewinternet.org/Reports/2011/Smartphones.aspx

Slide 24

Slide 24 text

OWN A SMARTPHONE 2011-12 US ADULTS 46% USE WEB ONLY ON PHONE 25% USE WEB ONLY ON PHONE 11% http://pewinternet.org/Reports/2012/Smartphone-Update-2012.aspx http://pewinternet.org/Reports/2011/Smartphones.aspx

Slide 25

Slide 25 text

Slide 26

Slide 26 text

WHITE, NON-HISPANIC 2012 US ADULTS 52% USE PHONE TO BROWSE WEB http://pewinternet.org/Reports/2012/Cell-Activities/Additional-Demographic-Analysis/Demographics.aspx

Slide 27

Slide 27 text

WHITE, NON-HISPANIC 2012 US ADULTS 52% BLACK, NON-HISPANIC 60% USE PHONE TO BROWSE WEB http://pewinternet.org/Reports/2012/Cell-Activities/Additional-Demographic-Analysis/Demographics.aspx

Slide 28

Slide 28 text

WHITE, NON-HISPANIC 2012 US ADULTS 52% BLACK, NON-HISPANIC 60% HISPANIC 66% USE PHONE TO BROWSE WEB http://pewinternet.org/Reports/2012/Cell-Activities/Additional-Demographic-Analysis/Demographics.aspx

Slide 29

Slide 29 text

2013 US TEENS USE WEB SOMETIMES ON PHONE 74% http://pewinternet.org/Reports/2013/Teens-and-Tech.aspx

Slide 30

Slide 30 text

2013 US TEENS USE WEB SOMETIMES ON PHONE 74% USE WEB ONLY ON PHONE 25% http://pewinternet.org/Reports/2013/Teens-and-Tech.aspx

Slide 31

Slide 31 text

2013 US TEENS OWN A SMARTPHONE 37% USE WEB SOMETIMES ON PHONE 74% USE WEB ONLY ON PHONE 25% http://pewinternet.org/Reports/2013/Teens-and-Tech.aspx

Slide 32

Slide 32 text

2013 US TEENS OWN A SMARTPHONE 37% USE WEB ONLY ON SMARTPHONE 50% USE WEB SOMETIMES ON PHONE 74% USE WEB ONLY ON PHONE 25% http://pewinternet.org/Reports/2013/Teens-and-Tech.aspx

Slide 33

Slide 33 text

AT HOME 2010 SMARTPHONE USE 84% http://googlemobileads.blogspot.com/2011/04/complimentary-copy-of-mobile-movement.html http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/

Slide 34

Slide 34 text

AT HOME 2010 SMARTPHONE USE 84% RANDOM DOWNTIMES 80% http://googlemobileads.blogspot.com/2011/04/complimentary-copy-of-mobile-movement.html http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/

Slide 35

Slide 35 text

AT HOME 2010 SMARTPHONE USE 84% RANDOM DOWNTIMES 80% WAITING IN LINE 76% http://googlemobileads.blogspot.com/2011/04/complimentary-copy-of-mobile-movement.html http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/

Slide 36

Slide 36 text

AT HOME 2010 SMARTPHONE USE 84% RANDOM DOWNTIMES 80% WAITING IN LINE 76% AT WORK 64% http://googlemobileads.blogspot.com/2011/04/complimentary-copy-of-mobile-movement.html http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/

Slide 37

Slide 37 text

AT HOME 2010 SMARTPHONE USE 84% RANDOM DOWNTIMES 80% WAITING IN LINE 76% AT WORK 64% IN THE BATHROOM 39% http://googlemobileads.blogspot.com/2011/04/complimentary-copy-of-mobile-movement.html http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/

Slide 38

Slide 38 text

LIARS 2010 SMARTPHONE USE 61% http://googlemobileads.blogspot.com/2011/04/complimentary-copy-of-mobile-movement.html http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/

Slide 39

Slide 39 text

http://techcrunch.com/2012/01/12/ebay-forecasts-8b-in-mobile-commerce-volume-in-2012-paypal-will-reach-7b/ http://reviews.cnet.com/8301-13746_7-20030552-48.html http://www.businessweek.com/news/2012-01-11/ebay-s-paypal-mobile-payment-volume-rose-to-4-billion-last-year.html PAYPAL PAYMENTS $4 BILLION 2011 SALES ON MOBILE

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

2012 US ADULTS >16 VISITED A LIBRARY WEBSITE 39% http://libraries.pewinternet.org/2012/12/31/mobile-connections-to-libraries/

Slide 43

Slide 43 text

2012 US ADULTS >16 VISITED A LIBRARY WEBSITE 39% VISITED IN PAST YEAR 25% http://libraries.pewinternet.org/2012/12/31/mobile-connections-to-libraries/

Slide 44

Slide 44 text

2012 US ADULTS >16 VISITED ON MOBILE DEVICE 13% VISITED A LIBRARY WEBSITE 39% VISITED IN PAST YEAR 25% http://libraries.pewinternet.org/2012/12/31/mobile-connections-to-libraries/

Slide 45

Slide 45 text

2012 US ADULTS >16 VISITED ON MOBILE DEVICE 13% VISITED ON MOBILE DEVICE 33% VISITED A LIBRARY WEBSITE 39% VISITED IN PAST YEAR 25% http://libraries.pewinternet.org/2012/12/31/mobile-connections-to-libraries/

Slide 46

Slide 46 text

“ There is no mobile web. There is only The Web, which we view in diﬀerent ways. Stephen Hay http://www.the-haystack.com/2011/01/07/there-is-no-mobile-web/

Slide 47

Slide 47 text

DESIGN RESPONSIVE WEB

Slide 48

Slide 48 text

Remember that RWD is a label for something that the web has always done na vely, but that we chose to break. https://twitter.com/anna_debenham/status/297328683721568256 Anna Debenham “

Slide 49

Slide 49 text

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

Slide 50

Slide 50 text

FLEXIBLE GRIDS 1

Slide 51

Slide 51 text

{ 80px { 24px

Slide 52

Slide 52 text

960px 288px 600px

Slide 53

Slide 53 text

.left { float: left; width: 288px; } .right { float: right; width: 600px; }

Slide 54

Slide 54 text

960px 288px 600px

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

960px 288px 600px

Slide 59

Slide 59 text

960px 288px 600px

Slide 60

Slide 60 text

960px 288px 600px

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

600 ÷ 960 = 62.5% 288 ÷ 960 = 30% TARGET ÷ CONTEXT = RESULT

Slide 64

Slide 64 text

.left { float: left; width: 30%; } .right { float: right; width: 62.5%; }

Slide 65

Slide 65 text

100% 30% 62.5%

Slide 66

Slide 66 text

FLUID MEDIA 2

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

img { max-size: 100%; }

Slide 70

Slide 70 text

img, video, object, iframe { max-size: 100%; }

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

HEIGHT ÷ WIDTH = ASPECT RATIO http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

Slide 73

Slide 73 text

315 ÷ 560 =56.25% http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

Slide 74

Slide 74 text

.video-wrap { padding-top: 56.25%; position: relative; } http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

Slide 75

Slide 75 text

http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

Slide 76

Slide 76 text

.video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height:100%; } http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

Slide 77

Slide 77 text

http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

Slide 78

Slide 78 text

MEDIA QUERIES 3

Slide 79

Slide 79 text

@media screen { ... } @media print { ... } @media all { ... } @media handheld { ... }

Slide 80

Slide 80 text

@media handheld { ... }

Slide 81

Slide 81 text

@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) { ... }

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

OOPS. https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

Slide 84

Slide 84 text

Your CSS is interpreted as if the screen were signiﬁcantly wider than the phone screen. This makes sure that your site’s layout behaves as it does on a desktop browser. http://www.quirksmode.org/mobile/viewports2.html “ Peter-Paul Koch

Slide 85

Slide 85 text

Slide 86

Slide 86 text

WITH VIEWPORT TAG https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

PERFORMANCE 4

Slide 92

Slide 92 text

WEBPAGE SIZE http://httparchive.org/interesting.php 312K 2008 2010 2011 2012 929K 702K 1269K

Slide 93

Slide 93 text

WEBPAGE REQUESTS http://www.websiteoptimization.com/speed/tweak/average-web-page/ http://httparchive.org/trends.php?s=All&minlabel=Nov+15+2010&maxlabel=Apr+1+2013#bytesTotal&reqTotal 50 2008 2010 2011 2012 86 74 88

Slide 94

Slide 94 text

GOOGLE .9 30 RESULTS PAGE LOAD TIME IN SECONDS .4 2006 http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html

Slide 95

Slide 95 text

GOOGLE .9 30 RESULTS 10 RESULTS PAGE LOAD TIME IN SECONDS .4 2006 http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html

Slide 96

Slide 96 text

Half a second delay caused a 20% drop in traﬃc. Half a second delay killed user sa sfac on. http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html “ Marissa Mayer

Slide 97

Slide 97 text

YOUTUBE “FEATHER” http://blog.chriszacharias.com/page-weight-matters 98KB FEATHER

Slide 98

Slide 98 text

YOUTUBE “FEATHER” http://blog.chriszacharias.com/page-weight-matters 98KB FEATHER ORIGINAL 1.2MB

Slide 99

Slide 99 text

Large numbers of people who were previously unable to use YouTube before were suddenly able to. http://blog.chriszacharias.com/page-weight-matters “ Chris Zacharias

Slide 100

Slide 100 text

PERFORMANCE IMPROVE

Slide 101

Slide 101 text

REDUCE SERVER REQUESTS 1 PERFORMANCE IMPROVE

Slide 102

Slide 102 text

REDUCE SERVER REQUESTS 1 PERFORMANCE IMPROVE 2 REDUCE BYTES SENT

Slide 103

Slide 103 text

Slide 104

Slide 104 text

Slide 105

Slide 105 text

Slide 106

Slide 106 text

one.css two.css http://phette.net/prez/speed-feature-performance-mobile-web/ﬁles/index.html#/7

Slide 107

Slide 107 text

one.css two.css both.css http://phette.net/prez/speed-feature-performance-mobile-web/ﬁles/index.html#/7

Slide 108

Slide 108 text

Slide 109

Slide 109 text

Slide 110

Slide 110 text

http://www.httparchive.org/interesting.php

Slide 111

Slide 111 text

OPTIMIZE IMAGES 60KB

Slide 112

Slide 112 text

OPTIMIZE IMAGES 60KB 40KB

Slide 113

Slide 113 text

IMAGE SPRITES OPTIMIZE IMAGES 60KB 40KB

Slide 114

Slide 114 text

IMAGE SPRITES ICON FONTS OPTIMIZE IMAGES 60KB 40KB

Slide 115

Slide 115 text

IMAGE SPRITES ICON FONTS CSS3 box-shadow border-radius etc. OPTIMIZE IMAGES 60KB 40KB

Slide 116

Slide 116 text

URIS DATA (THE NERDIEST PART OF THIS TALK)

Slide 117

Slide 117 text

URIS DATA .nerd-image { background: url(data:image/ gif;base64,R0lGODlhCwAOAMQfAP////7+/ vj4+Hh4eHd3d/v7+/ Dw8HV1dfLy8ubm5vX19e3t7fr6+nl5edra2nZ2dnx8fMHB wYODg/ b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX13Jycp2dnevr 6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/ o9imAsBtKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKTh enkwDgeGMiggDLEXQkDoThCKNLpQDgjeAsY7MHgECgx8YR 8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0DkgcEIQA7); }

Slide 118

Slide 118 text

MEDIA APPROPRIATE ! !

Slide 119

Slide 119 text

MEDIA APPROPRIATE github.com/scottjehl/pictureﬁll

Slide 120

Slide 120 text

http://www.httparchive.org/interesting.php

Slide 121

Slide 121 text

JQUERY 280KB

Slide 122

Slide 122 text

JQUERY 280KB JQUERY.MIN 90KB

Slide 123

Slide 123 text

JQUERY 280KB JQUERY.MIN 90KB JQUERY.MIN GZIPPED 33KB

Slide 124

Slide 124 text

JQUERY 280KB JQUERY.MIN 90KB JQUERY.MIN GZIPPED 33KB JAVASCRIPT 0KB

Slide 125

Slide 125 text

CACHING TALK TO YOUR NERDS ABOUT & COMPRESSION

Slide 126

Slide 126 text

FOLLOW ALONG AT HOME www.lollibrary.org github.com/mreidsma/lol

Slide 127

Slide 127 text

SOURCE ORDER

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

CONTENT FIRST

Slide 130

Slide 130 text

https://twitter.com/kissane/status/324244397636067329

Slide 131

Slide 131 text

CONTENT FIRST

Slide 132

Slide 132 text

MOBILE FIRST

Slide 133

Slide 133 text

MOBILE STYLES BASE ARE

Slide 134

Slide 134 text

No content

Slide 135

Slide 135 text

BLOCK ELEMENTS NAVIGATION AT THE BOTTOM ANCHOR LINK TO NAV IN HEADER 1 2 3 STYLES BASE

Slide 136

Slide 136 text

HEADING 1 ANCHOR # INPUT TYPE=”TEXT” INPUT TYPE=”SUBMIT” SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS FOOTER NAVIGATION

Slide 137

Slide 137 text

h1 { float: left; width: 66%; } header .anchor { float: right; width: 33%; } HEADING 1 ANCHOR #

Slide 138

Slide 138 text

h1 { float: left; padding-left: .65%; width: 65%; } header .anchor { float: right; margin-right: 1%; width: 32%; }

Slide 139

Slide 139 text

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%; }

Slide 140

Slide 140 text

SIZE ENHANCE WITH

Slide 141

Slide 141 text

@media screen and (min-width: 33.75em) { /* Styles at least this wide go here */ }

Slide 142

Slide 142 text

WHAT? EM

Slide 143

Slide 143 text

SIZ RELATIVE ES

Slide 144

Slide 144 text

= 1 EM 16 PX*

Slide 145

Slide 145 text

RELATIVE RELATIVE EMS ARE

Slide 146

Slide 146 text

= 33.75 EM 540 PX*

Slide 147

Slide 147 text

BREAK POINT? WHEN LAYOUT BREAKS

Slide 148

Slide 148 text

No content

Slide 149

Slide 149 text

FORM IN HEADER TO RIGHT NAVIGATION AT THE TOP ANCHOR LINK TO NAV IN HEADER GONE 1 2 3 STYLES >33.75EM

Slide 150

Slide 150 text

HEADING 1 ANCHOR # INPUT TYPE=”TEXT” INPUT TYPE=”SUBMIT” SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS FOOTER NAVIGATION

Slide 151

Slide 151 text

SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS FOOTER HEADING 1 SUBMIT INPUT NAVIGATION

Slide 152

Slide 152 text

header .anchor { display: none; }

Slide 153

Slide 153 text

h1 { width: 32%; } form { float: left; width: 66%; } input[type=”text”] { width: 66%; } input[type=”submit”] { float: right; width: 28%; } HEADING 1 INPUT SUBMIT

Slide 154

Slide 154 text

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/

Slide 155

Slide 155 text

No content

Slide 156

Slide 156 text

NEWS & EVENTS IN RIGHT COLUMN EXHIBITS IN LEFT COLUMN 1 2 STYLES >43.75EM

Slide 157

Slide 157 text

SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS FOOTER HEADING 1 SUBMIT INPUT NAVIGATION

Slide 158

Slide 158 text

FOOTER HEADING 1 SUBMIT INPUT NAVIGATION SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS

Slide 159

Slide 159 text

... ...

Slide 160

Slide 160 text

#right-column { float: right; width: 30%; } #exhibits { float: right; width: 66%; }

Slide 161

Slide 161 text

No content

Slide 162

Slide 162 text

NEWS & EVENTS ACROSS THE TOP EXHIBITS IN LOWER ROW 1 2 STYLES >64 EM HEADING CHANGED TO FULL NAME 3

Slide 163

Slide 163 text

FOOTER HEADING 1 SUBMIT INPUT NAVIGATION SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS

Slide 164

Slide 164 text

FOOTER HEADING 1 SUBMIT INPUT NAVIGATION SECTION #NEWS SECTION #EVENTS SECTION #EXHIBITS

Slide 165

Slide 165 text

#right-column { float: none; margin-left: 0; width: 100%; } #events { clear: none; width: 66%; float: right; } #news { width: 30%; margin-left: 3%; float: right; }

Slide 166

Slide 166 text

.event-img { float: left; margin: 0 1.5%; width: 47%; }

Slide 167

Slide 167 text

#exhibits { ! width: 100%; ! float: none; ! clear: both; } ! #exhibits .exhibit-section { ! float: left; ! width: 31.3%; ! margin: 0 1%; }

Slide 168

Slide 168 text

LOL Library or Librarian Library

Slide 169

Slide 169 text

h1 span { display: none; } @media screen and (min-width: 64em) { h1 abbr { display: none; } h1 span { display: inline; } }

Slide 170

Slide 170 text

My website will meet you wherever you are... “ Trent Walton http://trentwalton.com/2011/05/10/ﬁt-to-scale/

Slide 171

Slide 171 text

LIBRARIES OTHER (THAT EXIST)

Slide 172

Slide 172 text

http://gvsu.edu/library

Slide 173

Slide 173 text

http://lib.virginia.edu

Slide 174

Slide 174 text

http://cantonpl.org

Slide 175

Slide 175 text

http://www.hendrix.edu/baileylibrary/

Slide 176

Slide 176 text

http://allisonlibrary.regent-college.edu/

Slide 177

Slide 177 text

RWD LIBRARIES & http://bit.ly/rwd-highered

Slide 178

Slide 178 text

SUPPORT

Slide 179

Slide 179 text

The absence of support for @media queries is in fact the ﬁrst @media query. http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu “ Bryan Rieger

Slide 180

Slide 180 text

No content

Slide 181

Slide 181 text

https://github.com/scottjehl/Respond/

Slide 182

Slide 182 text

Slide 183

Slide 183 text

MORE LEARN

Slide 184

Slide 184 text

http://www.abookapart.com/products/responsive-web-design

Slide 185

Slide 185 text

http://bradfrost.github.com/this-is-responsive/

Slide 186

Slide 186 text

Responsive Design for Libraries: Beyond the Myth of the Mobile Web by Matthew Reidsma http://scholarworks.gvsu.edu/library_books/5/

Slide 187

Slide 187 text

THANKYOU