Your SlideShare is downloading. ×
Mobile Web Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile Web Development

2,651

Published on

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

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
2,651
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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">
  • 9. ConvertBot
  • 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. Going Native
  • 12. Why go Native? Access to native hardware and other applications Camera, Address Book, Filesystem Streamlined Revenue Process
  • 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. Other Experiences
  • 15. Other Experiences The world isn’t made of smart phones How can we streamline the process for less- capable phones?
  • 16. MobifyMe
  • 17. MobifyMe Allows for selective content Compresses Code Resizes and compresses images
  • 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. 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. Questions? Hit me with your best shot. Fire away.

×