Download
beth norris public services librarian chinook arch regional library system n.
Skip this Video
Loading SlideShow in 5 Seconds..
Responsive Web Design PowerPoint Presentation
Download Presentation
Responsive Web Design

Responsive Web Design

313 Vues Download Presentation
Télécharger la présentation

Responsive Web Design

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Beth Norris Public Services Librarian Chinook Arch Regional Library System Responsive Web Design October 24, 2013

  2. What is Responsive Web Design? • Ethan Marcotte, Responsive Design, A List Apart • “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.” (Knight, 2011). • “One site for every screen.” (Polacek)

  3. How Does it Work? • Flexible, Grid-Based Layout • Flexible Images and Media • CSS Media Queries

  4. Flexible, Grid-Based Layout http://www.hongkiat.com/blog/rwd-tools/

  5. Flexible Images and Media http://alistapart.com/article/fluid-images

  6. CSS Media Queries

  7. What Does it Look Like? Matthew Reidsma, Web Services Librarian ALA 2013 Mover & Shaker for Advocacy of Responsive Library Web Design

  8. What Does it Look Like?

  9. Other “Responsive” Libraries

  10. Problems with Responsive Design? • Extremely Long Page • No Opt-Out Option • Slower Downloading Times Due to Image Sizing

  11. Problems Solved! • Omit Needless Words • Remove or change the viewport meta tag • Responsive Images

  12. Desktop vs. Non-Desktop Trafficwww.chinookarch.ca 2013

  13. Mobile More Than Ever • Studies by Nielsen, Yahoo!, and Compete.com show that a significant portion of mobile internet use takes place at home. (Kim, 2013a) • In a study entitled The Future of Mobile News published back in October 2013 by the Pew Institute, 60% of tablet users prefer reading news on the mobile web than via an app. (Cashmore, 2012) • Higher profile web design companies are making responsive design a “must-have” component going forward.

  14. Sources Cited • Cashmore, P. (2012, December 11). Why 2013 is the Year of Responsive Web Design. Retrieved from http://mashable.com/2012/12/11/responsive-web-design/ • Kim, B. (2013). Don’t Dumb Down: A New Mantra for the Mobile Web. American Libraries, 44(9/10), 22. • Kim, B. (2013, September 12). Improving Your Library’s Web Services. Retrieved from slideshare: http://www.slideshare.net/ALATechSource/improving-your-librarys-mobile-services-26146691. • Knight, K. (2011, January 12). Responsive Web Design: What It Is and How To Use It. Retrieved from http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ • Krug, S. (2006). Don’t Make Me Think: A Common Sense Approach to Web Usabilty. Berkley, California, USA: New Riders Publishing.

  15. Sources Cited • Marcotte, E. (2009, March 2009). Fluid Grids. Retrieved from http://alistapart.com/article/fluidgrids. • Marcotte, E. (2009, April 17). Fluid Images. Retrieved from http://unstoppablerobotninja.com/entry/fluid-images. • Marcotte, E. (2010, May 25). Responsive Web Design. A List Apart(306). Retrieved from http://alistapart.com/article/responsive-web-design • Polacek, J. What the Heck is Responsive Web Design? [Scrolldeck.js]. Retrieved from http://johnpolacek.github.io/scrolldeck.js/decks/responsive/ • Tims (2012, December 15). Difference Between Fluid and Fluid Grid Design CSS. Messages posted to http://stackoverflow.com/questions/13893355/difference-between-fluid-and-fluid-grid-design-css.

  16. Questions Beth Norris Public Services Librarian Coordinator of Digital Services Chinook Arch Regional Library System bnorris@chinookarch.ca (403) 380-1516 Twitter: @litlibrarianess