Mobile Web Development

Narrowing the Context Rocking iPhone and Android development

What I won’t be talking about

What I will be talking about

Mobile Safari Local Storage CSS3 features like transforms, transitions and animations Geolocation HTML5 forms support for search, number and email ﬁeld types. SVG (well, on the iPhone; not on Android)

Media Queries <link href="mobile.css" rel="stylesheet" media="only screen and (max-‐device-‐width: 480px)"> @media screen and (max-‐device-‐width: 480px) { }

Viewport <meta name="viewport" content="width=device-‐ width"> <meta name="viewport" content="width=590"> <meta name="viewport" content="initial-‐scale= 1.0"> <meta name="viewport" content="initial-‐scale= 2.3, user-‐scalable=no">

Creating an App-like experience <link rel="apple-‐touch-‐icon" href="icon.png"> <meta name="apple-‐mobile-‐web-‐app-‐capable" content="yes"> <meta name="apple-‐mobile-‐web-‐app-‐status-‐bar-‐ style" content="black"> <link rel="apple-‐touch-‐icon" href="app_icon.png"> <link rel="apple-‐touch-‐startup-‐image" href="startup.png">

Input Features <input autocorrect="on"> <!-‐-‐ or “off” -‐-‐> <input placeholder="Example Text"> <input type="email"> <input type="url"> <input type="number"> <input type="search">

ConvertBot

Sencha Touch (nee jQTouch) Designed for iPhone and Android Includes enhanced touch events Allows for rapid development http://www.sencha.com/products/touch/ jQuery Mobile?

Going Native

Why go Native? Access to native hardware and other applications Camera, Address Book, Filesystem Streamlined Revenue Process

PhoneGap and Titanium Titanium Mobile targets iPhone and Android PhoneGap targets iPhone, Android, Palm, Symbian and Blackberry. http://www.appcelerator.com/ http://www.phonegap.com/

Other Experiences

Other Experiences The world isn’t made of smart phones How can we streamline the process for less- capable phones?

MobifyMe

MobifyMe Allows for selective content Compresses Code Resizes and compresses images

Things we can learn What are users trying to do? Optimize the experience for the task Content linearization Minimize the amount of information being served

Rewrite Conditions RewriteCond %{HTTP:X-‐OperaMini-‐Features} !="" [NC,OR] RewriteCond %{HTTP:X-‐OperaMini-‐Phone} !="" [NC,OR] RewriteCond %{HTTP:X-‐Mobile-‐Gateway} !="" [NC,OR] RewriteCond %{HTTP_ACCEPT} ^.*application/vnd.wap.xhtml+xml.* [NC,OR] RewriteCond %{HTTP_USER_AGENT} !^.*(ipad).* [NC] RewriteCond %{HTTP_USER_AGENT} ^.*(alcatel|audiovox|au-‐mic|avantgo| bolt|blackberry|blazer|cldc-‐|danger|dopod|epoc|ericsson|Googles+Wirelesss +Transcoder|htc|huawei|iemobile|ipaq|iphone|ipod|j2me|lg|midp|mobile|mot|moto| motorola|nec-‐|netfront|netfront|nitro|nokia|novarra-‐vision|operas+mini|palm| palmsource|panasonic|philips|pocketpc|portalmmm|rover|sagem|samsung|sanyo|sec| series60|sharp|sie-‐|smartphone|sony|symbian|t-‐mobile|untrusted|up.browser|up .link|vodafone/|wap1.|wap2.|webOS|windowss+ce).* [NC] RewriteCond %{REQUEST_FILENAME} !-‐f RewriteRule ^(.*)$ http://m.snook.ca/$1 [R,L]

Questions? Hit me with your best shot. Fire away.

Mobile Web Development

by Jonathan Snook on Aug 18, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 12

Statistics

Mobile Web Development — Presentation Transcript