Responsive Web Design for Libraries

In the next year there will be more active mobile devices than people on the planet. Do your library patrons expect that your online services will work as well on their phones and tablets as they do on desktop computers? What about devices that haven’t been dreamed of yet? Your library may be responding to new devices and patron expectations with short-term solutions that won’t really help in the long term.

Instead of reacting to each new device, responsive web design takes a device-agnostic approach. By building sites that adapt to any device, we can not only help today’s mobile users, but we’ll be prepared for tomorrow’s users as well. In this online course you will learn:

• The basics of responsive web design (RWD)
• How to compare RWD against other solutions to the “mobile problem”
• How to implement best practices for website design in an increasingly mobile world even if you don't use RWD
• Ways to make your website load faster

By going through the process step-by-step, you will gain confidence in your ability to make your website’s content available to all patrons. You can stop worrying about how well your online services work on each new device and instead focus on providing quality content.

Course Description: In this four-week course, you will gain a solid understanding of how responsive web design works and determine whether it is right for your library and patrons. Through assignments, discussions, and an online meeting, you will learn how to make a compelling case for pursuing RWD and how to implement the techniques on your existing website. You will be able to apply the concepts, best practices, and techniques immediately in your own library to better structure your website’s content and improve its performance in an increasingly multi-device world.

Course Outline: When you log in to the Infopeople online learning site, you will see weekly modules with these topics:

• Week 1: Planning for Your Responsive Website
  • The original web was responsive, when and why web pages became fixed width
  • The mobile device explosion and how it changes the way we think about the web
  • How people use the web, and library websites in particular
  • What is responsive web design?
  • Why responsive web design makes sense for libraries and their patrons
  • Determining the best responsive design solution for your library: fluid or hybrid grids.
  • Options for responsive design “frameworks,” to make conversion easier (e.g. Twitter Bootstrap, Zurb’s Foundation)
• Week 2: Structuring Your Content
  • Definition of key terms (typographic grid; fixed, fluid, and hybrid grids; HTML; CSS)
  • Evaluating the content of your site
  • Separating content from presentation, and layout as an enhancement
  • HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) basics
  • The typographic grid
  • Relative versus fixed sizing with CSS
  • Fluid media: images and videos
• Week 3: Adapting to Device Conditions
  • Definition of key terms (viewports, media types, media queries, device conditions, break points)
  • Explain CSS “media types,” and the limitations that led to the development of media queries
  • How and why to test for different device conditions
  • Media query syntax
  • Strategies for determining break points
• Week 4: Optimizing for User Contexts
  • Definition of key terms—context, TTFB (time till first byte), page load speed, rendering speed
  • Understanding changing user contexts
  • The basics of web performance: how each element affects page load time
  • Techniques for improving performance: reducing server requests and bytes sent

Time Required: To complete this course, you can expect to spend 3 hours per week, for a total of twelve course hours. Each week's module contains readings and various options for assignments, discussions, or online meetings. You can choose the options most relevant to your work and interests. Although you can work on each module at your own pace, at any hour of the day or night, it is recommended that you complete each week's work within that week to stay in sync with other learners

Who Should Take This Course: Any library staff responsible for library website content or design. Other library decision-makers and stakeholders will also find this course valuable.

Online Learning Details and System Requirements may be found at: infopeople.org/training/online_learning_details.

Learner Requirements: Learners who wish to complete the more technical assignments should use a plain-text editor, such as Windows’ Notepad or Mac TextEdit.app (both included with all Windows/Mac computers). Links to free text editors designed for writing HTML and CSS will also be provided.  It will be beneficial to have access to a smartphone or tablet. Links to free online mobile device simulators will be provided.

Course Start: This online learning course starts on Tuesday, January 28, 2014.

After the official end date for the course, the instructor will be available for limited consultation and support for two more weeks, and the course material will stay up for an additional two weeks after that. These extra weeks give those who have fallen behind time to work independently to complete the course.