Building the Mobile Web: Usability Week 2012 Conference

More and more people are choosing to access the web on their mobile device. No longer simply an “on the go” activity, research now suggests that to many users, mobile is just one more access point to the Internet. This changes everything. Users increasingly expect to consume the similar content and accomplish similar tasks regardless of the device they use.

This workshop will arm participants with an understanding of the practical differences between mobile and desktop web design. We will discover how browser and device diversity impacts the user experience, how your site will look, behave, and perform on different devices, and how to avoid common mistakes when transferring traditional desktop web design patterns to a multi-device context.

What You’ll Learn

How mobile browsers are different
How your site will look, behave, and perform on different browsers and devices
Which traditional web design patterns are appropriate when dealing with multiple screens and capabilities--and which are not
Strategies to manage device diversity using techniques such as responsive design
An introduction to advanced implementation topics such as image and content adaptation

Course Outline

The mobile web landscape
- How many people already use the web on mobile?
- Short and long term predictions of mobile traffic
Understanding mobile browsers
- How are mobile browsers different?
- What is the relationship between a browser and a specific device or platform?
- Which browsers are most common EU, USA, globally?
- How do device and browser characteristics impact usability and user experience on the web?
  - pixel density
  - CPU
  - capacitive vs resistive displays
  - manipulation models
  - zoom and viewport settings
  - behaviour at reorientation
  - network proxies and transcoding
  - native app web views
Common patterns and practices that cause problems on mobile devices
- Desktop web patterns
  - hover states and actions
  - lightboxes/modal dialogues
  - inline scrolling
  - fixed sizing and positioning
  - impact of advanced effects (gradients, animations, fonts etc) on performance
  - JavaScript assisted form fields
  - 3rd party content (e.g. advertisements, social media widgets)
- Native (mobile) patterns
  - navigation and wayfinding
  - gestures
Multi-device design strategies
- Pros and cons of common design approaches
  - building a separate 'mobile' site
  - building a responsive site
    - "(mobile first) responsive design"
  - combining approaches
- Layering the user experience
  - detecting browser and device capabilities
  - common detection methods (pros, cons, capabilities)
    - user agent strings
    - JavaScript
    - device databases
  - ways to combine approaches
  - future options
- Design tips
  - multi-context wireframing
    - designing in the browser
    - designing with content or data
    - when to use static mock-ups
  - how and when to test
- Advanced implementation challenges
  - An introduction to content/media filtering and replacement
    - server-side techniques
    - client-side techniques

Course Materials

Copies of the presentation slides.

Instructors

Stephanie Rieger is Principal at Yiibu. Stephanie is a designer, writer and closet anthropologist with a passion for the many ways people interact with technology. Prior to founding Yiibu, Stephanie worked in design and content strategy for a variety of e-learning and edutainment properties. Stephanie's current focus includes mobile strategy, front-end design, and optimisation of web sites for multiple screens and capabilities. A frequent speaker at mobile industry events, she is also a member of the W3C Mobile Web for Social Development Working Group and works internationally with clients such as Nokia, Phillips, Vodafone, Intel and Microsoft. A compulsive tester and researcher, Stephanie is always keen to share and discover insights on worldwide mobile usage, and the social or cultural impacts of the mobile web.

Bryan Rieger is Principal at Yiibu. Bryan is a designer and reluctant developer with a past mired in theatre and animation. With over 15 years experience designing and developing software, Bryan's work has spanned many platforms including print, broadcast, web and mobile. Prior to founding Yiibu, Bryan led research and development focused on mutli-platform video at a startup in the broadband entertainment space. During this time, he also worked on early interactive multimedia prototypes for handheld entertainment consoles and devices. After becoming obsessed with the impact mobile devices were having on people's lives, Bryan then took a sabbatical; spending a year studying social and cultural uses of technology in the Asia Pacific region. Bryan now divides his time between his own research, prototyping, and working internationally on mobile projects for clients such Nokia, Intel, Phillips, Vodafone, and Microsoft.