responsive web design & the library
DESCRIPTION
TRANSCRIPT
RESPONSIVE WEB DESIGN
Arianna SchlegelCentral Connecticut State UniversityJuly 9, 2013
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?
What is Responsive Web Design? Inspired by Responsive Architecture,
conceived by Ethan Marcotte
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?
What is Responsive Web Design?
What is Responsive Web Design?
What is Responsive Web Design?
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)
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…)
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
Why Should Burritt Adopt RWD?
Why Should Burritt Adopt RWD? Our stats:
Our full site @library.ccsu.edu
(June 6 – July 6, 2013)
Source: Google Analytics
Why Should Burritt Adopt RWD? Our stats:
Our full site @library.ccsu.edu
(June 6 – July 6, 2013)
Source: Google Analytics
Why Should Burritt Adopt RWD? Our stats:
Our mobile site @library.ccsu.edu/m
(June 6 – July 6, 2013)
Source: Google Analytics
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
What Are Our Options?
HTML/CSS Content Management Systems (CMS)
LibGuides (why not?)
Drupal WordPress Etc.
HTML5/CSS3 JavaScript frameworks (e.g., jQuery,
Modernizr, Bootstrap, Zurb's Foundation)
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
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
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/