1 / 25

Gary Browning and Vincci Kwong Indiana University South Bend 2014 ILF District 1 Conference

Responsive Web Design for Libraries. Gary Browning and Vincci Kwong Indiana University South Bend 2014 ILF District 1 Conference. Today’s Journey. This is an example text. Go ahead and replace it. What is RWD?. 1. Do I need RWD?. 2. Examples of RWD website. 3. 4.

ranger
Download Presentation

Gary Browning and Vincci Kwong Indiana University South Bend 2014 ILF District 1 Conference

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. Responsive Web Design for Libraries Gary Browning and Vincci Kwong Indiana University South Bend 2014 ILF District 1 Conference

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

  3. What is 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) Source: http://en.wikipedia.org/wiki/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 Responsive Web 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 • 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

  9. Information Architecture What is IA ? IA Institute: iainstitute.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.

  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. Information Architecture Information Ecology Context:mission, goals, staff, policies, procedures, budget, culture, etc. Content: documents, applications, services, and metadata Users:information needs, audience types, expertise and behaviors

  12. Information Architecture Good to know • 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

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

  14. Information Architecture Labels • 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

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

  16. Information Architecture Resources 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 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 Your own footer Your Logo

  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? 1 ✓ Do I need RWD? 2 ✓ Examples of RWD website 3 ✓ Information architecture 4 ✓ Useful tools for RWD 5

  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

More Related