Breaking Development: Responsive Design Vs Separate Mobile Sites

by Luke Wroblewski September 23, 2012

In his Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition talk at Breaking Development in Dallas, TX Brad Frost evaluated separate mobile site solutions vs. responsive Web design solutions against how they meet mobile user needs. Here's my notes from his talk:

  • Should you build a separate mobile site or a responsive Web site? This question has been debated endlessly. But ultimately, it depends. There are lots of reasons to do either and things keep changing.
  • But there’s a fundamental reason to do something for your mobile Web users. There are 311 million people in the United States. 55% of them access the Web using their mobile devices. 31% of mobile Web capable phone owners use them as their primary means to access the Internet. SMS, links, email, search, social networks, and more link to the Web. So mobile Web experiences really matter.
  • Mobile Web experiences need to provide access and the ability to interact. They should be performant and can be enhanced. These principles can be used to evaluate any mobile Web experience: responsive or separate site.

Access

  • The power of the Web is its ubiquity. No native platform provides this level of access.
  • Mobile users will do anything & everything that desktop users will do provided its presented in a usable way. Assuming people on mobile “won’t do that” is a losing proposition. Don’t penalize users with missing content & features just because they are on a full screen.
  • One Web = content parity = thematic consistency = give people what they want. Give people what they want regardless of how they access the Web. Call it what you want (content parity, etc.) but make sure people can access your content and services.
  • One pitfall of separate mobile Web sites is that content may be removed that is not deemed “important” enough for mobile. Responsive designs are not immune from this issue. It’s possible to remove features by hiding them in small screen responsive design views as well.
  • URL redirection can be done properly or incorrectly. Make sure URLs work: redirect both ways to the same content. Don’t just redirect to a mobile Web site home page.

Interaction

  • Get to the content first. Navigation should be like a good friend. It should be there when you need it but give you space to do what you want. The toggle technique for site menus can keep focus on core content while still giving you access to navigation when you need it.
  • We scroll on mobile: when we go back in time, dive deep into content, or make your way through lists. We’re always scrolling through a singular content type.
  • With responsive Web design, we tend to fold a number of different content types into a single column. But that means lots of different content types in our scroll path. How do users know what’s on the page? They have to scroll and sift through a bunch of stuff. Auxiliary content loading can divide up content types more clearly.
  • To manage this, you can roll up/collapse content to make it more parsable on small screens. Aggressive enhancement allows you to maintain access to content without overwhelming small mobile screens.
  • Auxiliary content: you can enhance pages with additional content like related links, etc. when screen size increases. Create HTML fragments that can be loaded with Ajax or linked to when Javascript is off.
  • Loading in additional content allows small screens to be more performant and larger screens to take advantage of additional space.

Performance

  • 71% of people expect mobile sites to load as fast or faster than desktop sites.
  • 74% will abandon if a site takes more than 4 second to load. You have 5 seconds of someone’s time.
  • Yet the average Web page size is over 1MB and growing. 86% of responsive web designs send the same content to mobile devices.
  • Performance is a hidden consideration. We need to elevate it to the level of design. You can’t mock-up performance in Photoshop.
  • Obama’s responsive Web site can’t be viewed on Blackberries because it is too large (over 3MB). This is an accessibility issue.
  • Our users care about performance, we need to care more.
  • 86% of responsive Websites whose small screen view weighs as much or more than the desktop site.
  • There are techniques that can be used to optimize both mobile Web sites and responsive sites to make sure they are performant.

Enhance

  • There is a difference between support and optimization.
  • Instead of mobile last, build mobile first. This will give you a very solid foundation on which to stand and enhance for more capable devices. Otherwise you will just be scrambling as new capabilities and devices emerge.
  • Forms: use the right kind of input types to make data entry less error-prone. These little things add up to an overall better user experience.
  • Mobile devices were made to make phone calls. Enable quick “tap to call” interfaces. Geolocation can be used to enhance location-based tasks.
  • Encourage open access, clear interactions, high performance, and look for opportunities to enhance experiences.
  • Multi-device Web design is not easy. It’s a big task.
  • It’s ok to start small. Building a separate site can be a good strategy to enhance over time until it can support/replace your existing desktop site.
  • This isn’t religion -it’s Web design. Disagreements happen and implementations change but keep learning.
  • When you’re finished changing, you’re finished.