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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Mobile Website Development

Similar to Mobile Website Development (20)

More from tawi123

More from tawi123 (20)

Recently uploaded

Recently uploaded (20)

Mobile Website Development