Serving an Online Audience with Responsive Design

by | Jun 7, 2013 | 0 comments


Responsive design panel: (L-R) Jean Kaplansky , Anjanette Bunce , Marc Ardizzone , Toby Plewak (moderator)

Toby Plewak introduced the subject of responsive design.

Several websites with lists of mobile apps from publishers exist. What have we learned from this?  Here is what the landscape looks like to a user:

The mobile landscape as seen by users

Do we want to be thinking about our customers in terms of what device they carry? It is very expensive to build separate apps for each device. According to an IBM study, 85% of users expect that a mobile website should be at least as good as the desktop. How can we decide what’s important for mobile sites? For example, Apple’s iOS devices are now offered in 6 different size/resolution combinations!  The lines between tablets and laptops are blurring. All this is making confusion for users. Publishers don’t need a “mobile strategy; they need to think about their total online strategy.

Responsive web design maintains one website that serves all devices and screen sizes and provides complete support for almost all website pages and features regardless of screen size. The term was coined by Ethan Marcotte in 2010 in an article written for A List Apart. It is not about specific technologies but about a single online product to serve all subscribers. It is not about designing websites but designing systems: how to build a site that reflows itself for whatever device its readers have.

In his presentation entitled “Let’s design systems, not websites,” Marc Ardizzone, an information architect, said that classic website design was a traditional fixed width designed for the desktop. Such websites are rigid, inflexible, and designed to work in a single context. Outside of that context, they give trouble. From a usability perspective, they fail on many levels and become annoying to users who are forced to zoom, scroll, and navigation becomes nearly impossible. Responsive design is a shift in thinking. It uses Media Queries, bits of code that measure the screen width and automatically adjust the width of the site. Responsive web design is about designing systems, not websites and makes us revisit what is important to deliver to users and what is not.

System components for effective responsive web design include grids, typography, and CSS/HTML code. The goal is always readability, along with architecture and navigation. Flexible grids are the foundation of responsive design because they are the foundation of a fluid system. They reflow content and provide structure and fluidity.  Typography adapts to a screen size at predetermined breakpoints. CSS/HTML is the workhorse of responsive design. It controls the placement of elements on the website and how fonts render. Architecture and navigation control how the user gets to the content and how easy or difficult it will be for them.  It is important to free your content.  Go responsive!

Jean Kaplansky, Solutions Architect at Aptara, discussed what to think about when considering your options. What will really make the system go? It is about the users and giving them a really good experience.

Consider the following:

  • Content strategy. Do you have a content strategy that matches up with your business plan? 
  • The reading experience, which is what content is all about. 
  • Typography rules the scholarly reading experience more than any other experience. You cannot get away with errors in a scholarly journal. Somebody will notice them and call you on them.
Here are some rules to live by: Things won’t stop changing, and you will have to change with them. Just because you can doesn’t mean you should. Some content simply will not work on a small screen!

Why are you considering responsive design? Is it because it’s a buzzword? What will it bring to the user experience? Will it make things easy to read?

  • Context is king, but make no assumptions about what your users’ context will be.
  • Why are people on your site? What do they want to do? What do they want to find? What do they want to read?
  • Think mobile first. Responsive web design is an exception to the rule that “it is always easier to take away than it is to add.” Maybe we should think about the mobile app first and then build from there.
  • Think fluid, proportions, relative percentages! Think in ems, not pixels! If you put pixels in, you have fixed the value.
  • Don’t resort to fallback hacks like browser sniffing, hiding content, or disabling functionality like zoom. 
  • Don’t forget about performance.
  • Context drives the user experience. 
Ethan Marcotte’s book, Responsive Web Design is the best on the subject so far. Responsive design isn’t just about making elements fit, but making sure they are appropriate for all of your users, regardless of the size of their screen. Typography still matters!

Anjanette Bunce described the redesign of the JSTOR website using responsive design.  JSTOR considered mobile apps, mobile sites, and full responsive redesign from the many options that are available and chose a responsive retrofit.
Accessibility is very important.

To test the new site on a wide range of devices, they built a “device library”, following the advice in an article by Brad Frost entitled “test on real mobile devices without breaking the bank“.  They were able to complete the entire redesign in 8 weeks.

The development strategy was to simplify the system by optimizing the experience without removing features, prioritize it so that users can access the content they need when they need it, and reuse existing code and functionality wherever possible.  Here are some usage trends that were observed after the redesign:
The lessons learned from the project included:
  • Consider your content,
  • Make decisions with users in mind,
  • Small changes can make a difference,
  • Test on real devices, and
  • Continue to iterate.



Sign-up Today!

Join our mailing list to receive free daily updates.

You have Successfully Subscribed!

Pin It on Pinterest