Mobile Web
Download as PPT, PDF4 likes588 views
The document discusses four methods for mobile web development: 1) Do nothing and let browsers adapt content, 2) Reduce images and styling, 3) Use handheld style sheets, and 4) Create separate mobile content. It also covers challenges like small screens, latency issues, and the need for device detection. Key technologies mentioned include WURFL for device capability detection and WALL for delivering optimized content. The document advocates for mobile Ajax to provide rich apps without downloads, and lists browsers and frameworks that support it.
![Questions and Feedback About me – Ankit Maheshwari Co-Founder of Instablogs Network ( www.instablogs.com ) Email – [email_address] Mob: - 91-9816664449](https://image.slidesharecdn.com/mobile-web-120021353042039-4/85/Mobile-Web-20-320.jpg)
Mobile Web
- 2. 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.
- 3. 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.
- 4. Four Methods for Mobile Web 3. Use Handheld Stylesheets <link href=“handheld.css” rel=“stylesheet” type=“text/css” media=“handheld”>
- 5. Four Methods for Mobile 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 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
- 9. 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.
- 10. 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.
- 11. 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)
- 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("something"); ) • 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 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)
- 15. 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
- 16. 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
- 17. 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…
- 18. 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.
- 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 Feedback About me – Ankit Maheshwari Co-Founder of Instablogs Network ( www.instablogs.com ) Email – [email_address] Mob: - 91-9816664449