Building for Mobile Web Compatibility

Building for Mobile Web Compatibility

Icons of B2G and Firefox OS

Who am I?

Lawrence Mandel
lmandel@mozilla.com
@mmmandel

Let's talk compatibility

Browser Logos

Compatibility Issues

  1. User Agent (UA) Detection
  2. CSS Vendor Prefixes
  3. Browser Specific Property/Feature Usage

User Agent (UA) detection

Firefox for Android:
Mozilla/5.0 (Android; Mobile; rv:20.0) Gecko/20.0 Firefox/20.0
iPhone:
Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25
Android:
Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19

UA detection uses

  • Capability identification > Use feature detection
  • Serve mobile/tablet/desktop content > use media queries

Avoid UA detection!

Feature Detection

                var v = document.createElement("video");
                if(v.canPlayType) { 
                   var webm = v.canPlayType('video/webm');
                   var h264 = v.canPlayType('video/mp4;
codecs="avc1.42E01E, mp4a.40.2"');
}

Media Queries

                <link href="site.css" type="text/css" media="screen
and (max-device-width: 480px)" rel="stylesheet"/>
                @media screen and (max-width:480px) {
                   …
                }
            

If you must use UA detection stay as broad as possible

  • Detect Mobi for mobile devices
    ("and not 'iPad'" if you want to avoid serving mobile content to iPads)
  • Detect Tablet or iPad or Touch for tablet based devices
    (see how this gets messy)

Detecting the "Mobi" token

Firefox for Android:
Mozilla/5.0 (Android; Mobile; rv:20.0) Gecko/20.0 Firefox/20.0
iPhone:
Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25
Android:
Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19

Detecting the "Mobi" token (2)

BlackBerry:
Mozilla/5.0 (BB10; DeviceModel) AppleWebKit/537.10+ (KHTML, like Gecko) Version/BBVersion# Mobile Safari/537.10+
Windows Phone:
Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 920)
Opera:
Opera/9.80 (Android 4.0.4; Linux; Opera Mobi/ADR-1210081231) Presto/2.11.355 Version/12.10

CSS Vendor Prefixes

  • Represent experimental features
  • If you do use prefixes, also list the unprefixed version of the property to future proof
  • Method of development deprecated by Mozilla and Google
  • Avoid CSS vendor prefixes!
                -moz-transition:width 2s;
                -webkit-transition:width 2s;
                -o-transition:width 2s;
                transition:width 2s;
            

Browser Specific Property/Feature Usage

    Prefer Web standards:
  • to browser specific DOM properties
    (use standard apis or a framework)
  • to browser specific technology
  • to plug-ins

Avoid browser specific property/feature usage!

What you can do

Lots of broken sites out there. We need your help.

  • Follow best practices
  • Publish complete code examples
  • Report broken sites

Thanks


Lawrence Mandel
lmandel@mozilla.com
@mmmandel
http://lmandel.github.com/buildmobileweb

Photo by mozillaeu