Slide 1

Slide 1 text

LIBRARIES RESPONSIVE MATTHEW REIDSMA WEB DESIGN FOR GRAND VALLEY STATE UNIVERSITY

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 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 4

Slide 4 text

http://www.flickr.com/photos/adactio/6153558098/

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

2013-2014 US ADULTS OWN A SMARTPHONE 58% USE WEB MOSTLY ON PHONE 21% http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/ http://www.pewinternet.org/2013/09/16/main-findings-2/ OWN A CELL PHONE 91% USE WEB ON PHONE 57%

Slide 7

Slide 7 text

2013-2014 US ADULTS OF AFRICAN-AMERICAN 43% http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/ http://www.pewinternet.org/2013/09/16/main-findings-2/ OF WHITE/NON-HISPANIC 27% OF HISPANIC 60%

Slide 8

Slide 8 text

2013-2014 US ADULTS COLLEGE DEGREE 21% http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/ http://www.pewinternet.org/2013/09/16/main-findings-2/ HIGH SCHOOL DIPLOMA 45%

Slide 9

Slide 9 text

2013-2014 US ADULTS > $75,000 A YEAR 27% http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/ http://www.pewinternet.org/2013/09/16/main-findings-2/ < $30,000 A YEAR 45%

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 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 12

Slide 12 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 13

Slide 13 text

http://www.businessweek.com/news/2012-01-11/ebay-s-paypal-mobile-payment-volume-rose-to-4-billion-last-year.html http://bankinnovation.net/2014/01/paypal-processed-27-billion-in-mobile-payments-in-2013/ PAYPAL PAYMENTS $4 BILLION 2011 SALES ON MOBILE PAYPAL PAYMENTS $27 BILLION 2013 PAYPAL PAYMENTS

Slide 14

Slide 14 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.internetretailer.com/2014/01/22/ebay-reports-13-sales-growth-and-rejects-paypal-spinoff SALES ON MOBILE 3-4 FERRARIS SOLD / MONTH EBAY SALES $5 BILLION 2011 PAYPAL PAYMENTS $22 BILLION 2013 EBAY SALES

Slide 15

Slide 15 text

US ADULTS > 1 6 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/ http://www.pewinternet.org/2014/09/10/younger-americans-and-public-libraries/ 2012 VISITED A LIBRARY WEBSITE IN THE PAST YEAR 36% 2014

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

DESIGN RESPONSIVE WEB

Slide 18

Slide 18 text

PERFORMANCE 1

Slide 19

Slide 19 text

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

Slide 20

Slide 20 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 2011 86 2010 74 2012 88 2014 96

Slide 21

Slide 21 text

NOT MOBILE-FRIENDLY? WON’T WAIT MORE THAN 3 SECONDS 60% WILL LEAVE IF NO MOBILE EXPERIENCE 61% SAY YOU DON’T CARE ABOUT THEM 48% http://googlemobileads.blogspot.com/2012/09/mobil-friendly-sites-turn-visitors.html https://web.archive.org/web/20130310221542/http://www.gomez.com/resources/whitepapers/survey- report-what-users-want-from-mobile/ 2012 WON’T WAIT MORE THAN 5 SECONDS 75%

Slide 22

Slide 22 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 23

Slide 23 text

Half a second delay caused a 20% drop in traffic. Half a second delay killed user satisfaction. http://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html “ Marissa Mayer

Slide 24

Slide 24 text

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

LAYOUT 2

Slide 30

Slide 30 text

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. http://www.alistapart.com/articles/dao/ “ John Allsopp

Slide 31

Slide 31 text

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 “

Slide 32

Slide 32 text

FLUID MEDIA

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

img { max-size: 100%; }

Slide 36

Slide 36 text

FLEXIBLE GRIDS

Slide 37

Slide 37 text

{ 80px { 24px

Slide 38

Slide 38 text

960px 288px 600px

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

960px 288px 600px

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

960px 288px 600px

Slide 45

Slide 45 text

960px 288px 600px

Slide 46

Slide 46 text

960px 288px 600px

Slide 47

Slide 47 text

600 ÷ 960 = 62.5% 288 ÷ 960 = 30% TARGET ÷ CONTEXT = RESULT From Ethan Marcotte, Responsive Web Design, 2011.

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

100% 30% 62.5%

Slide 50

Slide 50 text

MEDIA QUERIES

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

@media handheld { ... }

Slide 53

Slide 53 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 54

Slide 54 text

No content

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

BREAK POINT? WHEN LAYOUT BREAKS

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

NEWS & EVENTS IN RIGHT COLUMN EXHIBITS IN LEFT COLUMN 1 2 STYLES >700PX

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

... ...

Slide 66

Slide 66 text

@media screen and (min-width: 700px) { #right-column { float: right; width: 30%; } #exhibits { float: right; width: 66%; } }

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

@media screen and (min-width: 1024px) { #right-column { float: none; width: 100%; } #exhibits { float: none; width: 100%; } }

Slide 71

Slide 71 text

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

SUPPORT

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

http://www.flickr.com/photos/adactio/6153558098/

Slide 80

Slide 80 text

???

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

MORE LEARN

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

Responsive Design for Libraries by Matthew Reidsma

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

THANKYOU