Mobile Website Development

MOBILE WEBSITE DEVELOPMENT
Mobile Boot Camp
Presented by:
Michael Wakahe
Tawi Commercial Services Ltd
Nov 18th 2010

Table of Contents
Copyright © Tawi Commercial Services Ltd.
2015. All Rights Reserved.
 The Need for Mobile Web
 Mobile Web History
 Mobile Web Standards
 Comparison with Desktop & Mobile Apps
 Best Practices

The Need for Mobile Web
 Limitations of mobile phones
 Limited Processor Power and Memory
 Limited Battery Life
 Limited Input and Output Facilities
 Low Bandwidth
 Unpredictable Availability and Stability

The Need for Mobile Web
 TCP/IP protocol suite was not designed for a
wireless environment
 Bandwidth resource is expensive
 HTML pages are not suitable for use in mobile
devices with limited processor power and
screen.

Mobile Web History
 Wireless Application Protocol (WAP) Forum was
founded in 1997 by Ericsson, Motorola, Nokia, and
Phone.com.
 WAP 1.1 was published in 1999
 WAP 2.0 was published in 2001

Mobile Web History
 In 2002, the WAP Forum consolidated into the Open
Mobile Alliance (OMA) and the specification work
from WAP continues within OMA

Mobile Web History
 WAP is designed with two main goals
 to minimize bandwidth requirement
 to maximize the number of supported network
types (e.g., 9.6 Kbps in GSM).

Mobile Web History
 WAP protocol stack is a lightweight protocol stack
that is designed to address the limitations of wireless
devices and the wireless network.
 To access ordinary web servers, WAP-enabled mobile
devices can rely on a WAP gateway to provide
protocol conversion between WWW protocol stack
and WAP protocol stack.

Mobile Web History
 WAP tries to utilize existing Internet protocols and
standards as much as possible
 For example XML, HTML, HTTP & TLS

Mobile Web History
 To reduce transmission time, WAP uses binary-coded
WML (wireless markup language) pages.
 Also WAP specifies a caching model and user agent
profile (UAProf) for efficient delivery of device-
specific content.

Mobile Web History
<wml>
<card id=“Card1" title="First Card">
<p>
Hello World!
</p>
</card>
<card id="Card2" title="Second Card">
<p>
WAP is fun!
</p >
</card>
</wml>

Mobile Web Standards
 Various standards involved in:
 Structure
 Presentation
 Client Side Scripting

 XML-formatted markup defines the document
structure
 Handsets may support WML, XHTML, HTML4, HTML5
in varying degrees
 These XML standards have various versions &
derivations

 Cascading Style Sheets (CSS) control the
presentation.
 Most XHTML-MP mobile browsers support Wireless
CSS, CSS Mobile Profile, and/or CSS 2.
 CSS 3 is new, coming along with HTML5

 Client-side scripting mainly through Javascript
 ECMAScript-MP or mobile JavaScript targets mobile
phones
 WMLScript is a scripting language which
complements WML.

 XHTML-MP (Extensible Hypertext Markup Language -
Mobile Profile) is a specialization XHTML designed to
incorporate features useful to mobile devices.
 XHTML-MP 1.0 was defined by the OMA and is
currently (2010) the best markup choice for HTML-
capable mobile browsers.

 Over time, OMA has developed XHTML-MP and now
has a proposed 1.2 version of its specification.
 XHTML-MP comes with a mobile-friendly means of
using CSS to separate presentation from the markup,
just like on the desktop.

Comparison with Desktop &
Mobile Apps
 Client side scripting (like Javascript, Java applets) &
AJAX usually not possible
 Does not require installation unlike apps; many
feature phones & smart phones have in-built
browsers
 Minimal or no client side caching

Comparison with Desktop &
Mobile Apps
 Mobile websites require much greater developer
understanding & attention to detail than Desktop
 Also may require use of proprietary technologies e.g.
for Content Adaptation

Best Practices
 While building the mobile information architecture,
think about users’ “click investment”
 You might also want to have condensed versions of
the stories.
 When presenting the information on a mobile device
you will probably want to change the navigation
structure

Best Practices
Figure: Desktop
Browser
Website

Best Practices
Figure: Mobile
Browser Website

Best Practices
Figure: Desktop
Web Page
Navigation

Best Practices
Figure: Mobile
Web Page
Navigation

Best Practices
 Content Adaptation – changing content to suit
mobiles
 A .mobi domain is recommended as a clear way to
indicate to the user that a site is mobile-friendly
 .mobi.ke is controlled by Kenic – in charge of country
code top-level domain (ccTLD) for Kenya

References
 Cremin R., Rabin, J., Fling B., Robinson D. K. (2007). DotMobi Mobile Web
Developer Guide. Dublin 1, Ireland: mobile Top Level Domain.
 Mehta N., (2008). Mobile Web Development: Building mobile websites,
SMS and MMS messaging, mobile payments, and automated voice call
systems with XHTML MP, WCSS, and mobile AJAX. Birmingham, B27 6PA,
UK: Packt Publishing
 Frederick G.R., Lal R., (2009). Beginning Smartphone Web Development:
Building JavaScript, CSS, HTML and Ajax-based Applications for iPhone,
Android, Palm Pre, BlackBerry, Windows Mobile, and Nokia S60. United
States of America: Paul Manning

The End
Michael Wakahe
michael@tawi.mobi
+254 (0) 20 239 3052
www.tawi.mobi

Mobile Website Development

More Related Content

What's hot

Similar to Mobile Website Development

More from tawi123

Recently uploaded

Mobile Website Development