Mobile Web Development

Narrowing the ContextRocking iPhone and Android development

What I wonrsquot be talking about

What I will be talking about

Mobile SafariLocal Storage

CSS3 features like transforms transitions and animations

Geolocation

HTML5 forms support for search number and email field types

SVG (well on the iPhone not on Android)

Media Queriesltlink13 href=mobilecss13 rel=stylesheet

13 13 13 media=only13 screen13 and13 (max-shy‐device-shy‐width13 480px)gt

media13 screen13 and13 (max-shy‐device-shy‐width13 480px)13 13

Viewportltmeta13 name=viewport13 content=width=device-shy‐widthgt

ltmeta13 name=viewport13 content=width=590gt

ltmeta13 name=viewport13 content=initial-shy‐scale=13 10gt

ltmeta13 name=viewport13 content=initial-shy‐scale=13 2313 user-shy‐scalable=nogt

Creating an App-like experienceltlink13 rel=apple-shy‐touch-shy‐icon13 href=iconpnggt

ltmeta13 name=apple-shy‐mobile-shy‐web-shy‐app-shy‐capable13 content=yesgt

ltmeta13 name=apple-shy‐mobile-shy‐web-shy‐app-shy‐status-shy‐bar-shy‐style13 content=blackgt

ltlink13 rel=apple-shy‐touch-shy‐icon13 href=app_iconpnggt

ltlink13 rel=apple-shy‐touch-shy‐startup-shy‐image13 href=startuppnggt

Input Featuresltinput13 autocorrect=ongt13 lt-shy‐-shy‐13 or13 ldquooffrdquo13 -shy‐-shy‐gt

ltinput13 placeholder=Example13 Textgt

ltinput13 type=emailgt

ltinput13 type=urlgt

ltinput13 type=numbergt

ltinput13 type=searchgt

ConvertBot

Sencha Touch (nee jQTouch)Designed for iPhone and Android

Includes enhanced touch events

Allows for rapid development

httpwwwsenchacomproductstouch

jQuery Mobile

Going Native

Why go NativeAccess to native hardware and other applications

Camera Address Book Filesystem

Streamlined Revenue Process

PhoneGap and TitaniumTitanium Mobile targets iPhone and Android

PhoneGap targets iPhone Android Palm Symbian and Blackberry

httpwwwappceleratorcom

httpwwwphonegapcom

Other Experiences

Other ExperiencesThe world isnrsquot made of smart phones

How can we streamline the process for less-capable phones

MobifyMe

MobifyMeAllows for selective content

Compresses Code

Resizes and compresses images

Things we can learnWhat are users trying to do

Optimize the experience for the task

Content linearization

Minimize the amount of information being served

Rewrite ConditionsRewriteCond13 HTTPX-shy‐OperaMini-shy‐Features13 13 13 =13 [NCOR]

RewriteCond13 HTTPX-shy‐OperaMini-shy‐Phone13 13 13 13 13 13 =13 [NCOR]

RewriteCond13 HTTPX-shy‐Mobile-shy‐Gateway13 13 13 13 13 13 13 =13 [NCOR]

RewriteCond13 HTTP_ACCEPT13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 ^applicationvndwapxhtml+xml13 [NCOR]

RewriteCond13 HTTP_USER_AGENT13 13 13 13 13 13 13 13 13 13 13 13 13 ^(ipad)13 [NC]

RewriteCond13 HTTP_USER_AGENT13 13 13 13 13 13 13 13 13 13 13 13 13 ^(alcatel|audiovox|au-shy‐mic|avantgo|bolt|blackberry|blazer|cldc-shy‐|danger|dopod|epoc|ericsson|Googles+Wirelesss+Transcoder|htc|huawei|iemobile|ipaq|iphone|ipod|j2me|lg|midp|mobile|mot|moto|motorola|nec-shy‐|netfront|netfront|nitro|nokia|novarra-shy‐vision|operas+mini|palm|palmsource|panasonic|philips|pocketpc|portalmmm|rover|sagem|samsung|sanyo|sec|series60|sharp|sie-shy‐|smartphone|sony|symbian|t-shy‐mobile|untrusted|upbrowser|uplink|vodafone|wap1|wap2|webOS|windowss+ce)13 [NC]

RewriteCond13 REQUEST_FILENAME13 13 13 13 13 13 -shy‐f

RewriteRule13 ^()$13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 httpmsnookca$113 [RL]

QuestionsHit me with your best shot Fire away