Responsive Web Design & the Library
Upcoming SlideShare
Loading in...5
×
 

Responsive Web Design & the Library

on

  • 552 views

 

Statistics

Views

Total Views
552
Views on SlideShare
552
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • It has become “as fundamental as the transition from table-based layouts to CSS”. (Treehouse Blog)
  • input types!
  • screen size, platform, orientation
  • 1.Aaron Scmidt: “it can be false advertising” for our library – but all of our connectors DO have mobile versions, so it’s not so bad2. But we can incorporate it into our homepage redesign – we are due for one, and about to re-evaluate our page

Responsive Web Design & the Library Responsive Web Design & the Library Presentation Transcript

  • RESPONSIVE WEB DESIGN Arianna Schlegel CentralConnecticut State University July 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? “ResponsiveWeb 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, Firefo x, 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 RWD General:  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 “theYear 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
  • References Cashmore, P. (2012, Dec. 11). Why 2013 is theYear of ResponsiveWeb 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 Slide All under Creative Content licensing: 2) http://commons.wikimedia.org/wiki/File:Responsive_Web_Design_Logo.svg 3) https://www.youtube.com/watch?v=vdHmQcNLXos https://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_Center http://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=500 http://gadgetsin.com/affordable-7-inch-google-android-tablet-with-camera.htm http://reviews.cnet.com/8301-19736_7-20112772-251/kindle-fire-vs-nook-color-spec- breakdown/ http://appsripple.com/iphone-android-hybrid-app http://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.html http://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.jpg http://www.slashgear.com/lg-et83-touchscreen-monitor-wants-your-windows-8-fingers- 31254980/ http://commons.wikimedia.org/wiki/File:Wiimote.png http://commons.wikimedia.org/wiki/File:Xbox_360_white_wireless_controller.png http://www.ign.com/wikis/wii-u/Internet_Browser_Issues http://weedygarden.net/2012/12/the-wii-u-from-a-web-developers-perspective/ 7) http://www.flickr.com/photos/69797234@N06/7203485148/