1 / 16

Responsive Web Design

Beth Norris Public Services Librarian Chinook Arch Regional Library System. Responsive Web Design. October 24, 2013. What is Responsive Web Design?. Ethan Marcotte , Responsive Design, A List Apart

howell
Download Presentation

Responsive Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related