Responsive Web Design & the Library

591 views
513 views

Published on

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
591
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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

    1. 1. RESPONSIVE WEB DESIGN Arianna Schlegel CentralConnecticut State University July 9, 2013
    2. 2. 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?
    3. 3. What is Responsive Web Design?  Inspired by Responsive Architecture, conceived by Ethan Marcotte
    4. 4. 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?
    5. 5. What is Responsive Web Design?
    6. 6. What is Responsive Web Design?
    7. 7. What is Responsive Web Design?
    8. 8. 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)
    9. 9. 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…)
    10. 10. 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
    11. 11. Why Should Burritt Adopt RWD?
    12. 12. Why Should Burritt Adopt RWD?  Our stats: Our full site @ library.ccsu.edu (June 6 – July 6, 2013) Source: Google Analytics
    13. 13. Why Should Burritt Adopt RWD?  Our stats: Our full site @ library.ccsu.edu (June 6 – July 6, 2013) Source: Google Analytics
    14. 14. Why Should Burritt Adopt RWD?  Our stats: Our mobile site @ library.ccsu.edu/m (June 6 – July 6, 2013) Source: Google Analytics
    15. 15. 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
    16. 16. 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)
    17. 17. 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
    18. 18. 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
    19. 19. 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/

    ×