Mobile Web 2.0
Four Methods for Mobile Web   1.  Do Nothing Create a site following Web Standard and let browsers do Content adaptation for mobile devices. Some browsers like iPhone Safari, S60 3 rd  Edition Reindeer or Opera Mobile are quite capable.
Four Methods for Mobile Web   2.  Reduce Images and Styling You can reduce presentational styling and images on the fly. Several resources available do the job for you. For eg. Mowser. Skweezer, Google Mobile, Feedm8, Opera Mini.
Four Methods for Mobile Web   3.  Use Handheld Stylesheets <link href=“handheld.css” rel=“stylesheet” type=“text/css” media=“handheld”>
Four Methods for Mobile Web   4.  Create Separate Mobile Content Requires good amount of work but pays you in the long run.
Good News •  WAP (WAP 1.0) is dead. •  WAP 2.0 == subset of XHTML •  Most new age phones have HTML/XHTML Browsers •  Online Services are replacing Desktop Applications. It can be applied to Mobile World as well. •  Cell phones are selling 4 to 5 times faster than PCs.
Bad News   •  Small Screens •  Power consumption and battery drainage •  Greedy Mobile Operators still charge per KB for download •  Many unsupportive browsers and platforms. •  XHR request absent in many browsers. •  Latency SUCKS big time.
Device Detection Create mobile specific address like  instablogs.mobi Subdomains like  m.instablogs.com  can also be used But you still need to detect the device and redirect the user to right page
WURFL Wireless Universal Resource File is an XML configuration file which contains information about device capabilities and features for a variety of mobile devices.  Device information is contributed by developers around the world.
WALL WALL (Wireless Abstraction Library by Luca Passani) is a  JSP   tag library  that lets a developer author mobile pages similar to plain HTML, while delivering  WML ,  C-HTML  and  XHTML Mobile Profile  to the device from which the  HTTP request  originates, depending on the actual capabilities of the device itself.  Device capabilities are queried dynamically using the WURFL API. A WALL port to PHP (called WALL4PHP) is also available.
What is Mobile Ajax (MAjax) •  Ajax on Mobile Web •  A very small subset of Web Ajax •  A way to provide Rich Internet Apps on Mobile •  The website/application is completely browser based – no software to download. •  Using the power of Ajax to manage data,  reducing latency ,  loading time  and  increases response time . •  Disruptive power of Ajax (Ajit Jaokar)
Why Mobile Ajax •  Browser based application as easier to update. Client doesn’t need to download anything. •  You don`t need to care about Operators. (except for data plans) •  Data plans are becoming very affordable. •  Smart phones with intelligent browsers are fast becoming the norm. •  Coding for the Web is easier and cost-efficient than using proprietary, platform-specific technologies.
Mobile Ajax Checklist   •  Javascript support  ( Should be able to do  document.write(&quot;something&quot;);  ) •  getElementById  - read and change •  DOM - Document Object Model or at least  innerHTML  support on DIV elements (read and write) •  XMLHttpRequest or ActiveXObject
Mobile Browsers supporting Ajax  •  Opera Mobile (>= 8.x, not Opera Mini) • IE Mobile (WM 5.0/2003) • S60 3rd ed. (WebKit/KHTML core) • Minimo (Mozilla based) • OpenWave (>=Mercury) • NetFront (>=3.4) • Safari Mobile (iPhone)
JavaScript Toolkits /Frameworks Impossible to use existing JavaScript toolkits for mobile web applications Too big in size Unnecessary overload of functions which you are not going to use e.g.  Drag and Drop Were made keeping in mind Desktop Browsers not Mobile Browsers
Available Solutions Frost Ajax Library (still in pre-alpha) YUI  and DOJO frameworks support few A-grade browsers Needed cross-browser Ajax support on different platforms support weakest browser capable of Ajax small size (<7-10KB)  limited functionality in core
Running Ajax In Constrained Browsers <a href=“page2.html&quot;    onclick=&quot;return !getData();&quot;> request data</a> <div id=“container&quot;>New Data can be updated here</div> Cont…
Running Ajax In Constrained Browsers (2) If  getData()  returns  true  (meaning it was able to do whatever it does) then the link's  onclick  will return  false , causing the browser not to follow the  href  attribute If  getData()  returns  false  (eg because a necessary JavaScript method was not found) then the return value &quot;true&quot; of the  onclick  attribute causes the link to be followed as if there had never been an  onclick  attribute.
Bibliography Ajit Jaokar, Bryan Rieger, Rocco Georgi: Mobile Ajax FAQ:  http://www.pavingways.com/mobile-ajax/mobile-ajax-faq http://dev.opera.com/articles/view/mobile-ajax-and-the-frost-ajax-library/ Cameron Moll (Mobile Web Book)
Questions and Feedback About me –  Ankit Maheshwari  Co-Founder of Instablogs Network ( www.instablogs.com )  Email –  [email_address] Mob: - 91-9816664449

Mobile Web

  • 1.
  • 2.
    Four Methods forMobile Web 1. Do Nothing Create a site following Web Standard and let browsers do Content adaptation for mobile devices. Some browsers like iPhone Safari, S60 3 rd Edition Reindeer or Opera Mobile are quite capable.
  • 3.
    Four Methods forMobile Web 2. Reduce Images and Styling You can reduce presentational styling and images on the fly. Several resources available do the job for you. For eg. Mowser. Skweezer, Google Mobile, Feedm8, Opera Mini.
  • 4.
    Four Methods forMobile Web 3. Use Handheld Stylesheets <link href=“handheld.css” rel=“stylesheet” type=“text/css” media=“handheld”>
  • 5.
    Four Methods forMobile Web 4. Create Separate Mobile Content Requires good amount of work but pays you in the long run.
  • 6.
    Good News • WAP (WAP 1.0) is dead. • WAP 2.0 == subset of XHTML • Most new age phones have HTML/XHTML Browsers • Online Services are replacing Desktop Applications. It can be applied to Mobile World as well. • Cell phones are selling 4 to 5 times faster than PCs.
  • 7.
    Bad News • Small Screens • Power consumption and battery drainage • Greedy Mobile Operators still charge per KB for download • Many unsupportive browsers and platforms. • XHR request absent in many browsers. • Latency SUCKS big time.
  • 8.
    Device Detection Createmobile specific address like instablogs.mobi Subdomains like m.instablogs.com can also be used But you still need to detect the device and redirect the user to right page
  • 9.
    WURFL Wireless UniversalResource File is an XML configuration file which contains information about device capabilities and features for a variety of mobile devices. Device information is contributed by developers around the world.
  • 10.
    WALL WALL (WirelessAbstraction Library by Luca Passani) is a JSP tag library that lets a developer author mobile pages similar to plain HTML, while delivering WML , C-HTML and XHTML Mobile Profile to the device from which the HTTP request originates, depending on the actual capabilities of the device itself. Device capabilities are queried dynamically using the WURFL API. A WALL port to PHP (called WALL4PHP) is also available.
  • 11.
    What is MobileAjax (MAjax) • Ajax on Mobile Web • A very small subset of Web Ajax • A way to provide Rich Internet Apps on Mobile • The website/application is completely browser based – no software to download. • Using the power of Ajax to manage data, reducing latency , loading time and increases response time . • Disruptive power of Ajax (Ajit Jaokar)
  • 12.
    Why Mobile Ajax• Browser based application as easier to update. Client doesn’t need to download anything. • You don`t need to care about Operators. (except for data plans) • Data plans are becoming very affordable. • Smart phones with intelligent browsers are fast becoming the norm. • Coding for the Web is easier and cost-efficient than using proprietary, platform-specific technologies.
  • 13.
    Mobile Ajax Checklist • Javascript support ( Should be able to do document.write(&quot;something&quot;); ) • getElementById - read and change • DOM - Document Object Model or at least innerHTML support on DIV elements (read and write) • XMLHttpRequest or ActiveXObject
  • 14.
    Mobile Browsers supportingAjax • Opera Mobile (>= 8.x, not Opera Mini) • IE Mobile (WM 5.0/2003) • S60 3rd ed. (WebKit/KHTML core) • Minimo (Mozilla based) • OpenWave (>=Mercury) • NetFront (>=3.4) • Safari Mobile (iPhone)
  • 15.
    JavaScript Toolkits /FrameworksImpossible to use existing JavaScript toolkits for mobile web applications Too big in size Unnecessary overload of functions which you are not going to use e.g. Drag and Drop Were made keeping in mind Desktop Browsers not Mobile Browsers
  • 16.
    Available Solutions FrostAjax Library (still in pre-alpha) YUI and DOJO frameworks support few A-grade browsers Needed cross-browser Ajax support on different platforms support weakest browser capable of Ajax small size (<7-10KB) limited functionality in core
  • 17.
    Running Ajax InConstrained Browsers <a href=“page2.html&quot; onclick=&quot;return !getData();&quot;> request data</a> <div id=“container&quot;>New Data can be updated here</div> Cont…
  • 18.
    Running Ajax InConstrained Browsers (2) If getData() returns true (meaning it was able to do whatever it does) then the link's onclick will return false , causing the browser not to follow the href attribute If getData() returns false (eg because a necessary JavaScript method was not found) then the return value &quot;true&quot; of the onclick attribute causes the link to be followed as if there had never been an onclick attribute.
  • 19.
    Bibliography Ajit Jaokar,Bryan Rieger, Rocco Georgi: Mobile Ajax FAQ: http://www.pavingways.com/mobile-ajax/mobile-ajax-faq http://dev.opera.com/articles/view/mobile-ajax-and-the-frost-ajax-library/ Cameron Moll (Mobile Web Book)
  • 20.
    Questions and FeedbackAbout me – Ankit Maheshwari Co-Founder of Instablogs Network ( www.instablogs.com ) Email – [email_address] Mob: - 91-9816664449