rwd_presentation

Opportunities/Challenges in Mobile Development

gm90

Challenges
Options
Opportunities
Tools

Challenges

Multiple devices (Samsung, Apple, HTC, RIM, Chromecast + many more)
Multiple OS's (Android, iOS, Windows, Symbian, Kindle, etc..)

On top of that.....we need to cater for

No hover event
Connectivity, Speed (Edge, 3G, 4G), Data Limits
Lack/Excess screen estate
Running out of time to react, HMV

Options

Despite all this we have many options to overcome the complexities

Native vs. WebApp vs. Hybrid

Probably the most widely debated question in mobile development

Native Application

Advantages

High performance
Argument for usability
Increased access to devices capabilities
Can integrate heavily with the devices' operating system

Disadvantages

Massively costly
Maintenance is extremely difficult
Different code base and language for each platform (will continue to change)
Potentially restrained by approval process (Apple)

Web Application

Advantages

HTML5 Support is very good
CSS/SASS/LESS is becoming increasingly powerful
Javascript has seen significant speed increases over the past few years (V8, Nitro)
Integration with stock applications isimproving (Camera - WebRTC, GPS, Contacts)
Can be saved to device as if it were a native app

Disadvantages

Perceived low performance (specifically related to gaming)
Look and feel not inline with device
Limited access to device capabilities

Hybrid Application

A hybrid application consists of an application written in web standards contained within a wrapper that provides full access to the devices native capabilities via a javascript API

PhoneGap/Apache CordovaTitanium

Hybrid Application

Advantages

Continue to use web standards so the majority of your codebase is standard across all devices
Provides extended access into the device
Phonegap Build tool can provide an automated service to build your web application inside a packaged wrapper

Disadvantages

Depending on your requirements maybe overkill

Opportunities

The good news is that mobile development opens up a wealth of new opportunities

Access anywhere
Offline/Online
Geolocation
Accellerometer
Instant messaging/Communication
Video
VIP
Augmented reality

Tools

Tools that make our lives easier

Viewport/Meta tags

    <!-- Sets viewport to be the width of the device, also prevents zooming -->
    <meta name="viewport" content="width=device-width, user-scalable=false;">

    <!-- IE10 version -->
    @viewport{
        zoom: 1.0;
        width: extend-to-zoom;
    }

    <!-- Allow app to be set up as standalone in iOS. Android requires a javascript solution -->
    <meta name="apple-mobile-web-app-capable" content="yes">

Always consider whether disable zooming is absolutely necessary. If you wish to prevent zooming it maybe a good idea to provide functionality to increase text size. Example without viewport Example with viewport

Internal links

    <!-- Disable automatic linking in iOS and Android -->
    <meta name="format-detection" content="telephone=no">

    <!-- Telephone Links -->
    <a href="tel://0207 456 4577">Ring Motability</a>

    <!-- Mail Links -->
    <a href="mailto:lunch@learn.com?cc=garymc@mo.co.uk&subject=
        Boring&body=Oh%20boy%20this%20presenter%20is%20boring!">Mail</a>

    <!-- SMS message -->
    <a href="sms:1-408-555-1212">New SMS Message</a>

    <!-- Map Links, directions specified by daddr & saddr -->
    <a href="http://maps.apple.com/?daddr=SE1 9HB&saddr=Tower Bridge">Directions</a>
    <!-- Android version -->
    <a href="geo:0,0?q=Tower Bridge">Tower Bridge</a>

Media Queries

    <!-- CSS media query on a link element -->
    <link rel="stylesheet" media="(max-width: 800px)" href="example.css">

    <!-- CSS media query within a style sheet -->
    <style>
        @media (max-width: 600px) {
            .facet_sidebar {
                display: none;
            }
        }
    </style>

Shameless example: Example

Offline Storage

As part of HTML5 offline storage was introduced. This can be utilised so that on first load your entire application is downloaded to the device (25mb max)

    <!--<!DOCTYPE html>
    <html manifest="/cache.manifest">
    <body>
    ...
    </body>
    </html>-->

    CACHE MANIFEST
    
    NETWORK:
    /tracking.cgi
    CACHE:
    /style.css
    /core.js
    /logo.jpg

Offline Storage

Web Frameworks

No need to start from scratch...There are many frameworks available however the two below are most popular. They are generally set up as a one page application, and 'highjack' links to load content via ajax.

Remote debugging (Chrome and Safari)

One of the major difficulties with developing fo mobile is that you don't have access to a full fledged browser with web inspetor installed. As a result recently remote debugging has been added to the webkit browsers.

Opportunities/Challenges in Mobile Development – Challenges – Options

gm90

Opportunities/Challenges in Mobile Development – Challenges – Options

0 0