Category Archives: Responsive Design

Responsive Design Library Sites on iPhone & iPad

Posted on by

The library responsive design (RWD) websites presented here are the library sites from my the previous article listing higher education and library RWD sites. The screenshots (from iPhone/iPod-Touch & iPad) give an idea of how website content changes with a small screen size. You can see the same thing on a larger screen by going to the site and changing the window size to see how the page responds.

Click the library name to go the library site; click the screenshot to see it in larger size.

Grand Valley State Univ (Michigan)

Canton Public Library (Michigan)

Regent College (Vancouver, BC, Canada)

Hendrix College (Arkansas)

George Mason Univ Law College (Virginia)

Univ Iowa

The two library sites below are strongly integrated with their institutional websites, and the first screen on the iPhone is completely taken up by institutional information. So for the iPhone screenshot, I’ve added the second screen, that has library information.

Dakota State Univ (South Dakota)

Durham Univ (UK)

Eric Rumsey is at: eric-rumseytemp AttSign uiowa dott edu and on Twitter @ericrumseytemp

Responsive Design Sites: Higher Ed, Libraries, Notables

Posted on by

This list formerly attempted to provide a comprehensive list of higher-ed responsive websites. Erik Runyon’s list is now the place to go for that – Thanks for your good work, Erik! The more circumspect purpose of this list, then, is to provide a list of higher-ed US & Canadian libraries that have responsive websites. If the the general university or college website is responsive, it’s linked; if not, just the name is given. [Updated 7.14]

Other Library Related

If you have additions, please tell me on Twitter (@ericrumseytemp) or at: ericrumseytemp AttSign gmail dott com

Improve Your Library Website with Responsive Design

Posted on by

Matthew Reidsma gave a presentation recently with the provocative title Your Library Website Stinks and it’s Your Fault [abstract]. In combination with that, he also wrote an article on the same theme, Bad Library Websites are just a Symptom. I’ll mention briefly some of the points that he made, but the main idea I want to stress here is that Reidsma has an answer to the problems he details with library websites, namely Responsive Design.

Reidsma’s predominant theme is that the way to build good websites, including library websites, is to listen to our users. Users think differently from us, so we need to spend a lot of time doing usability studies of our web pages. From usability studies at his library, Reidsma says that the overriding lesson he’s learned is that users want simple web pages — A big, fat, Google-like search box, with just a few good links.

Responsive Design

Serendipitously, about the same time I came across Reidsma’s ideas on library websites, I was reading about Responsive Web Design (RWD), a recently innovated way to make web pages so that they look good on any size screen, from smartphone to desktop. This requires that the basic page contents be fairly simple, and goes along with the “mobile first” idea that pages should be designed first for small-screen viewing.

I was becoming interested in RWD especially because our library is working on implementing it. So I was looking around to see if any other libraries were doing it, and, low and behold, the only other one I found was Reidsma’s library (actually a sub-section of it).

Interestingly (and surprisingly), Reidsma has not written anything about RWD, but he will talking about it at a work shop on it at ALA-LITA this summer. It fits in well with his ideas about library website design, and it will be interesting to see how he combines the ideas in his session in Anaheim.

Reidsma’s push for simple design on library websites goes along with the current mobile-first-RWD emphasis of modern less is more web design, that’s come with the Mobile Revolution. This is captured well in an article about designer Luke Wroblewski:

Wroblewski thinks the hard choices required to prune all but the most important features make for stronger sites. And, indeed, after they go through the mobile development process, companies often find that their desktop site looks busy, clunky and old by comparison.

What works for the dotcom companies of Wroblewski’s world can also work to the benefit of libraries. Actually, libraries have the great advantage over dotcoms that we don’t have to worry about where to put the ads squeezed out by mobile-minimalist design!

Matthew Reidsma’s Twitter – @mreidsma

Related articles:

Eric Rumsey is at: eric-rumseytemp AttSign uiowa dott edu and on Twitter @ericrumseytemp

Mobile First, Responsive Design & the iPad

Posted on by

Before the iPad came out in 2010, the working assumption was that web pages needed to accomodate only two screen sizes — Desktop/Laptop and iPhone/smartphone sized. Accordingly, many sites, including libraries, built separate mobile pages, sometimes called “mdot” pages because they often have the same URL as the desktop page preceded by “m.”

Mobile First

During this time, designer Luke Wroblewski (@lukew) proposed a somewhat different approach, that he called Mobile First. This is based on the idea that the best way to make web pages is to design them first for their appearance on mobile devices, and then to take into account the large-screen appearance secondarily. This approach has the great advantage that it eliminates having to maintain separate pages for small and large screens.

Enter the iPad … and Responsive Design

While there was a variety of tablet-like devices with screen sizes between smartphone and desktop before the iPad launched, they were never very popular. With the overwhelming success of the iPad, though, it quickly became clear that tablets of various sizes were here to stay (shown nicely in designer Brad Frost’s graphic below).

Before the iPad, the idea of having separate mdot-smartphone and desktop web pages was considered difficult but possible. When it became clear, though, that tablets of many sizes would proliferate, maintaining separate pages for every size was obviously impractical.

What was needed, thoughtful developers realized, is a way to code pages so that they look good on any size screen. So, soon after the iPad launched in April, 2010, Ethan Marcotte (@beep) — building on Wroblewski’s Mobile First idea — launched what he named Responsive Web Design (shortened to Responsive Design or RWD). This uses sophisticated coding (CSS media queries and fluid grids) to build pages that “flow” to look good on any size screen.

The RWD idea spread quickly with developers, who implemented it on their own sites and on smaller dotcom sites. In 2011, high profile sites began to launch RWD versions, most notably The Boston Globe and BarackObama.com.

On a desktop/laptop screen, a nice thing about looking at RWD sites is that it’s easy to see how they look on smaller screens — Just narrow the browser window, and the RWD site changes to the appearance it has on smaller screens – Try it out on a sample of RWD sites that have appeared in the last year: BBC, MinnPost, Center for Investigative Reporting, ProPublica, Univ Notre Dame, Arizona State U Online, A-W architecture, Jason Weaver (a small, exemplary developer site).

Libraries have been slow to adopt RWD so far. Our library system at Univ of Iowa has started with it (which is how I got interested) – We have it on the main University Libraries site and on the Hardin Library site. The only other RWD library I’ve found is Grand Valley State Univ (Michigan), which has implemented it on a sub-section of the library site.

Related articles:

Eric Rumsey is at: eric-rumseytemp AttSign uiowa dott edu and on Twitter @ericrumseytemp