Gary Browning and Vincci Kwong
Indiana University South Bend
2014 ILF District 1 Conference
Responsive Web Design for Libr...
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...
Source: http://en.wikipedia.org/wiki/Responsive_web_design
• A web design approach aimed at crafting sites to
provide an o...
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., c...
Information Architecture
IA Institute: iainstitute.org/en/about/our_mission.php
• The structural design of shared informat...
Information Architecture
What is IA ?
Basically:
Information Architecture is the art
and science of creating and
organizin...
Context:
mission, goals, staff, policies, p
rocedures, budget, culture, etc.
Content:
documents, applications, servi
ces, ...
Information Architecture
• Organize based on the users’ perspective
• Design and layout straightforward
• Have sufficient ...
• Labels
– Word(s)
– Image(s)
• Types
– Textual (Home)
– Iconic ( )
Information Architecture
Labels
• Labels should be understood without the
surrounding context
• Labels should represent the content to
which it links
• La...
Brief label example
Information Architecture
• Search the catalog
• Renew your materials
• Learn what’s new
• Contact us.
...
Resources
Information Architecture
Your own footer Your Logo
About Face 3: The Essentials of
Interaction Design
By: Alan C...
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...
THANK YOU!
Gary Browning
Director, Web Technical Services
Indiana University South Bend
gary@iu.edu
Vincci Kwong
Associate...
Upcoming SlideShare
Loading in …5
×

Responsive Web Design for Libraries

369 views
291 views

Published on

This presentation provides basics of responsive web design.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
369
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • #2 starts with imperative, possibly easier?
  • a tool that you can use for your Photoshop document so you can start using it on your responsive design website. This turns your PSD pixels into a percentage format so you are able to calculate the PSD’s size when it is being viewed on your responsive site.
  • One common thing when viewing a traditional website on a mobile device is the appearance of scrolls bars on the site to view the lower portion of the page. With SimpleGrid, it makes every single element of that certain page would simply fit on your screen size, making you view the entire page with one single screen, no horizontal scroll bars needed.
  • An online tool to create custom flexible grids. Number of columns, padding and gutter can be changed, some breakpoints can be added, and the CSS is generated, ready for download.
  • A small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.
  • Responsive Web Design for Libraries

    1. 1. Gary Browning and Vincci Kwong Indiana University South Bend 2014 ILF District 1 Conference Responsive Web Design for Libraries
    2. 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. 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. 4. RWD Examples
    5. 5. E-Reader/Tablet Usage Source: http://www.pewinternet.org/2013/10/18/tablet-and-e-reader-ownership-update/
    6. 6. Smartphone Usage Source: http://www.pewinternet.org/2013/06/05/smartphone-ownership-2013/
    7. 7. RWD Library Examples
    8. 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. 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. 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. 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. 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. 13. • Labels – Word(s) – Image(s) • Types – Textual (Home) – Iconic ( ) Information Architecture Labels
    14. 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. 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. 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. 17. Good to Know Source: http://www.onextrapixel.com/2012/06/13/really-useful-resources-and-tools-for-responsive-web-design/
    18. 18. MobileTest.me http://mobiletest.me/
    19. 19. RWD Calculator http://www.rwdcalc.com/
    20. 20. Simple Grid http://thisisdallas.github.io/Simple-Grid/
    21. 21. Gridpak http://gridpak.com/
    22. 22. Skeleton http://www.getskeleton.com/
    23. 23. Bootstrap http://getbootstrap.com/2.3.2/index.html
    24. 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. 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

    ×