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...
Media Queries
<link	
  href="mobile.css"	
  rel="stylesheet"
	
  	
  	
  media="only	
  screen	
  and	
  (max-­‐device-­‐w...
Viewport
<meta	
  name="viewport"	
  content="width=device-­‐
width">
<meta	
  name="viewport"	
  content="width=590">
<me...
Creating an App-like experience
<link	
  rel="apple-­‐touch-­‐icon"	
  href="icon.png">
<meta	
  name="apple-­‐mobile-­‐we...
Input Features
<input	
  autocorrect="on">	
  <!-­‐-­‐	
  or	
  “off”	
  -­‐-­‐>
<input	
  placeholder="Example	
  Text">
...
ConvertBot
Sencha Touch (nee jQTouch)
 Designed for iPhone and Android
 Includes enhanced touch events
 Allows for rapid development
...
Going Native
Why go Native?
 Access to native hardware and other applications
 Camera, Address Book, Filesystem
 Streamlined Revenue Pr...
PhoneGap and Titanium
 Titanium Mobile targets iPhone and Android
 PhoneGap targets iPhone, Android, Palm, Symbian
 and Bl...
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 t...
Rewrite Conditions
RewriteCond	
  %{HTTP:X-­‐OperaMini-­‐Features}	
  	
  	
  !=""	
  [NC,OR]
RewriteCond	
  %{HTTP:X-­‐Op...
Questions?
Hit me with your best shot. Fire away.
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Mobile Web Development
Upcoming SlideShare
Loading in...5
×

Mobile Web Development

3,648

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,648
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Mobile Web Development

  1. 1. Narrowing the Context Rocking iPhone and Android development
  2. 2. What I won’t be talking about
  3. 3. What I will be talking about
  4. 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. 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. 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. 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. 8. Input Features <input  autocorrect="on">  <!-­‐-­‐  or  “off”  -­‐-­‐> <input  placeholder="Example  Text"> <input  type="email"> <input  type="url"> <input  type="number"> <input  type="search">
  9. 9. ConvertBot
  10. 10. 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?
  11. 11. Going Native
  12. 12. Why go Native? Access to native hardware and other applications Camera, Address Book, Filesystem Streamlined Revenue Process
  13. 13. 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/
  14. 14. Other Experiences
  15. 15. Other Experiences The world isn’t made of smart phones How can we streamline the process for less- capable phones?
  16. 16. MobifyMe
  17. 17. MobifyMe Allows for selective content Compresses Code Resizes and compresses images
  18. 18. 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
  19. 19. 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]
  20. 20. Questions? Hit me with your best shot. Fire away.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×