Luke Wroblewski on Multi-Device Web Design

Luke Wroblewski conducted a one-day workshop this week at An Event Apart Boston on The Web Everywhere: Multi-Device Web Design. Here are my notes:

A Framework for Devices and Use

  • Device sales are not the same as usage. Make sure you understand what people are referencing when they use statistics. For example, iPhone web browsing exceeds Android browsing even though more Android handsets are sold.
  • Trend: Now bigger is better for smartphones. You need to design for 3.5-inch to 7-inch screens when designing for smartphones.
  • Look at actual usage on your site and not device distribution in making strategic decisions. Figure out who is looking at what content using which devices.
  • A switch to smaller tablets is underway. Expect to see more traffic to your site from 7- to 9-inch tablets. And you can’t push the same design to a 7-inch tablet as you would to a 10-inch device.
  • Large tablets are not mobile devices. Most large tablet use is in the home. A 10-inch iPad is really a mobile-in-the-house device.
  • Human factors should drive what we do with the interface. Look at physical dimensions and human ergonomics.
  • Don’t use industry terms like “phablets” to drive your design. Think of devices as being good for the hand, good for the lap, good for the desk, or good for the wall.
  • Get ready for more diverse screen sizes. Wrist-sized screens and eye-sized screens are coming.
  • Android sales tend to follow a continuous predictable line, while iPhone sales spike and fall around device release cycles. Be aware of sales trends as you plan your design strategy.
  • Expect more growth in “hybrid convertible” devices that include elements of laptops and elements of tablets. Tablets have keyboards and laptops are becoming touch devices.
  • Computers from ASUS and HP will have touch input via peripheral devices.
  • Quoting Ethan Marcotte, “privilege the small screen” so those users have everything they need, then add more to the design for larger devices.

Navigation on Phones and Tablets

  • Try to avoid iPhone-like bottom tab bars on web designs meant for handheld devices. They conflict with Android device controls and support for fixed positioning is not universal for Android devices.
  • Use toggle menus at the top of the screen on websites designed for mobile devices.
  • Toggle menus are limited to one level of navigation. Use off-canvas menus for deeper levels of navigation.
  • Put content up front, not navigation. Allow easy access to your site’s navigation and an easy way to get back to your content.
  • The footer anchor pattern places navigation after your content but allows easy access to it with one tap on an anchor link in the site header.
  • There are more comfortable touch zones on tablets and laptops at the bottom and left and right sides of the screen. Understand this when designing websites for tablet use.
  • Responsive designs that fall back to desktop layout do not work as well as they could on tablets because of comfortable touch zones. Explore split navigation placed at the lower left and right corners of the device. Test your responsive designs with real users on tablets.

The Mobile First Approach

  • Depending on the market being served, especially international ones, you still have to plan for feature phones with minimal CSS support and no media queries. Start here and build up.
  • Within media query break points use fluid layouts to scale your design between the break points.
  • When doing responsive design consider portrait and landscape orientations. Also be aware of how your design works on widescreen devices, like Microsoft’s Surface, when they are used in portrait orientation.
  • Start your design with handhelds in mind, then enhance upward and build fluid layouts.

Design Techniques

  • Use the width of your content to determine break points. These become “stress points”.
  • Use content curation and responsive patterns when designing for multiple devices.
  • The off-canvas pattern puts navigation and supporting content off screen with UI elements to expose them. Use this as an alternative to the single-column “mobile stack”.
  • Use CSS3 and icon fonts whenever possible for buttons and other images.

Performance and Speed

  • Executing a multi-device strategy is somewhat like packing for vacation: Responsive is like packing when you don’t know the weather; you pack all kinds of clothes. A separate mobile-specific site is like packing for the beach; you bring only what you need.
  • Responsive design is about adaptation; mobile-specific sites are about optimization. Mobile-specific sites will usually perform better in terms of speed but come with additional development and maintenance costs.
  • Transitions and other UI elements can improve the perception of performance.
  • Spinners can communicate to the user that something is happening, but also can create the perception of the app being slower. Only use spinners and other UI techniques if they really create the impression things are running faster. Test with real users to see how they perceive it.

Multi-Device Strategies

  • Strategy One: Maintain the status quo and keep a separate mobile site.
  • Strategy Two: Add adaptive styles to your existing site as a step toward responsive design. See Dan Cederholm’s write-up on using adaptive styles on Dribble.
  • Strategy Three: Extend your existing mobile website to larger devices. This is easier than downsizing an existing desktop-focused site, and takes what you already have and gradually makes it responsive without disrupting your existing site and business.
  • Strategy Four: Start fresh. If you ever needed a reason to redo your entire website, the new multi-device reality is it.
  • When first starting with responsive design, try doing it on your most used pages to get the biggest bang for the buck. If you have a video site like YouTube, the video player page is the place to start.
  • Alternatively, you can try it on your least used pages to get comfortable without a lot of risk.

What’s Next

  • Websites on TVs and wall-sized displays are on their way to becoming mainstream. Examples include Google TV, Xbox, PlayStation 3.
  • The web on a TV is not about a web browser on your TV, it’s about creating cross-device experiences that include the TV.
  • Eye-sized screens like Google Glass will be design considerations in the future.
  • Apple, Android, Samsung, LG, and Microsoft all publicly claim to be working on a wrist-sized device. It will include some kind of HTML support in the future. It’s one more screen size you will have to consider in your designs.
  • Speech is becoming an input type, with Siri and Google Voice Search being only the beginning.
  • Google Glass uses speech interfaces, eye movement, device movement, and touch. The types of inputs used with your designs will only increase.
  • If a technique is used on one device form factor, it will spread to the others. Look at what’s happened so far with touch, voice, and high-resolution screens.

iPhone Stencils for Visio

I recently found a great set of stencils for wireframing iPhone apps and mobile websites in Visio. The stencil set was created by Jonathan Abbett of Beacon 16 and is available under a Creative Commons License.

The stencil shapes include:

  • iPhone
  • Navigation Bar
  • Search Bar
  • Browser Bar
  • Four and Five Button Tab Bars
  • Keyboard
  • Date Picker
  • More…

If you need a higher fidelity GUI design toolkit for iPhone and iPad, Speckyboy Design Magazine published a great list of resources last year. If you need to illustrate touch gestures in your wireframes, Luke Wroblewski maintains a Touch Gesture Reference Guide on his website.

iPhone Stencils for Visio
iPhone Stencils for Visio

Design Pattern Resources

Looking for some new design pattern resources? Here’s a few I’ve been using lately:

Since design patterns first arrived in application development to provide proven and repeatable solutions to common programming tasks they’ve evolved into a great way to standardize design and IA solutions for common interface elements used across a variety of websites. Let me know if there are any helpful new pattern libraries you’re using.