Mobile design

Dao of Web Design

WML example
WAP gateway

Popular mobile browsers

Prospective shift in leading economies:
EAGLE and Next Eleven

Difficulties

Mobile display size comparison
Pixel densities
Elusive viewport scaling
General mobile problems

Solutions

Docs vs. apps

CSS: media attributes for <link>
Other values for media attribute

User agent (UA) strings

BBC desktop vs bbc.co.uk/mobile vs actual BBC mobile

Detection & redirection:
Client-side mobile redirect
Server-side UA detection script
DetectMobileBrowsers.mobi
Device-detection database: WURFL

Adaptive solutions

Adaptive sites:
Robot or Not?
MediaQueries.es

CSS: media queries in <link>

CSS3 media queries for the stylesheet:
  @media type and (scope) { CSS overrides here }

Github chart of mobile device widths
David Nemes, but note: width vs device-width

*Steps to mobify your desktop site*
Px to em converter

Testing mobile designs

General multi-simulators:
MobileTest.me
Screenfly

Advanced:
MobiReady
W3C mobileOK Checker
Mobile & tablet emulators
Article: emulators & simulators

Project 2: Self-presentations

—Til 2:30

Project 2: Design team ideation mashup

A previous example

Recommended readings from Yiibu:
Rethinking the Mobile Web
Beyond the Mobile Web
Sowing Seeds

Due next meeting:
Design team mashup
Assignment 3

Last chance next meeting:
Project 1