A look into developing HTML-based web sites and applications targetting mobile platforms.

1. Narrowing the Context
Rocking iPhone and Android development

2. What I won’t be
talking about

3. What I will be
talking about

4. Mobile Safari
Local 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)

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

6. 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">

7. 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">

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

10. ConvertBot

11. 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?

12. Going Native

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

14. 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/

15. Other Experiences

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

17. MobifyMe

18. MobifyMe
Allows for selective content
Compresses Code
Resizes and compresses images

23. 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

24. 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]

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