Responsive web design and libraries

Brad Frost's This is Responsive Website

Brad Frost’s This is Responsive Website via desktop browser

Responsive web design is not really a new concept, yet libraries and many websites in general, still have a way to go in adopting this method of web design. ACRL’s Tech Connect has covered various web design topics, including mobile applications, hybrid mobile applications, design basics, and website readability. Consider the responsive web design approach and its benefits another tool in your toolbelt and yet another option for libraries to present themselves online to their users.

So what is it?

As the number of devices in which we are able to view and interact with websites grow, it becomes more cumbersome to keep up with the plethora of laptops, desktops, mobile devices, and potentially devices or platforms that don’t yet exist. As our users view our websites and online resources in these various ways, we must ask the simple question- what does this look like and what is the user’s experience? If you have a smart phone or tablet, you may recall viewing a website and being annoyed that it is merely a shrunken teeny version of the site you’re used to seeing rather than adjusting nicely to accommodate the device you’re using. In many cases it requires you, the user, to do something to make it work on your device rather than accomodate you; a rather unappealing way to treat users I think. Here’s an examples from the New York Times website:

New York Times displayed on a desktop browser

New York Times displayed on a desktop browser

New York Times displayed on the iphone

New York Times displayed on the iphone aka the Barbie sized website

To avoid these awful Barbie-sized websites on our devices, the solutions we often see are: develop a mobile website, develop a mobile app, or create a website that is responsive and can handle most anything that comes it’s way. All of these are great solutions to developing a mobile presence however the responsive approach is fast emerging as a winning solution.

What makes it great?

The very basic benefit to creating a responsive website design is that you have one site for all devices- it’s intended to be inclusive for desktop machines and a variety of devices. A responsive site does not require anything of the user; no downloading or additional buttons to click, the result is immediate. That’s it. Rather than separate approaches for mobile through either a mobile site or mobile applications and then another approach for desktop machines- this method is flexible and covers it all under one design.

Responsive websites in the wild

The best way to experience responsive web design is to try out some websites that are designed in this way. Here are a few great examples with screenshots included- I recommend checking them out in your browser and then shrinking your browser window down to get the full effect or how this technology works. If you’re even more invested in the experience, bring the site up on any number of devices to see the benefits of responsive design done well.

Graphic designer, John Boilard, showcases his portfolio website using responsive design:
http://jpboneyard.com/ As you can see the images are flexible and each project displays very well on many devices. The images adjust accordingly and the performance of the site is easy to use and easy to view.

JP Boneyard Design viewed on a desktop browser

JP Boneyard Design viewed on a desktop browser

JP Boneyard design viewed on an iphone

JP Boneyard design viewed on an iphone

Web designer and the founder of responsive design, Ethan Marcotte, http://ethanmarcotte.com/ showcases not only his design but also his publications. There is a variety of content on his website and the responsive design works extremely well. For a quick article on responsive design from the graphic design perspective, see his article on A List Apart.

Ethan Marcotte website via desktop browser

Ethan Marcotte website via desktop browser

Ethan Marcotte website via the iphone

Ethan Marcotte website via the iphone

Matthew Reidsma, web services librarian at Grand Valley State University, also has a fantastic flexible site where even videos are responsive: http://matthew.reidsrow.com/ He is a web librarian to watch as he often writes and presents on responsive design (more on that below) and he is always creating really awesome and interesting web projects. The Grand Valley State University Libraries have a fantastic responsive site: http://gvsu.edu/library/

Matthew Reidsma's website via desktop browser

Matthew Reidsma’s website via desktop browser

 

Matthew Reidsma's website via iphone

Matthew Reidsma’s website via iphone

Grand Valley State University Libraries website via desktop browser

Grand Valley State University Libraries website via desktop browser

Grand Valley State University Libraries website via iphone

Grand Valley State University Libraries website via iphone

The website TitleCase, co-founded by designers and type experts, Jessica Hische and Erik Marinovich; this is an elegant example of showcasing this side project with a focus on type while all giving users a pleasant experience through responsive design.

TitleCase website via desktop browser

Title Case website via desktop browser

TitleCase website via iphone

Title Case website via iphone

Scribble Tone, the Portland, OR based design studio, created this responsive website for Design Week Portland: http://www.designweekportland.com/#footer With the gorgeous flexible images, the bold colors, and clear typefaces- all created and designed responsively- this website is pleasant and fun to use.

Portland Design Week website via desktop browser

Portland Design Week website via desktop browser

Portland Design Week website via iphone

Portland Design Week website via iphone

Resources

If you were like me and did not attend ALA Annual this year and get to see Matthew Reidma’s fantastic talk on Responsive Web Design for Libraries: Get Beyond the Myth of the Mobile Web, you are still in luck because he posted the talk and slides on his website here. He covers quite a lot and he provides a fantastic list of resources within that post. It’s a great presentation and truly worth watching all the way through.

To delve in more deeply into the details of designing with responsive web methods, I highly recommend Responsive Web Design by Ethan Marcotte. He not only provides good examples and techniques for designing this way, but he also explains the flexible grid and flexible images as well and displays his balanced approach between good design and good functionality. His website is also responsive and he’s designed complex websites: http://ethanmarcotte.com/

Another option, particularly for those who use WordPress as a CMS, there are a number of free responsive themes available that are already designed. Simply selecting the theme or taking a further step by creating a child theme that you could then customize would be a fairly simple way to make your website design responsive and more enjoyable.

The website, This is Responsive has a wide variety of tools to develop your own responsive website as does Bootstrap. So even if you don’t think of yourself as a designer, there are a lot of ways to get started in creating good design that is also responsive.

Whether you are interested in responsive design, mobile websites, or creating mobile apps, it is critical for libraries to be aware of the user experience as our customers use our websites and online resources on a variety of devices. The bar is being raised with responsive designed websites and users will come to expect this kind of experience. As the web, platforms, and devices evolve, it will be crucial for libraries to be already poised to offer a positive experience through good thoughtful design.

Brad Frost's This is Responsive Website via iphone

Brad Frost’s This is Responsive Website via iphone


15 Comments on “Responsive web design and libraries”

  1. Michael Schofield says:

    I’ve been talking a Library 2.012 and at another presentation this same week about Future Friendly Web Design for Libraries. The #lib2012 recording should be shortly avail., but my HTML slide-deck lives at http://www.ns4lib.com :-).

  2. Michael Schofield says:

    Also, Eric Rumsey has maintains a list of academic and public responsive libraries for reference and inspiration at http://blog.lib.uiowa.edu/hardinmd/

    • Lisa Kurt says:

      Thank you so much Michael for the fantastic resources. I love the concept of Future Friendly Web Design for Libraries- it’s such a positive and embracing way to look at this initiative as it should be. Looking forward to seeing more of your work- this is great!

  3. Mike Ward says:

    Really like the Title case example!! Brilliant example of responsive web design

  4. […] :ACRL TechConnect Blog: Responsive web design is not really a new concept, yet libraries and many websites in general, still have a way to go in adopting this method of web design. ACRL’s Tech Connect has covered various web design topics, including mobile applications, hybrid mobile applications, design basics, and website readability. Consider the responsive web design approach and its benefits another tool in your toolbelt and yet another option for libraries to present themselves online to their users.  […]

  5. […] :ACRL TechConnect Blog: Responsive web design is not really a new concept, yet libraries and many websites in general, still have a way to go in adopting this method of web design. ACRL’s Tech Connect has covered various web design topics, including mobile applications, hybrid mobile applications, design basics, and website readability. Consider the responsive web design approach and its benefits another tool in your toolbelt and yet another option for libraries to present themselves online to their users.  […]

  6. […] While screenshots and annotations are the building blocks to providing help to our mobile users, a question I have yet to satisfactorily answer is: how do we deliver this content? Many of our library’s help guides are PDF documents, which are not necessarily easily viewed on smaller mobile screens. Creating videos and screencasts is another option, and currently our library’s mobile site links to our YouTube channels for video help guides. However, what tools are available to help us to create these videos showcasing the mobile interface itself? And are videos the best solution? Or should we focus on delivering the content on a webpages, taking a responsive design approach? […]

  7. Agree with @Mike Ward – these are some beautiful examples – not only in their use of responsive but also in their design elements! Thanks for the breakdown – going to share this with my designer friends.

    • Lisa Kurt says:

      Thanks for the positive response- my background is in design and I still do freelance work so I’m always looking for good strong design examples. I’m so glad this was helpful! Please share! :)

  8. […] Responsive Web Design and Libraries […]

  9. […] Kurt writes a great piece for the ACRL Tech Connect blog on Responsive Web Design and Libraries. This is such a timely article given that there are so many different mobile devices out there and […]