This document discusses responsive web design (RWD) for libraries. It defines RWD as a web design approach that provides an optimal viewing experience across different devices by adapting the layout. The document reviews examples of RWD library websites and compares RWD to mobile apps. It also discusses information architecture and how to design effective navigation, labels, and organization of content for users. Useful tools for developing RWD sites include MobileTest.me, RWD Calculator, Simple Grid, Gridpak, Skeleton, Bootstrap and others.

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
5
4
3
2
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.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, p
rocedures, budget, culture, etc.
Content:
documents, applications, servi
ces, and metadata
Users: information
needs, audience
types, expertise and behaviors
Information Architecture
Information Ecology
Context
UsersContent

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 footer Your 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
✓
✓
✓
✓
✓
1
2
3
4
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