Tag Archives: responsive web design

Spring’15 class notes: Class 21 – Responsive design & Cross-channel UX

31 Mar

The purpose of this class was to become aware of what we need to consider from a UX perspective when we’re planning a user experience that’s responsive – or even more, cross-channel.

First, definitions:

Responsive design for the Web – means creating adaptable sites that serve different layout, navigation, and content hierarchy depending on the user’s device. This is done by querying the device first to get info about screen size, then serving the appropriate version.

Cross-channel UX – means creating integrated user experiences that span several channels (e.g. desktop, mobile, phone, in person).

Second, some strategic considerations:

  • mobile first – content is the most important thing and you need to plan a hierarchy starting from mobile and expanding to the larger desktop version. This is done by prioritizing and labeling content.
  • navigation – avoid very deep, complex hierarchies that can be hard to use on mobile
  • information architecture – try to keep it consistent across channels and enable users to move seamlessly across channels

Here are some slides about what UX needs to consider when planning for responsive, prepared by a former TA:

Third, tools:

  • we learned about customer journey maps, or experience maps and practiced imagining one for a young family moving to Indianapolis, and how they would interact with various city agencies (water, parks) using a desktop portal, a mobile app, and in-person or physical interaction (e.g. unlocking gates to the park).

For more about cross-channel UX, I recommend the book Pervasive Information Architecture by Andrea Resmini. I have some excerpts from that book on the following slides:

These are huge topics and we barely scratched the surface, but that’s because, at the end of the day, it’s not mobile first, or cross-channel first… it’s users first! As long as you know the techniques of user-centered design and the philosophy, you can apply them to more complex situations such as responsive or cross-channel.

Lecture summary: Mobile usability

17 Apr

Today we discussed the debate between Nielsen and Clark briefly summarized as:

Nielsen: mobile should be separate from desktop and offer a customized experience with fewer options than desktop

Clark: mobile should have same functionality as desktop. The experiences should be uniform but optimized for the respective device.

The issue of optimization brings up Responsive Web Design. Please take a look at the full slide deck below (I only showed a few slides in class) and DO check out the resources mentioned at the end.

Take-aways from today’s discussion:

  • What are the main points of view and arguments on mobile vs. desktop UX
  • What is responsive web design and what are the basics of how it works (media queries and fluid grids, images, and fonts).
  • What are the implications of responsive web design for UX and IxD: more work, more knowledge needed about the modes of interaction on different platforms.