Full day training course offered at Usability Week Toronto

Building the Mobile Web

Practical differences between mobile and desktop Web design

Users expect to consume similar content and accomplish similar tasks regardless of the device they use. More people are choosing mobile devices to access the Web. Mobile devices are no longer an “on the go” option. Research suggests that for many users mobile is just one more access point to the Internet. This changes everything.
This course arms you with an understanding of the practical differences between mobile and desktop Web design. We discuss:
The impact of browser and device diversity on the user experience: How your site looks, behaves, and performs
Techniques for avoiding common mistakes when transferring traditional desktop Web design patterns to a multi-device context

Benefits

  • Review strategies for managing device diversity using techniques such as responsive design
  • Learn to apply the appropriate web design pattern for multiple screens and capabilities
  • Get an introduction to advanced implementation topics such as image and content adaptation

Topics

  • The mobile Web landscape
    • Number of people who already use the Web on mobile
    • Short and long term predictions of mobile traffic
    • Popular mobile platforms and browsers
    • Relationship between a browser and a specific device or platform
    • Differences among mobile browsers
  • Device and browser characteristics impact user experience on the Web
    • Physical screen size
    • Processor and memory
    • Manipulation model
    • Display quality: Color gamut, pixel density, and capacitive and resistive displays
    • Viewport, zoom, and reorientation behavior
    • Native app web views
    • Network proxies and transcoders
  • Desktop Web patterns that cause problems on mobile devices
    • Hover states
    • Lightboxes and modal dialogues
    • Inline scrolling
    • Fixed positioning
    • Impact of advanced effects (e.g., gradients, animations, and fonts) on performance
    • JavaScript assisted form fields
    • Third party content (e.g., advertisements and social media widgets)
  • Native (mobile) patterns
    • Mimicking native navigation
    • Mimicking native gestures
  • Multi-device design strategies
    • Building a separate 'mobile' site
    • Building a responsive site
    • Mobile first and responsive design
    • Reasons to combine approaches
    • Layering the user experience
    • Detecting browser and device capabilities
  • Common detection methods: Pros, cons, and capabilities
    • Server-side identification using the user agent string
    • Client-side feature detection JavaScript
    • Device databases
  • Content and media filtering, and replacement
    • Server-side techniques
    • Client-side techniques

Format

The basis of the course is a lecture format with a couple group exercises to reinforce the learned principles and guidelines. There will be plenty of opportunities to ask questions and get answers.

Instructors

Bryan Rieger

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.

Stephanie Rieger

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. Her current focus includes mobile strategy, front-end design, and optimisation of web sites for multiple screens and capabilities.