responsive web design & the library

19
RESPONSIVE WEB DESIGN Arianna Schlegel Central Connecticut State University July 9, 2013

Upload: ariannaschlegel

Post on 28-Jan-2015

111 views

Category:

Education


3 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Responsive Web Design & the Library

RESPONSIVE WEB DESIGN

Arianna SchlegelCentral Connecticut State UniversityJuly 9, 2013

Page 2: Responsive Web Design & the Library

The Basics of RWD

What is it? Why do we use it? Some good examples Why should Burritt adopt it? What are our options for

implementation?

Page 3: Responsive Web Design & the Library

What is Responsive Web Design? Inspired by Responsive Architecture,

conceived by Ethan Marcotte

Page 4: Responsive Web Design & the Library

What is Responsive Web Design?“Responsive Web Design is the

approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform, and orientation.”

-- Kayla Knight,Smashing

Magazine

desktop computer, tablet, smartphone?

Safari, Chrome, Firefox, IE, Opera Mini, Wii browser?portrait,

landscape?

Page 5: Responsive Web Design & the Library

What is Responsive Web Design?

Page 6: Responsive Web Design & the Library

What is Responsive Web Design?

Page 7: Responsive Web Design & the Library

What is Responsive Web Design?

Page 8: Responsive Web Design & the Library

Why is RWD Used?

The proliferation of devices The time & expense of building

separate apps or website layouts for each device or system

“We can design for the ebb and flow of things” (Marcotte, 2010)

Page 9: Responsive Web Design & the Library

Some Good Examples of RWDGeneral: http://www.bostonglobe.com/ http://2012.inspireconf.com/ http://sundaybestdesigns.com/ http://mdcraftbeerfestival.com/ http://www.dropkickmurphys.com http://dressresponsively.com/Education: http://www.ct.edu/about http://www.drexel.edu/ http://www.harvard.edu/Libraries: http://web.library.yale.edu/ http://speccoll.library.arizona.edu/ https://www.amherst.edu/library http://www.library.virginia.edu/ http://matthew.reidsrow.com/lol/#menu

(not really a library…)

Page 10: Responsive Web Design & the Library

Why Should Burritt Adopt RWD? In 2012, Google recommended responsive

design as the best strategy for smartphone-optimized websites. (Luger, 2013)

Mashable called 2013 “the Year of Responsive Web Design” (Cashmore, 2012)

“Those organizations that don’t act may find themselves behind the curve.”

in part because “[f]or the first time since 2001, PC sales are projected to be lower than they were in the previous year.” (Cashmore, 2012)

Potentially faster load times

Page 11: Responsive Web Design & the Library

Why Should Burritt Adopt RWD?

Page 12: Responsive Web Design & the Library

Why Should Burritt Adopt RWD? Our stats:

Our full site @library.ccsu.edu

(June 6 – July 6, 2013)

Source: Google Analytics

Page 13: Responsive Web Design & the Library

Why Should Burritt Adopt RWD? Our stats:

Our full site @library.ccsu.edu

(June 6 – July 6, 2013)

Source: Google Analytics

Page 14: Responsive Web Design & the Library

Why Should Burritt Adopt RWD? Our stats:

Our mobile site @library.ccsu.edu/m

(June 6 – July 6, 2013)

Source: Google Analytics

Page 15: Responsive Web Design & the Library

Why Should Burritt Adopt RWD? Our stats:

(We’d also be the first to adopt it of the CSUs and Uconn libraries.)

Our mobile site @library.ccsu.edu/m

(June 6 – July 6, 2013)

Source: Google Analytics

Page 17: Responsive Web Design & the Library

Some Potential Issues

We don’t have control over other parts of our site – catalog, LibGuides (and everything SpringShare), etc.

It’s a commitment to re-design & re-code Certain things like ads (not a problem for

us) and images/videos (could be a problem for us) can cause issues

Apps can offer more functionality Accessibility? (ARIA for HTML5) It’s certainly not the be-all, end-all answer

Page 18: Responsive Web Design & the Library

ReferencesCashmore, P. (2012, Dec. 11). Why 2013 is the Year of Responsive Web Design.

Mashable. Retrieved from http://mashable.com/2012/12/11/responsive-web-design/

Franklyn, V. (2013, Apr.). Creating a responsive website PPLD Friends. Computers in Libraries, 33(3), pp. 6-11.

Gube, J. (2012, Sep. 15) . 25 beautiful responsive web design examples for inspiration. Six Revisions. Retrieved from http://sixrevisions.com/design-showcase-inspiration/responsive-webdesign-examples/

Knight, K. (2011, Jan. 12). Responsive web design: What it is and how to use it. Smashing Magazine. Retrieved from http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Luger, J. (2013, Jul. 6). Inside responsive design: The pros and cons of the popular mobile strategy. Business Insider. Retrieved from http://www.businessinsider.com/rise-of-responsive-design-pros-and-cons-2013-7

Marcotte, E. (2010, May 25). Responsive web design. A List Apart. Retrieved from http://alistapart.com/article/responsive-web-design

Pettit, N. (2012, Aug. 8). Beginner’s guide to responsive web design. Treehouse Blog. Retrieved from http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

Responsive web design. (n.d.) In Wikipedia. Retrieved from http://en.wikipedia.org/wiki/Responsive_web_design

Page 19: Responsive Web Design & the Library

Image & Video Sources By SlideAll under Creative Content licensing:

2) http://commons.wikimedia.org/wiki/File:Responsive_Web_Design_Logo.svg

3) https://www.youtube.com/watch?v=vdHmQcNLXoshttps://www.youtube.com/watch?v=WwzCfKvFxRQ

5) http://s4msungtelevision32.wordpress.com/2013/01/22/best-flat-screen-tv-only-one-option/

http://www.phoenixfixedit.com/pages/product-catalog/Mac_Desktop_Repair_Centerhttp://www.newtechnology.co.in/hp-pavilion-p6005in-desktop-pc-pricespecs/http://www.techradar.com/reviews/pc-mac/laptops-portable-pcs/laptops-and-netbooks/macbook-air-2012-1087300/review

http://www.blogotechblog.com/2013/05/netbook-vs-laptop-whats-the-difference/http://www.zuoda.net/search.aspx?q=apple+ipad&offset=500http://gadgetsin.com/affordable-7-inch-google-android-tablet-with-camera.htmhttp://reviews.cnet.com/8301-19736_7-20112772-251/kindle-fire-vs-nook-color-spec-breakdown/

http://appsripple.com/iphone-android-hybrid-apphttp://www.amazon.com/BlackBerry-Curve-9370-Verizon-Wireless/dp/B0074D6PD2/ref=pd_sim_sbs_cps_5

http://www.itechnews.net/2007/03/25/verizon-lg-vx9400-supports-vcast-tv/http://news.cnet.com/8301-17938_105-10349552-1.htmlhttp://blogs.gonomad.com/readuponit/2012/03/they-like-their-clamshell-phones-and-thats-ok.html

6) http://commons.wikimedia.org/wiki/File:Slimline_Keyboard_for_iPod_Nano.jpghttp://www.slashgear.com/lg-et83-touchscreen-monitor-wants-your-windows-8-fingers-31254980/

http://commons.wikimedia.org/wiki/File:Wiimote.pnghttp://commons.wikimedia.org/wiki/File:Xbox_360_white_wireless_controller.pnghttp://www.ign.com/wikis/wii-u/Internet_Browser_Issueshttp://weedygarden.net/2012/12/the-wii-u-from-a-web-developers-perspective/

7) http://www.flickr.com/photos/69797234@N06/7203485148/