index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Fixing the Mobile Web | Tips and tricks that can save your sanity</title>

    <link href="css/mobileweb.less" rel="stylesheet/less" type="text/css" />
    <script type="text/javascript" src="js/less.js"></script>
</head>

<body class="impress-not-supported">

<div class="fallback-message">
    <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>

<div id="impress" data-transition-duration="500" data-max-scale="2">

    <div id="overview" class="step" data-x="4000" data-y="1500" data-scale="10" data-rotate="4680">
        <a href="http://bundyo.github.com/fix_mobile_web/">http://bundyo.github.com/fix_mobile_web/</a>
    </div>

    <div id="title" class="step slide" data-x="0" data-y="0">
        <h1>
            Fixing the Mobile Web
            <span class="underline">tips and tricks that can save your sanity</span>
        </h1>
        <div class="bottom center note">
            Kamen Bundev (Bundyo)<br />
            Twitter ID: @bundyo<br />
            Kendo UI Mobile Team<br />
            Telerik<br />
        </div>
    </div>

    <div class="step slide first" data-x="346" data-y="-600" data-rotate="120">
        <q>
            Smartphones <strong>changed</strong> the Web landscape.<br/>
        </q>
    </div>

    <div class="step slide hidden last" data-x="346" data-y="-600" data-rotate="120">
        <q>
            Smartphones <strong>changed</strong> the Web landscape.<br/><br/>
            <div class="flyin">We grew to love them and support them.</div>
        </q>
    </div>

    <div class="step slide first" data-x="692" data-y="0" data-rotate="240">
        <q>It's a <strong>love</strong> / <strong>hate</strong> relationship</q>
    </div>

    <div class="step slide hidden" data-x="692" data-y="0" data-rotate="240">
        <q>
            It's a <strong>love</strong> / <strong>hate</strong> relationship<br/><br/>
            <div class="flyin">We <strong>LOVE</strong> them.</div>
        </q>
    </div>

    <div class="step slide hidden last" data-x="692" data-y="0" data-rotate="240">
        <q>
            It's a <strong>love</strong> / <strong>hate</strong> relationship<br/><br/>
            We <strong>LOVE</strong> them.<br/>
            <div class="flyin-right">
                They <strong>HATE</strong> us.
                <img class="dalek" src="images/dalek.png" />
            </div>
        </q>
    </div>

    <div class="step slide" data-x="692" data-y="800" data-rotate="360">
        <q style="margin-top: -30px">
            <div class="center note" style="padding-bottom: 10px">Worldwide smartphone market, by OS, global sales 2011</div>
            <table class="infotable">
                <tr>
                    <th>Operating System</th><th>Shipments<br/><span>(millions)</span></th><th>Market share</th><th>Annual growth</th>
                </tr>
                <tr>
                    <td>Android</td><td>237.7</td><td>48.8%</td><td>244%</td></tr>
                <tr>
                    <td>iOS</td><td>93.1</td><td>19.1%</td><td>96%</td>
                </tr>
                <tr>
                    <td>Symbian</td><td>80.1</td><td>16.4%</td><td>-29.1%</td>
                </tr>
                <tr>
                    <td>BlackBerry</td><td>51.4</td><td>10.5%</td><td>5%</td>
                </tr>
                <tr>
                    <td>Bada</td><td>13.2</td><td>2.7%</td><td>183.1%</td>
                </tr>
                <tr>
                    <td>Windows Phone</td><td>6.8</td><td>1.4%</td><td>-43.3%</td>
                </tr>
                <tr>
                    <td>Others</td><td>5.4</td><td>1.1%</td><td>14.4%</td>
                </tr>
                <tr>
                    <td>Total</td><td>487.7</td><td>100%</td><td>62.7%</td>
                </tr>
            </table>
            <div class="right small">according to Canalys</div>
        </q>
    </div>

    <div class="step slide first" data-x="692" data-y="1600" data-rotate="480">
        <q>The good news - WebKit is predominant</q>
    </div>

    <div class="step slide hidden last" data-x="692" data-y="1600" data-rotate="480">
        <q>
            The good news - WebKit is predominant<br/><br/>
            <div class="flyin">The bad news - implementations vary a lot.</div>
        </q>
    </div>

    <div class="step slide" data-x="692" data-y="2400" data-rotate="600">
        <q class="no-height">
            <div class="center note" style="padding-bottom: 10px">Support of some WebKit features across different mobile operating systems</div>
            <table class="infotable centered">
                <tr>
                    <th>Feature</th><th>Android</th><th>iOS</th><th>BlackBerry OS</th>
                </tr>
                <tr>
                    <td>HTML5 Forms</td><td>X</td><td>5+</td><td>+</td>
                </tr>
                <tr>
                    <td>SVG</td><td>3+</td><td>+</td><td>+</td>
                </tr>
                <tr>
                    <td>Masks</td><td>mostly work</td><td>+</td><td>+ (except 7.0)</td>
                </tr>
                <tr>
                    <td>3D Transforms</td><td>4+ (broken in 3)</td><td>+</td><td>PBOS 2+</td>
                </tr>
                <tr>
                    <td>WebGL</td><td>X</td><td>X (except ads)</td><td>PBOS 2+</td>
                </tr>
            </table>
        </q>
    </div>

    <div class="step slide" data-x="346" data-y="3000" data-rotate="720">
        <q class="no-height">
            <span class="gray-title">Escape route:</span>
            <strong>
                Test everything you create,<br/>
                on every device you can get<br/>
                your hands on!
            </strong>
        </q>
    </div>

    <div class="step slide weeping" data-x="1038" data-y="3000" data-rotate="840">
        <q class="no-height">
            The hidden monsters of the mobile Web
            <ul class="list">
                <li>Slow performance</li>
                <li>Broken rendering</li>
                <li>Missing events</li>
                <li>Freezes and crashes</li>
            </ul>
        </q>
    </div>

    <div class="step slide" data-x="3114" data-y="3000" data-rotate="960">
        <h1>
            <span>Use the <br /><strong>translatez(0)</strong>,<br /> Luke!</span>
        </h1>
    </div>

    <div class="step slide attacking" data-x="2422" data-y="3000" data-rotate="1080">
        <div class="center middle">
            -webkit-transform: translatez(0)<br/>
            is the new zoom: 1;
            <ul class="list">
                <li>Sometimes can lead to worse performance</li>
                <li>Can break the rendering of masks</li>
                <li>May be not enough for hardware acceleration</li>
                <li>May lead to artifacts</li>
                <li>Breaks form elements on Android</li>
                <li>Not working at all in Android 2</li>
            </ul>
        </div>
    </div>

    <div class="step slide" data-x="2076" data-y="2400" data-rotate="1200">
        <h1>Performance Degradation</h1>
    </div>

    <div class="step slide" data-x="2076" data-y="1600" data-rotate="1320">
        <q class="no-height">
            <span class="gray-title">Scenario:</span><br/>
            Large list, higher than the screen,<br/>
            custom scroller.<br/>
            <br/>
            <span class="gray-title">Outcome:</span><br/>
            Bad perfomance, visible redraw,<br/>
            flickering.
        </q>
    </div>

    <div class="step slide" data-x="2076" data-y="800" data-rotate="1440">
        <q class="no-height">
            <span class="gray-title">Escape route:</span>
            <strong>Mind the size of your<br/>
            accelerated elements.</strong>
        </q>
    </div>

    <div class="step slide" data-x="2076" data-y="0" data-rotate="1560">
        <h1>Fair & Square</h1>
    </div>

    <div class="step slide" data-x="2422" data-y="-600" data-rotate="1680">
        <q class="no-height">
            <span class="gray-title">Scenario:</span><br/>
            Hardware accelerated element,<br/>
            WebKit masks aplenty.<br/>
            <br/>
            <span class="gray-title">Outcome:</span><br/>
            Every mask turns into<br/>
            colored rectangle.
        </q>
        <div class="bottom center note" style="bottom: 100px;">
            <a href="http://bit.ly/PZq4VE">Demo: http://bit.ly/PZq4VE</a><br/><br/>
        </div>
    </div>

    <div class="step slide" data-x="3114" data-y="-600" data-rotate="1800">
        <q class="no-height">
           <span class="gray-title">Escape route:</span><br/>
           Take extra care where you apply
           masks and transforms, never on the same element.
        </q>
    </div>

    <div class="step slide" data-x="3806" data-y="-600" data-rotate="1920">
        <h1>The Forbidden Fruit</h1>
    </div>

    <div class="step slide" data-x="4152" data-y="0" data-rotate="2040">
        <q class="no-height">
            <span class="gray-title">Scenario:</span><br/>
            Hardware acceleration triggers<br/>
            have stopped working.
            <br/>
            <span class="gray-title">Outcome:</span><br/>
            Bad performance, flickering
        </q>
    </div>

    <div class="step slide" data-x="4152" data-y="800" data-rotate="2160">
        <q class="no-height">
           <span class="gray-title">Walkaround:</span><br/>
           <div style="font-size: 30px; line-height: 40px;">
               Apply a 1ms or less transition<br/>
               on the transformed element,<br/>
               make sure it won't activate accidentaly<br/>
               <span class="note italic">(use <strong>-webkit-transition-property</strong> to limit it)</span>.
           </div>
        </q>
    </div>

    <div class="step slide" data-x="4152" data-y="1600" data-rotate="2280">
        <h1>Working in Secret</h1>
    </div>

    <div class="step slide" data-x="4152" data-y="2400" data-rotate="2400">
        <q class="no-height">
            <span class="gray-title">Scenario:</span><br/>
            Open a new Activity, containing<br/>
            another WebKit. Close it.
            <br/>
            <span class="gray-title">Outcome:</span><br/>
            All transformed elements freeze,
            app still works down under.
        </q>
    </div>

    <div class="step slide" data-x="3806" data-y="3000" data-rotate="2520">
        <q class="no-height">
           <span class="gray-title">Walkaround:</span><br/>
           If you run into this issue,<br/>
           <strong>remove</strong> the transforms<br/>
           <strong>before</strong> opening the new Activity.
         </q>
    </div>

    <div class="step slide" data-x="6574" data-y="3000" data-rotate="2640">
        <h1>DeFormed</h1>
    </div>

    <div class="step slide" data-x="5882" data-y="3000" data-rotate="2760">
        <q class="no-height">
            <span class="gray-title">Scenario:</span><br/>
            You want to use an<br/>
            HTML5 date/time picker.<br/>
            <br/>
            <span class="gray-title">Outcome:</span><br/>
            Not supported everywhere.
        </q>
    </div>

    <div class="step slide" data-x="5536" data-y="2400" data-rotate="2880">
        <q class="no-height">
           <span class="gray-title">Escape route:</span><br/>
            Use external libraries<br/>
            if you really need the pickers,<br/>
            or alternatively fall back<br/>
            to text and validate your input.
         </q>
    </div>

    <div class="step slide" data-x="5536" data-y="1600" data-rotate="3000">
        <q class="no-height">
            <span class="gray-title">Scenario:</span><br/>
            Style the input focused state<br/>
            in Android default browser.<br/>
            <br/>
            <span class="gray-title">Outcome:</span><br/>
            White background and black text.
        </q>
        <div class="bottom center note" style="bottom: 100px;">
            <a href="http://bit.ly/PGMiKS">Demo: http://bit.ly/PGMiKS</a><br/><br/>
        </div>
    </div>

    <div class="step slide" data-x="5536" data-y="800" data-rotate="3120">
        <q class="no-height">
           <span class="gray-title">Walkaround:</span><br/>
            Use this CSS, with a trade-off:<br/>
            <br/>
            <div style="font-size: 24px; line-height: 36px;">input[type=text], ...<br/>
                {<br/>
                &nbsp;&nbsp;&nbsp;&nbsp;-webkit-user-modify: read-write-plaintext-only;<br/>
                }
            </div>
         </q>
    </div>

    <div class="step slide" data-x="5536" data-y="0" data-rotate="3240">
        <q class="no-height">
            However, this fake native input is<br/>
            Android browser's way of <br/>
            fixing text entry issues.<br/>
            If invisible, bad things start to happen.
        </q>
    </div>

    <div class="step slide" data-x="5882" data-y="-600" data-rotate="3360">
        <h1>History Lessens</h1>
    </div>

    <div class="step slide" data-x="6574" data-y="-600" data-rotate="3480">
        <q class="no-height">
            <span class="gray-title">Scenario:</span><br/>
            Single Page Application.<br/>
            <br/>
            <span class="gray-title">Outcome:</span><br/>
            Navigation doesn't work<br/>
            correctly, refresh failing.
        </q>
    </div>

    <div class="step slide" data-x="7266" data-y="-600" data-rotate="3600">
        <q class="no-height">
            <span class="gray-title">Escape route:</span><br/>
            Better resort to hashes<br/>
            for mobile single page applications' history.
        </q>
    </div>

    <div class="step slide" data-x="7612" data-y="0" data-rotate="3720">
        <h1>Labeling Jars</h1>
    </div>

    <div class="step slide" data-x="7612" data-y="800" data-rotate="3840">
        <q class="no-height">
            <span class="gray-title">Scenario:</span><br/>
            Click a label to focus<br/>
            its associated input.<br/>
            <br/>
            <span class="gray-title">Outcome:</span><br/>
            Nothing happens.
        </q>
        <div class="bottom center note" style="bottom: 100px;">
            <a href="http://bit.ly/UJOaEF">Demo: http://bit.ly/UJOaEF</a><br/><br/>
        </div>
    </div>

    <div class="step slide" data-x="7612" data-y="1600" data-rotate="3960">
        <q class="no-height">
           <span class="gray-title">Walkaround:</span><br/>
            Add empty onclick attribute to the label or its container.
         </q>
    </div>

    <div class="step slide" data-x="7612" data-y="2400" data-rotate="4080">
        <h1>Redraw Alone</h1>
    </div>

    <div class="step slide" data-x="6920" data-y="2400" data-rotate="4200">
        <q class="no-height">
            <span class="gray-title">Scenario:</span><br/>
            Show an element,<br/>
            run a transition on it.<br/>
            <br/>
            <span class="gray-title">Outcome:</span><br/>
            The element shows directly<br/>
            with its final CSS.
        </q>
        <div class="bottom center note" style="bottom: 100px;">
            <a href="http://bit.ly/SD95fd">Demo: http://bit.ly/SD95fd</a><br/><br/>
        </div>
    </div>

    <div class="step slide" data-x="7266" data-y="3000" data-rotate="4320">
        <q class="no-height">
           <span class="gray-title">Walkaround:</span><br/>
            with jQuery it boils down to this:
            <div style="font-size: 24px; line-height: 36px; padding-top: 20px;">
                element.css("display", "block").css("display");<br/>
                <br/>
            </div>
                or without:
            <div style="font-size: 24px; line-height: 36px; padding-top: 20px;">
                element.style.display = "block";<br/>
                element.offsetWidth;
            </div>
         </q>
    </div>

    <div class="step slide" data-x="7612" data-y="3600" data-rotate="4440">
        <h1>The End</h1>
        <div class="bottom center note" style="bottom: 100px;">
            <a href="http://bundyo.github.com/fix_mobile_web/">http://bundyo.github.com/fix_mobile_web/</a><br/><br/>
            <a href="http://www.kendoui.com/">http://www.kendoui.com</a><br/><br/>
        </div>
    </div>
</div>

<script src="js/impress.js"></script>
<script>impress().init();</script>

</body>
</html>