Mobile Web Development

4,253 views
4,163 views

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
4,253
On SlideShare
0
From Embeds
0
Number of Embeds
19
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.

×