gary browning and vincci kwong indiana university south bend 2014 ilf district 1 conference...

Gary Browning and Vincci KwongIndiana University South Bend2014 ILF District 1 Conference

Responsive Web Design for Libraries

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

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?

RWD Examples

E-Reader/Tablet Usage

Source: http://www.pewinternet.org/2013/10/18/tablet-and-e-reader-ownership-update/

Smartphone Usage

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

RWD Library Examples

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

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 ?

Information ArchitectureWhat is IA ?

Basically:

Information Architecture is the art and science of creating and organizing information so that it is usable, accessible and maintainable.

Context: mission, goals, staff, policies, procedures, budget, culture, etc.

Content: documents, applications, services, and metadata

Users: information needs, audience types, expertise and behaviors

Information ArchitectureInformation Ecology

Context

UsersContent

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

• Labels– Word(s) – Image(s)

• Types– Textual (Home)– Iconic ( )

Information ArchitectureLabels

• 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 ArchitectureLabels

Brief label exampleInformation 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

ResourcesInformation Architecture

Your own footer Your Logo

About Face 3: The Essentials of Interaction Design

By: Alan Cooper, Robert Reimann, Devid CroninPublisher: John Wiley & SonsPub. Date: May 1, 2007Print ISBN-13: 978-0-470-08411-3Print ISBN-10: 0-470-08411-1Pages in Print Edition: 610

Information Architecture: A brief introduction

By: Samatha BaileyURL: http://aifia.org/tools/

download/Bailey-IAIntro.ppt

Information Architecture for the World Wide Web, Third Edition

By: Peter Morville; Louis RosenfeldPublisher: O'Reilly Media, Inc.Pub. Date: November 27, 2006Print ISBN-13: 978-0-596-52734-1Print ISBN-10: 0-596-52734-9Pages in Print Edition: 528

Good to Know

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

MobileTest.me

http://mobiletest.me/

RWD Calculator

http://www.rwdcalc.com/

Simple Grid

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

Gridpak

http://gridpak.com/

Skeleton

http://www.getskeleton.com/

Bootstrap

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

Questions?

What is RWD?

Examples of RWD website

Useful tools for RWD

Do I need RWD?

Information architecture

✓

✓

✓

✓

✓

1

2

3

4

5

THANK YOU!

Gary BrowningDirector, Web Technical ServicesIndiana University South Bendgary@iu.edu

Vincci KwongAssociate Librarian, Web ServicesIndiana University South Bendvkwong@iusb.edu