Responsive web design is a web development approach that creates dynamic changes to the layout of a website depending on the screen size and orientation of the device being used to view the website. It allows a single website to be accessed seamlessly on any device. The document discusses the basics of responsive web design including what it is, why it is used, examples of responsive websites, and why the author's organization should adopt responsive design. Options for implementing responsive design such as using HTML, CSS, content management systems or JavaScript frameworks are also presented.

1. RESPONSIVE WEB DESIGN
Arianna Schlegel
CentralConnecticut State University
July 9, 2013

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. What is Responsive Web Design?
 Inspired by Responsive
Architecture, conceived by Ethan Marcotte

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. What is Responsive Web Design?

6. What is Responsive Web Design?

7. What is Responsive Web Design?

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. 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. 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. Why Should Burritt Adopt RWD?

12. Why Should Burritt Adopt RWD?
 Our stats:
Our full site @
library.ccsu.edu
(June 6 – July 6, 2013)
Source: Google Analytics

13. Why Should Burritt Adopt RWD?
 Our stats:
Our full site @
library.ccsu.edu
(June 6 – July 6, 2013)
Source: Google Analytics

14. Why Should Burritt Adopt RWD?
 Our stats:
Our mobile site @
library.ccsu.edu/m
(June 6 – July 6, 2013)
Source: Google Analytics

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. 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. 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. 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. 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/