This presentation provides basics of responsive web design.

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