gary browning and vincci kwong indiana university south bend 2014 ilf district 1 conference...
TRANSCRIPT
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 [email protected]
Vincci KwongAssociate Librarian, Web ServicesIndiana University South [email protected]