1. Gary Browning and Vincci Kwong Indiana University South Bend 2014 ILF District 1 Conference Responsive Web Design for Libraries

2. Today’s Journey What is RWD? This is an example text. Go ahead and replace it Useful tools for RWD Do I need RWD? Examples of RWD website Information architecture 55 4 4 3 3 2 2 1 1

3. Source: http://en.wikipedia.org/wiki/Responsive_web_design A web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors) What is Responsive Web Design?

4. RWD Examples

5. E-Reader/Tablet Usage Source: http://www.pewinternet.org/2013/10/18/tablet-and-e-reader-ownership-update/

6. Smartphone Usage Source: http://www.pewinternet.org/2013/06/05/smartphone-ownership-2013/

7. RWD Library Examples

8. RWD vs Mobile Apps Platform specific design Required app store access Multiple URLs/versions for each pages, i.e., content forking Expensive development cost Internet connection may not be necessary depending on app design Mobile Apps Universal access on all platform App store access not necessary Same content regardless of device or platform Reasonable development cost Internet connection is required Responsive Web Design

9. Information Architecture IA Institute: iainstitute.org/en/about/our_mission.phpiainstitute.org/en/about/our_mission.php The structural design of shared information environments. The art and science of organizing and labeling web sites, intranets, online communities, and software to support findability and usability. An emerging community of practice focused on bringing principles of design and architecture to the digital landscape. What is IA ?

10. Information Architecture What is IA ? Basically: Information Architecture is the art and science of creating and organizing information so that it is usable, accessible and maintainable.

11. Context: mission, goals, staff, policies, procedures, budget, culture, etc. Content: documents, applications, services, and metadata Users: information needs, audience types, expertise and behaviors Information Architecture Information Ecology Context Users Content

12. Information Architecture Organize based on the users’ perspective Design and layout straightforward Have sufficient white space Don’t have too much information (too dense) Avoid unnecessary distractions Keep consistent navigation Good to know

13. Labels –Word(s) –Image(s) Types –Textual (Home) –Iconic ( ) Information Architecture Labels

14. Labels should be understood without the surrounding context Labels should represent the content to which it links Labels should not use jargon Keep labels consistent Information Architecture Labels

15. Brief label example Information Architecture Search the catalog Renew your materials Learn what’s new Contact us. Example 2 Catalog Renew books What’s New How to contact us Example 1

16. Resources Information Architecture Your own footerYour Logo About Face 3: The Essentials of Interaction Design By: Alan Cooper, Robert Reimann, Devid Cronin Publisher: John Wiley & Sons Pub. Date: May 1, 2007 Print ISBN-13: 978-0-470-08411-3 Print ISBN-10: 0-470-08411-1 Pages in Print Edition: 610 Information Architecture: A brief introduction By: Samatha Bailey URL:http://aifia.org/tools/ download/Bailey-IAIntro.ppt Information Architecture for the World Wide Web, Third Edition By: Peter Morville; Louis Rosenfeld Publisher: O'Reilly Media, Inc. Pub. Date: November 27, 2006 Print ISBN-13: 978-0-596-52734-1 Print ISBN-10: 0-596-52734-9 Pages in Print Edition: 528

17. Good to Know Source: http://www.onextrapixel.com/2012/06/13/really-useful-resources-and-tools-for-responsive-web-design/

18. MobileTest.me http://mobiletest.me/

19. RWD Calculator http://www.rwdcalc.com/

20. Simple Grid http://thisisdallas.github.io/Simple-Grid/

21. Gridpak http://gridpak.com/

22. Skeleton http://www.getskeleton.com/

23. Bootstrap http://getbootstrap.com/2.3.2/index.html

24. Questions? What is RWD? Examples of RWD website Useful tools for RWD Do I need RWD? Information architecture ✓ ✓ ✓ ✓ ✓ 11 22 33 44 55

25. THANK YOU! Gary Browning Director, Web Technical Services Indiana University South Bend gary@iu.edu Vincci Kwong Associate Librarian, Web Services Indiana University South Bend vkwong@iusb.edu