• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile Web

Mobile Web



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

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



Total Views
Views on SlideShare
Embed Views



3 Embeds 9

http://www.slideshare.net 7
http://webcache.googleusercontent.com 1
http://translate.googleusercontent.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Mobile Web Mobile Web Presentation Transcript

  • 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