Mobile Web 2.0

Four Methods for

Mobile Web

1. Do NothingCreate a site following Web Standard and let browsers do Content adaptation for mobile devices.

Some browsers like iPhone Safari, S60 3rd Edition Reindeer or Opera Mobile are quite capable.

Four Methods for

Mobile Web

2. Reduce Images and StylingYou 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 ContentRequires 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("something"); )

• 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" onclick="return !getData();">

request data</a>

<div id=“container">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 "true" 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 – ankit@instablogs.com

• Mob: - 91-9816664449