mobile website development

MOBILE WEBSITE DEVELOPMENTMobile Boot Camp

Presented by:Michael WakaheTawi Commercial Services LtdNov 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



Limitations of mobile phones

Limited Processor Power and Memory

Limited Battery Life

Limited Input and Output Facilities

Low Bandwidth

Unpredictable Availability and Stability



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>



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.



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



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 [email protected]+254 (0) 20 239 3052

www.tawi.mobi

mailto:[email protected]

http://www.tawi.mobi/

mobile website development

Education