On the final day of San Diego's 2013 An Event Apart conference, Luke Wroblewski delivered an all day workshop on multi-device web design. Luke managed to deliver a consistently captivating presentation throughout the seven hour workshop. He presented a vast amount of information, (nearly a 250 page workbook!) and practical methods for putting these responsive web design techniques to use. Most importantly, he spent much of the session discussing the history of this interesting subject, imparting the knowledge of how we got this point, justifying the current need for multi-device websites. Here are my notes from his session:
- Work Mobile First
- Support a Continuum of Screens
- Account for High Resolution
- Manage Performance
- Optimize for Touch
- Get Started
- Cross Device & What's Next
Mobile Device Proliferation
- Approximately thirty devices were released within an 8 week period in 2012. There are currently 10+ billion mobile consumer devices in the world, more then there are people!
- The iPad has 91% of tablet web traffic. iOS currently dominates mobile device use and engagement in the market.
- It's important to differentiate between device sales, or market shares and device use. iPad has 46% market share, but 91% of actual use.
- As smartphones get bigger, where do you draw the line between what devices to serve your "mobile" website to.
- Phones have gotten up to 8.0" large. That's more than half a foot of phone! Devices like this are now so many and varied, they have become a size continuum.
- Are tablets mobile devices? Based on their actual usage, 30% used while watching TV, 21% while in bed, they may be better labeled as mobile within the home.
- Physical screen size, measured in pixels, can not be used to determine what is a mobile device. Nor can whether or not a device can make a phone call, because of these huge screened "phones" being released.
- We should look at these devices in the eyes of human ergonomics. palm, lap, desk. How these things are being used and fit into the user's daily lives.
- 3-5 inch smartphone devices represent the most sold and used devices. Small smartphones follow after this. The most active users are on medium smartphones and full-size tablets, according to research by Flurry.
- Sales of iOS are cyclical based on seasons and product releases. Android sales are flat, indicating that they are an entry-level smartphone.
- Don't limit the mobile experience, but curate it to cater to a mobile user first and progressively enhance the experience.
- This is an entirely new approach to web design, drastically different from the past 20 years of established standards and best practices.
Mobile Navigation Patterns
- While the fixed bottom menu pattern is common on iOS apps; it should not be implemented on the mobile web. Vertical space is already so minimized by browser chrome and many android devices have physical hardware controls near the bottom of their screens.
- In a nutshell, fixed positioning isn't well supported on most mobile web browsers.
- Strong mobile navigation patterns show content first, navigation elements second. Content is front and center, while navigation is a secondary experience.
- Provide immediate value at the launch of your application. Minimal navigation = maximum content.
- When the menu is opened, it should not take away from the current context. Don't have a dead end at the bottom of pages, show a menu in the footer, anchor in the header shoots them down to the footer menu.
Should we be rethinking what a conventional navigation pattern looks like or still use the existing web patterns of today? Luke has done some experimental work with navigational patterns on the bottom of the screen, as opposed to the more traditional top-right patterns. Research suggests that the bottom of screen is the easiest space to reach. Instead of falling back to conventional organization, let's rethink how we are placing our navigation. Maybe there can be new established conventions based on ergonomics within the new multi-device web.
Work Mobile First
- Prioritize what content matters most to your users and show it first. Uniquely design for mobile instead of just arbitrarily stacking into one never ending column.
- Solve your problems on mobile and use learning from here to apply across desktop experiences.
- Building mobile first. Start with lightweight default styles. Your "first media query" should actually be the absence of a media query. Create a fluid layout with no media queries. This allows for proper display on devices smaller than 3 inches, including "dumb" phones.
- Default viewport widths are different across all operating systems. For example, iOS assumes 980px width and by default crams your website in that space, horizontally.
- The viewport meta tag <code<meta-name="viewport" content="width=device-width"> remedies this.
Support a Continuum of Screens
- It typically costs more money up front to build a multi-device website from the beginning, but that translates to future revenue growth, customer engagement and a proven decrease in mobile bounce rates.
- Where there is no or a poor experience and you introduce an optimized and functional one, there will be growth.
- Where breakpoints occur on a website should be based on the content of your website. Insert breakpoints when your content.. Breaks!
- Web page views directly correlate with the size of tablets. Larger tablets = more page views per session.
- Use ems for breakpoints. Being a relative unit, they better deal with default zoom levels of browsers or user-zoom. It will trigger your breakpoints where needed, instead of breaking the design.
- Tablets and other devices are allowing users to interact with the web more often and more comfortably. It is not changing how users inherently use the web.
- Typical device use is a desktop at work, tablet in evenings at the couch/in bed. Mobile is the only consistent experience throughout the day. 24/7 all day, every day device.
- Off canvas interfaces can help with the "mobile stack" problem. Everything is accessible to the user when they need it, but content doesn't take up screen size or cause the dreaded infinitely stacked single column.
Account for High Resolution
- Using CSS background-images, create two versions of each image and implement using a media query to target the devices screen density. This method will not download both images if the media query does not require it.
data-hires="true"attribute. Both images will be downloaded, longer page load times.
- Give people the choice of their image resolution. Tools like picturefill add a HD button over images, when user select so, they are delivered the higher resolution image.
- Use .SVG objects in your HTML. SVG graphics use math to render pictures, something your computer is very good at.
- You can use media queries within SVG images. One example was to make them more legible or display different content at alternate sizes.
- By designing components to boost your site's perceived performance, you can effectively make your website seem to be loading more quickly.
- Instant visual feedback that the user's touch has been registered is a powerful tool.
- Spinners tell the user that the app is thinking, or taking longer time, something that can negatively effect their UX. Things are not slower, but spinners are telling them that they are!
- Optimistic interactions. Instagram's core features (upload, like, comment) appear to the user to be instantaneous. In reality, they actually have yet to send anything to the server.
- Primary tools to boost the perception of speed on your site: provide instant feedback, minimize spinners, perform actions optimistically and move when no one is watching.
Client Side Enhancements
- Load your most important content first, then lazy load the rest as is required.
- You can set the focal point of a photo using CSS.
Server Side Components
- Only send the client what it needs, though this leads to two code bases & relies on messy device detection.
- People are actively trying to solve the problems of server side solutions.
- Luke believes that this may reveal our ultimate cross-device solution of properly serving different assets to specific devices.
Optimize for Touch
- Interactions with software are more and more frequently the user interacting directly with the content. Content is quickly becoming the UI. Always remove useless chrome on the screen whenever possible.
- Regarding touch targets, 23x23 pixels is touchable, while 40x40 pixels is touch-enabled or optimized.
- When a user is interacting directly with the content, be sure to provide feedback.
- Stop trying to differentiate between touch events and mouse use between devices, just support both.
- Push gestures forward and lead with touch. This is supported by user-research findings. People use touch 77% of the time on hybrid, touch-enabled laptops!
- Embrace simplification. Touch, similar to mobile-first, forces us to simplify and reduce our website's content.
- Touch interactions shouldn't change too drastically when more fingers are added, to avoid mistakes.
- Removing scrollbars will reinforce the illusion of content as UI.
- Support the discovery of your gestural interface. Remove all extra options, provide content teasers, animation cues and just-in-time education.
Luke outline four ways in which you can get started with the responsive web design. The first, and least opportunistic, is to simply maintain the status quo with your website. This means a separate code base for the mobile experience.
If you want to get more engaged with this emerging best practice, you could take his second approach by adding adaptive styles. To convert your site down to tablet, then mobile optimized, you can add top down media queries. There's no shame in doing what you can, you don't HAVE to start from scratch here.
Little but powerful things you can do today to adapt your current site to the changing Web and importance of mobile.
The third method is to start from an existing mobile site and extend up from there, using media queries. Over time, you let your responsive mobile site grow up and overtake the domain of all other sites.
The final method is to start from scratch and build a mobile-first, responsive website that is entirely optimized for the mobile world we live in today.
Cross Device & What's Next
- Users are using an increasing number of web connected devices to interact with the same content. Build once, access everywhere responsive web apps and sites are best suited to fill this emerging need.
- The primary benefits of cross device usage include; access, seamless user experience flow, push and control.
- The web is a unifying glue across all experiences. This may turn out to be a "second coming" of the web. One code base, one solution to rule them all. The majority of native OS apps may fall by the wayside.
- Sensors are collecting and aggregating data around you, all need is to be paired with a screen. These devices are reliant on the web to provide a consistent, responsive experience between them.
- Luke predicts sensors will be increasingly important in controlling/tracking many aspects of our daily lives.
- Wearable technology is possibly the next big wave in our industry. Flexible screens, Google Glass, fit bands, etc.