Mobile Web


Published on

A small presentation presented in MoMo Delhi on how to make rich media, Ajax enabled sites for Mobile Browsers.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Mobile Web

    1. 1. Mobile Web 2.0
    2. 2. <ul><li>Four Methods for Mobile Web </li></ul><ul><li>1. Do Nothing </li></ul><ul><li>Create a site following Web Standard and let browsers do Content adaptation for mobile devices. </li></ul><ul><li>Some browsers like iPhone Safari, S60 3 rd Edition Reindeer or Opera Mobile are quite capable. </li></ul>
    3. 3. <ul><li>Four Methods for Mobile Web </li></ul><ul><li>2. Reduce Images and Styling </li></ul><ul><li>You can reduce presentational styling and images on the fly. </li></ul><ul><li>Several resources available do the job for you. For eg. Mowser. Skweezer, Google Mobile, Feedm8, Opera Mini. </li></ul>
    4. 4. <ul><li>Four Methods for Mobile Web </li></ul><ul><li>3. Use Handheld Stylesheets </li></ul><ul><li><link href=“handheld.css” rel=“stylesheet” type=“text/css” media=“handheld”> </li></ul>
    5. 5. <ul><li>Four Methods for Mobile Web </li></ul><ul><li>4. Create Separate Mobile Content </li></ul><ul><li>Requires good amount of work but pays you in the long run. </li></ul>
    6. 6. <ul><li>Good News </li></ul><ul><li>• WAP (WAP 1.0) is dead. </li></ul><ul><li>• WAP 2.0 == subset of XHTML </li></ul><ul><li>• Most new age phones have HTML/XHTML Browsers </li></ul><ul><li>• Online Services are replacing Desktop Applications. It can be applied to Mobile World as well. </li></ul><ul><li>• Cell phones are selling 4 to 5 times faster than PCs. </li></ul>
    7. 7. <ul><li>Bad News </li></ul><ul><li>• Small Screens </li></ul><ul><li>• Power consumption and battery drainage </li></ul><ul><li>• Greedy Mobile Operators still charge per KB for download </li></ul><ul><li>• Many unsupportive browsers and platforms. </li></ul><ul><li>• XHR request absent in many browsers. </li></ul><ul><li>• Latency SUCKS big time. </li></ul>
    8. 8. <ul><li>Device Detection </li></ul><ul><li>Create mobile specific address like </li></ul><ul><li>Subdomains like can also be used </li></ul><ul><li>But you still need to detect the device and redirect the user to right page </li></ul>
    9. 9. <ul><li>WURFL </li></ul><ul><li>Wireless Universal Resource File is an XML configuration file which contains information about device capabilities and features for a variety of mobile devices. </li></ul><ul><li>Device information is contributed by developers around the world. </li></ul>
    10. 10. <ul><li>WALL </li></ul><ul><li>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. </li></ul><ul><li>Device capabilities are queried dynamically using the WURFL API. A WALL port to PHP (called WALL4PHP) is also available. </li></ul>
    11. 11. <ul><li>What is Mobile Ajax (MAjax) </li></ul><ul><li>• Ajax on Mobile Web </li></ul><ul><li>• A very small subset of Web Ajax </li></ul><ul><li>• A way to provide Rich Internet Apps on Mobile </li></ul><ul><li>• The website/application is completely browser based – no software to download. </li></ul><ul><li>• Using the power of Ajax to manage data, reducing latency , loading time and increases response time . </li></ul><ul><li>• Disruptive power of Ajax (Ajit Jaokar) </li></ul>
    12. 12. <ul><li>Why Mobile Ajax </li></ul><ul><li>• Browser based application as easier to update. Client doesn’t need to download anything. </li></ul><ul><li>• You don`t need to care about Operators. (except for data plans) </li></ul><ul><li>• Data plans are becoming very affordable. </li></ul><ul><li>• Smart phones with intelligent browsers are fast becoming the norm. </li></ul><ul><li>• Coding for the Web is easier and cost-efficient than using proprietary, platform-specific technologies. </li></ul>
    13. 13. <ul><li>Mobile Ajax Checklist </li></ul><ul><li>• Javascript support ( Should be able to do document.write(&quot;something&quot;); ) </li></ul><ul><li>• getElementById - read and change </li></ul><ul><li>• DOM - Document Object Model or at least innerHTML support on DIV elements (read and write) </li></ul><ul><li>• XMLHttpRequest or ActiveXObject </li></ul>
    14. 14. <ul><li>Mobile Browsers supporting Ajax </li></ul><ul><li>• 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) </li></ul>
    15. 15. <ul><li>JavaScript Toolkits /Frameworks </li></ul><ul><li>Impossible to use existing JavaScript toolkits for mobile web applications </li></ul><ul><li>Too big in size </li></ul><ul><li>Unnecessary overload of functions which you are not going to use e.g. Drag and Drop </li></ul><ul><li>Were made keeping in mind Desktop Browsers not Mobile Browsers </li></ul>
    16. 16. <ul><li>Available Solutions </li></ul><ul><li>Frost Ajax Library (still in pre-alpha) </li></ul><ul><li>YUI and DOJO frameworks support few A-grade browsers </li></ul><ul><li>Needed </li></ul><ul><li>cross-browser Ajax support on different platforms </li></ul><ul><li>support weakest browser capable of Ajax </li></ul><ul><li>small size (<7-10KB) </li></ul><ul><li>limited functionality in core </li></ul>
    17. 17. <ul><li>Running Ajax In Constrained Browsers </li></ul><ul><li><a href=“page2.html&quot; onclick=&quot;return !getData();&quot;> </li></ul><ul><li>request data</a> </li></ul><ul><li><div id=“container&quot;>New Data can be updated here</div> </li></ul><ul><li>Cont… </li></ul>
    18. 18. <ul><li>Running Ajax In Constrained Browsers (2) </li></ul><ul><li>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 </li></ul><ul><li>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. </li></ul>
    19. 19. Bibliography <ul><li>Ajit Jaokar, Bryan Rieger, Rocco Georgi: Mobile Ajax FAQ: </li></ul><ul><li> </li></ul><ul><li>Cameron Moll (Mobile Web Book) </li></ul>
    20. 20. Questions and Feedback <ul><li>About me – Ankit Maheshwari </li></ul><ul><li>Co-Founder of Instablogs Network ( ) </li></ul><ul><li>Email – [email_address] </li></ul><ul><li>Mob: - 91-9816664449 </li></ul>