Previous Blog Entry Next Blog Entry

Internet Librarian 2013 – Responsive Web Design from the Trenches

Jeff Wisniewski

Jeff started his session with a definition of responsive web design.  It’s crafting a single site to provide an optimal experience across a wide range of devices.  Responsive design has become popular because of the wide variety of screen sizes, orientations, and operating systems.  There’s this whole range of devices people are using to access our websites.

Who’s gone responsive already? Microsoft, TechCrunch, and some libraries.  A responsive site doesn’t just resize, it changes dynamically.  Some things disappear, other new things appear.  Why not a dedicated mobile site?  People are doing things on mobile devices in a similar way to what they do on a desktop.  Maintaining a mobile site is redundant, and there’s no need to leverage special device capabilities for a library site.  Responsive design is thinking and doing mobile first.  Anything will work on mobile.  You also need to have a content strategy and design responsively.

Designing for mobile first means designing with touch in mind by creating larger targets and having more white space.  All images should add value.  Designing for content first means that all design flows from the content.  Do a content inventory and identify whether items are outdated, need to be deleted or rewritten, etc.  “Writing for the web is now writing for mobile.”  Be concise and clear, chunk content out.

Your site needs to be responsive under the hood too.  It should be a flexible grid-based layout (using percentages, not pixels), use media queries, and if you’re using images or other media to make those flexible and responsive as well.  Flexible grids use relative units (not fixed or absolute).  Media queries are starting with small screens first by setting a minimum width, then retooling.  At a certain width, set the design to remove a column, move something, etc. to optimize it for different screens.  Where you insert these break points depends on the content…don’t set the break point at 320, the width of an iPhone screen, but rather at 300…before it maxes out to popular screen sizes.  Responsive images – serve different sized images or different images entirely according to the platform someone is using.  Avoid simply hiding them since they’re still served, taking up bandwidth.

A responsive redesign process requires adjustment.  The design process needs to be agile, more circuitous than linear.  Part of the reason is that you’re working across form factors—you can’t do that linearly.  Start with a content inventory, then do content prioritization, create content reference wireframes, and rewrite all content (thinking “mobile first”).  Create a breakpoint graph, design fo the various breakpoints, sketch and wireframe, do usability testing (on paper, people…paper dammit!), and functional testing (and repeat), and then create the HTML design prototype.

Staff tend to get nervous with responsive web design because you’re doing so much on paper, so much planning…and only in the last phase is there actual tangible coding going on.   If you can get someone in your organization, higher up, to give you a design directive in writing it makes it easier for you to move forward.

Three cheers for frameworks!  Frameworks are packages (think toolkits, or templates) made up of a structure of files and folders of standardized code (HTML, CSS, JS, etc.) which can be used to support the development of websites as a basis to start building a site.  Most widely-used frameworks – Skeleton, Omega, Bootstrap.  Jeff’s library used Skeleton.

Tips, tricks, and lessons learned…  It was hard to resist the urge to start coding earlier.  Rewriting content was time very well spent. Library websites are all still handing off to many non-optimized sites/services (read: our vendor services are not mobile-friendly or responsive…bah!).  You should focus on design, not devices.  You should design in text.  They successfully used personas to test platform use cases.

Leave a Reply

LiB's simple ground rules for comments:

  1. No spam, personal attacks, or rude or intolerant comments.
  2. Comments need to actually relate to the blog post topic.