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 • “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)
How Does it Work? • Flexible, Grid-Based Layout • Flexible Images and Media • CSS Media Queries
Flexible, Grid-Based Layout http://www.hongkiat.com/blog/rwd-tools/
Flexible Images and Media http://alistapart.com/article/fluid-images
What Does it Look Like? Matthew Reidsma, Web Services Librarian ALA 2013 Mover & Shaker for Advocacy of Responsive Library Web Design
Problems with Responsive Design? • Extremely Long Page • No Opt-Out Option • Slower Downloading Times Due to Image Sizing
Problems Solved! • Omit Needless Words • Remove or change the viewport meta tag • Responsive Images
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.
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.
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.
Questions Beth Norris Public Services Librarian Coordinator of Digital Services Chinook Arch Regional Library System firstname.lastname@example.org (403) 380-1516 Twitter: @litlibrarianess