JSTOR recently announced that it has reconfigured its user interface using responsive design techniques. Their press release reads:
Rather than a device-specific app or a separate mobile site, we’ve used responsive design to implement an under-the-hood overhaul that enables the JSTOR interface to adapt to the screen size of a device, automatically. In responsive design, areas of the pages on the site are reflowed, moved, or hidden to present a simpler but fully functional experience for researchers.
To see what they are talking about, go to the JSTOR website using a desktop browser. Then gradually make the browser window narrower until it is about the width of a mobile phone. You’ll see that when the browser window approaches the size of a mobile phone, there is a break point and the site reflows to accommodate the smaller form factor.
Big deal, you might say, lots of websites have mobile optimized views and have for years. Lots of sites can automatically detect a user’s device and display the appropriate view. This is true. However, most such sites detect a mobile device and redirect the user toward to a different URL with a separate site configured for (in most cases) smartphones. Some more modern sites use the same URL but only display a single “mobile view” to those on a phone. And while this approach has sufficed for most mobile use cases for many years, the proliferating variety of mobile devices and form factors, requires a different approach.
While nascent in STM and scholarly publishing, the user interface design world has been abuzz with the potential of responsive web design for some time and a number of sites using responsive web design techniques are now appearing. What JSTOR is doing, with a single break point, is just the first step. Additional break points and content flow grids can be developed to optimize for a wide variety of devices, including large and small smart phones as well as various tablets and e-readers. Users can be presented with a tablet view optimized for reading in one or two column mode (not unlike the basic user experience on a Kindle or Nook app).
The most notable example of responsive design (outside of the STM and scholarly space) is probably the Boston Globe. Again, try slowly expanding and contracting the site with your browser and watch it go from three columns (ideal for desktops) to two columns (ideal for tablets) and then finally to a single columns view (for smartphones). The site, however, is not simply dropping columns. The global navigation bar changes, ad positions move, image sizes change, and story position adjusts. The site adjusts for the user’s device or use case dynamically.
Responsive web design, especially the complex variety seen in the Boston Globe, is not easy to implement. It requires different workflows than many web developers are used to. While the process can begin with traditional wireframes and glossy design work, given the number of variations and nuances to content flows, ultimately a designer and a user interface developer need to work in close concert (or a user interface developer needs the skill set to be able to interpret a design on the fly). While this requires some retooling and retraining, the end result is worth it. Responsive design provides a relatively cost-effective alternative to device native (iOS, Android) and HTML5 web applications (meaning locally cached apps, such as that of the Financial Times, built using HTML5 as opposed to the Objective-C or Java programming languages used in iOS and Android respectively) . Moreover, the lines between responsive design and HTML5 applications will likely blur over time as responsive design incorporates more “app” like functionality (such as content caching for offline use).
While JSTOR is among the first to experiment with responsive design in the STM and scholarly space, look for many others to follow close behind with increasingly sophisticated templates that improve user experience and push the boundaries of web delivery to mobile devices. In the short term, responsive web design is likely to bring incremental improvements to existing products. In the longer term, however, responsive web design has the potential to fundamentally change the rules for product development, enabling publishers to put the mobile experience at the forefront of product design while still working in a web context.