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-rumsey AttSign uiowa dott edu and on Twitter @ericrumsey

Comments are closed.