Responsive Web Design for Libraries
-
Upload
vincci-kwong -
Category
Technology
-
view
123 -
download
2
description
Transcript of Responsive Web Design for Libraries
![Page 1: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/1.jpg)
Gary Browning and Vincci KwongIndiana University South Bend2014 ILF District 1 Conference
Responsive Web Design for Libraries
![Page 2: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/2.jpg)
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
![Page 3: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/3.jpg)
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?
![Page 4: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/4.jpg)
RWD Examples
![Page 5: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/5.jpg)
E-Reader/Tablet Usage
Source: http://www.pewinternet.org/2013/10/18/tablet-and-e-reader-ownership-update/
![Page 6: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/6.jpg)
Smartphone Usage
Source: http://www.pewinternet.org/2013/06/05/smartphone-ownership-2013/
![Page 7: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/7.jpg)
RWD Library Examples
![Page 8: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/8.jpg)
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
![Page 9: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/9.jpg)
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 ?
![Page 10: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/10.jpg)
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.
![Page 11: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/11.jpg)
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
![Page 12: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/12.jpg)
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
![Page 13: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/13.jpg)
• Labels– Word(s) – Image(s)
• Types– Textual (Home)– Iconic ( )
Information ArchitectureLabels
![Page 14: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/14.jpg)
• 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
![Page 15: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/15.jpg)
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
![Page 16: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/16.jpg)
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
![Page 17: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/17.jpg)
Good to Know
Source: http://www.onextrapixel.com/2012/06/13/really-useful-resources-and-tools-for-responsive-web-design/
![Page 18: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/18.jpg)
MobileTest.me
http://mobiletest.me/
![Page 19: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/19.jpg)
RWD Calculator
http://www.rwdcalc.com/
![Page 20: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/20.jpg)
Simple Grid
http://thisisdallas.github.io/Simple-Grid/
![Page 21: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/21.jpg)
Gridpak
http://gridpak.com/
![Page 22: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/22.jpg)
Skeleton
http://www.getskeleton.com/
![Page 23: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/23.jpg)
Bootstrap
http://getbootstrap.com/2.3.2/index.html
![Page 24: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/24.jpg)
Questions?
What is RWD?
Examples of RWD website
Useful tools for RWD
Do I need RWD?
Information architecture
✓
✓
✓
✓
✓
1
2
3
4
5
![Page 25: Responsive Web Design for Libraries](https://reader036.fdocuments.in/reader036/viewer/2022062704/5557503cd8b42aa8378b51d5/html5/thumbnails/25.jpg)
THANK YOU!
Gary BrowningDirector, Web Technical ServicesIndiana University South [email protected]
Vincci KwongAssociate Librarian, Web ServicesIndiana University South [email protected]