Category Archives: Mobile First Design

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

Mobile First – The Benefits of Less

Posted on by

In his recent article in Library Journal (The Benefits of Less) Aaron Schmidt talks about simplifying library websites to make them more usable. He suggests that a good way to work on this is to think how the site would be designed for mobile devices:

Another way to brainstorm the most important parts of your website is to imagine you’re building a mobile version. Given the limited screen real estate available, what parts of your site are essential?

I suspect Schmidt is not aware of it — I haven’t seen it discussed much in library circles — but the idea of building the mobile version of a site first, before building the full desktop site, is more than just an imaginary brainstorming idea in the dotcom tech world — In 2009, Luke Wroblewski proposed his Mobile First idea that this is the best way to design a website — Design the site first for mobile, then work on the full site design. Last year, Google’s Eric Schmidt took up Wroblewski’s theme, saying in a speech at the Mobile World Congress that Google would “work on mobile first” in bringing new tools to the Web.

A few months ago, venture-capitalist Fred Wilson wrote an elegant summary of the Mobile First idea that resonates strongly with Aaron Schmidt’s ideas for designing library websites:

I was meeting with the team from one of our portfolio companies a few weeks ago and we were talking about a redesign of their new web service. I had told them I thought the initial design was too busy and too complicated to work well in the market. They showed me the iPhone app they were planning to release soon. I said “just do that on the web.” And happily they told me they were thinking the same thing.

Using the mobile web as a constraint to think about web design is growing in popularity. I see it in my own efforts and the efforts of our portfolio companies. When users spend more time accessing your service over a mobile device, they are going to get used to that UI/UX. When you ask them to navigate a substantially busier and more complex UI/UX when they log onto the web, you are likely to keep them on the mobile app and off the web app.

I’m starting to think a unifying vision for all apps should start with the mobile app, not the web app. And so it may also be mobile first web second in designing web apps these days.

Wilson could almost be talking about the same “busy, complicated” library websites that Aaron Schmidt talks about — Good website design for a venture capitalist is also good for libraries.

Related articles:

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

Mobile Design: Simplifying Complexity

Posted on by

In December 2006, Luke Wroblewski blogged a good discussion about The Complexity of Simplicity in user-interface design. Interestingly (in light of his recent articles discussed below), in the 2006 article he doesn’t mention MOBILE design. What makes this especially interesting is that the iPhone, with its game-changing elegant mobile interface, exploded on the scene just a month after Wroblewski’s article, in Jan, 2007. So … Jump forward to an excerpt from Wroblewski’s Nov 2009 article Mobile First, in which he first proposed the idea that all web pages should be designed first for a small screen, before considering their appearance on a large screen:

Mobile forces you to focus – Mobile devices require software development teams to focus on only the most important data and actions in an application. There simply isn’t room in a 320 by 480 pixel screen for extraneous, unnecessary elements. You have to prioritize. So when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter today’s desktop-accessed Web sites.

*   *   *   *   *   *   *

The link in the quote above goes to Wroblewski’s Aug 2009 article Mobile App User Experience, which has the image at left, a great “picture-is-worth-a-thousand-words” view of the words in the quote — Cut the crap and give the user the important part, what they’re looking for! Taken together, I think, the quote and the picture tell the story of what’s been happening in the world of interface design since the introduction of the iPhone –Though I’m sure this is something of an oversimplification, I think that the simple user interface that seemed so hard to attain on a large screen has now become easier with the forced constraint of the small screen.

Wroblewski’s ideas resonate with what I’ve been writing about simple mobile design for library sites. Although he’s not talking specifically about libraries, his ideas are certainly right on-target for us in libraries. The AP News example he chooses for the picture especially catches my attention, as I’ve been watching news sites to see how they’re adjusting to the mobile upheaval — I think they carry lessons for libraries, as we go through the same thing.

Note in the picture here that we in libraries have an advantage over news sources and other dotcom sites — We don’t have the extra baggage of advertising — This in itself would seem to make mobile friendly design a Great Opportunity for Libraries. The obstacle for libraries seems to be the longstanding culture of overly complicated design for our resources, especially OPACs. The good news here is that with mobile design there really is no alternative to simple design — As Wroblewski says, the size of the screen just doesn’t allow extra fluff. The constraints of mobile design, I think, level the field — This makes it easier for us in libraries to create sites as simple and easy to use as the big dotcoms. As I’ve written, there are encouraging signs that we’re doing this.

Less is more …

I better wrap this article up — It’s turning into a classic case of controlled serendipity … Just as I thought I was about finished, the “less is more” thought came into my mind, as a pithy epigram of mobile user design. Alas, I Googled, and found this, another striking quote, from Darja Isaksson (www.inuse.se), maybe I’ll expand more later, but for now, a good way to end:

So … Does the iPhone live up to its hype? [article title] … boldface added by me …
The results? Stunning. The iPhone has introduced a new interaction paradigm to the world, in an uncompromising way that proves that “less is more” when it comes to true user experience.

Related articles:

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