Mobile Web Development
Introduction
Challenges of Mobile Development:-
Mobile devices have several limitations
·
Small
screens
·
Limited
input capabilities
·
Limited
processor power and memory
·
Limited
bandwidth
These
limitations have serious implications on the way one should design his/her
mobile site.
The
reason for doing so is simple. The Website owner can reach a dedicated mass
that are always having a specific search. Mobiles are handy, people are always
connected and now we even don't forget to carry them as we don't forget our purse!
Mobile
Web pages are slightly different than standard Web pages. Mobile Web pages will
have smaller content and smaller images. An idle mobile Web page should be
rendered on any mobile device in less than 2 seconds. So we should always limit
the Webpage to a smaller size.
The
Website should be displayed on mostly all GPRS enabled mobile phones, PDAs and
all 1G, 2G and 3G mobile devices. This is a real challenge as you will not find
a common solution for all the devices..
What Changes are required in Order to
Convert a Normal Web Page into a Mobile Web Page?
There
are two things which are important for a mobile browser. You should set both of
them.
1.
DOCTYPE
A DOCTYPE (Document Type Declaration)
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Below is the DOCTYPE declaration for
XHTML MP. You can simply copy and paste it into your XHTML MP files.
<!DOCTYPE
html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">The DOCTYPE declaration specifies the name of the DTD (Document Type Definition) and the URL to the DTD. The DTD contains information about the syntax of the markup language. It defines what elements and attributes can be used in the markup and the rules that they should be used.
Also
instructs the validator which version of the (X)HTML your Web page is using.
You must write it to the very first line of your Web page. It helps to validate
your markup and CSS.
2.
Content Type (MIME Type)
The
following three MIME types can be used for XHTML MP Documents:
1.
application/vnd.wap.xhtml+xml
2.
application/xhtml+xml
3.
text/html
The MIME
type specified by the Open
Mobile Alliance [OMA]
for XHTML MP Documents is "application/vnd.wap.xhtml+xml". This MIME
type is required for some WAP browsers (for example, some Nokia Series 60
browsers) to display XHTML MP Documents correctly.Another choice is the "application/xhtml+xml" MIME type. It is the MIME type for XHTML Family document types.
The "text/html" MIME type is also a possible choice
Which one is correct from a or b depends on the mobile
device. Some devices support a, some supports b and many of them supports both.
The best way is to write a function which checks the Request Headers and then
set the content type accordingly. I have presented that function below:
///
<summary>
///
Function to set the content type dynamically.
///
You need to call this function on each mobile web page.
///
</summary>
public
void setContentTypeDynamically(HttpRequest Request, HttpResponse Response)
{
if(Request.Headers["Accept"].ToString().IndexOf
("application/vnd.wap.xhtml+xml")
!= -1)
Response.ContentType = "application/vnd.wap.xhtml+xml";
else if (Request.Headers["Accept"].ToString().IndexOf
("application/xhtml+xml")
!= -1)
Response.ContentType = "application/xhtml+xml";
else
Response.ContentType = "text/html";
}
The function is fairly easy to understand. It reads the
value of server variable Request.Headers["Accept"]
and
sets the ContentType
of
response object accordingly. Here the order to check the ContentType is important, as many
modern mobile browsers may support all of them!
File Extensions
The file extensions of static XHTML
MP Documents are ".xhtml", ".html" and ".htm"
typically. You can use other file extensions you like, If you are going to use
a server-side technology such as ASPX ,ASP, JSP, Perl, PHP or SSI (Server Side
Includes) to add content to XHTML MP documents dynamically, you may need to
change the file extension of your XHTML MP documents to that used by the
server-side technology. For example, the typical file extension used by PHP is
".php", while that used by SSI is ".shtml".
Images are Special. Render them
According to the Screen Size of a Mobile Device.
The
general width of a mobile device was 255 pixels. But this has changed
dramatically as mobile manufactures are producing N number of models with
various screen sizes. You can check the screen size of a mobile device from
X-Wap-Profile XML file. I have discussed the X-Wap-Profile in another point
below.
The
best way for image displaying is - Store a single image of 255 pixels in
database and then resize it on ISS according to the requested screen width and
height.
For
example: Motorola L7 has 176 x 200 screen size (Width x Height), BlackBerry8800
has 320 x 240 screen size and Nokia2630 has 128 x 160 screen size. For the
perfect view of the image, it must be resized on IIS accordingly and then you
should point the correct URL to the image tag.
To
ease the process, I have created a table in database. This reads the
“X-Wap-Profile” on first request and stores model name of the mobile, URL of
the X-Wap-Profile, screen width, screen height, supports 3gp, mp4, etc.
information in the database table.
I
don't go to read the 'X-Wap-Profile' each time a request comes for a Web page.
Instead I do this only for the first time a new mobile is requested. On first
request, all the device info is stored in the database table and for all the
subsequent requests, I can look for height and width of a screen directly in my
database. This will lessen the efforts of requesting the “X-Wap-Profile” each
time and can serve a Web page faster to the client.
Single Domain, Two Different Web Sites
Sometimes,
you may have only a single domain registered and you want two different
Websites pointing towards the same domain name.
Let’s
understand this with an example. You have a domain something like http://www.yourwebsitename.com.
You will develop two different websites: Website ‘A’ fully dedicated for normal
desktop browser and website ‘B’ with mobile Web pages which are smaller in size
and specially designed for mobile browsers.
Now,
if http://www.yourwebsitename.com is requested from a desktop browser,
you want to show the home page of your normal website ‘A’ and if the request
comes from any GPRS enabled mobile device, you will want to show them the home
page of your mobile page Website ‘B’.
Why You Want the Same Domain Name for
Both of the Websites?
The
answer is simple:
1.
You
get the benefit of SEO on both of the pages.
2.
The
same brand value and customer credit can be received on both of the sites.
3.
Marketing
and Advertisement can be shared between both of the websites.
4.
You
may also have the domain http://www.yourwebsitename.mobi but this makes
more sense to show a user mobile home page rather than a normal Web page, if it
is requested from a mobile device.
Code to Detect a Mobile Browser
Following
is the code which solves the above issue. I have created a function which
checks for the ‘X-Wap-Profile’. If it is found, then I redirect them to my
mobile Web pages, else I redirect the request to normal Web pages.
//
Declare a boolean variable for mobile browser
bool
IsMobi = false;
//
If request header can find the X-Wap-Profile, then it is a mobile browser
if (Request.Headers["X-Wap-Profile"]
!= null)
{
if (Request.Headers["X-Wap-Profile"].ToString().Length
> 0)
{
IsMobi = true;
Response.Redirect("index.aspx",
true);
}
Else
{
Response.Redirect("web/index.aspx",
true);
}
}
What is Request.Headers?
HTTP
request headers allow the client to provide information about itself to the
server. They give additional details about the nature of the request like its
content type, Accept-Charset, Accept-Encoding, Accept-Language, etc.
What is ‘X-Wap-Profile’?
When
you request a mobile browser, it sends much more information back to the
server. One of them is the link to the ‘X-Wap-Profile’.
- X-Wap-Profile: http://gsm.lge.com/html/gsm/LG-KG220.xml
X-Wap-Profile
is an XML file which provides all the detailed information about a mobile
device. You can find the screen size of the mobile device, supported audio and
Video types, Model name of the device and many more things.
This
XML file is provided by the phone manufacturer for the use of the outer world.
Will Only This Code Do For All GPRS
Enabled Mobile Devices?
The
answer is NO. But the trick is not much harder than above. Some mobile device
doesn’t have the attribute X-Wap-Profile. Instead, they may have any of the
following:
- X-Wap-Profile
- X-Wap-Profile:
- Profile
- Profile:
Moreover,
in my experience some Samsung and LG devices also have different writing style
of the same attribute as shown below:
- X-Wap-Profile
- x-wap-profile
- X-WAP-PROFILE
The
best way is to check all of them in a single function and according to value of
IsMobi boolean variable, redirect the user to a relevant Web page.
Some Tips and Tricks
1.
Put
the mobile pages in parent folder and normal Web page in a child folder.
This will avoid any redirection if a request comes from any
mobile device. It can save your valuable CPU cycles. It will also help you to
give a faster response to the user. No user can wait for more than two seconds
for rendering of a page. An ideal mobile page should be rendered on any mobile
device in less than 2 seconds.
2.
Iphone
is a special device and I want my Website to render as a normal desktop Web
page on Iphone. What should I do for this?
In this case, you will check the name ‘iphone’ OR ‘ipod’ from
the User Agent. If it is found, then you will need to set the Viewport attribute in a
metatag. In the below example, I have to take a literal named ‘iphone’ in the
Header section of the page like this.
<head id="Head1"
runat="server">
<asp:literal id="iphone" runat="server"></asp:literal>
</head>
And in the code behind, I check it as shown below:
//
If requesting User Agent is an IPhone or IPod than set the iphone label
if
(Request.UserAgent.ToLower().Contains("iphone"))
{
// Set the Viewport attribute.
iphone.Text = "<meta
name=\"viewport\" content=\"width =
device-width
height = device-height \" />";
}
else
if (Request.UserAgent.ToLower().Contains("ipod"))
{
// Set the Viewport attribute.
iphone.Text = "<meta name=\"viewport\"
content=\"width =
device-width
height = device-height \" />";
}
Some
basic Definitions
XHTML
MP:-
(eXtensible
HyperText Markup Language Mobile Profile) is the markup language defined in WAP
2.0 .The goal of XHTML Mobile Profile is to bring together the technologies for
mobile Internet browsing and that for the World Wide Web.
WAP
:-
Short
for the Wireless Application Protocol, a secure specification that allows
users to access information instantly via handheld wireless devices such as
mobile phones, pagers, two-way radios, smartphones and communicators.
WAP supports most
wireless networks. These include CDPD, CDMA, GSM, PDC, PHS, TDMA, FLEX, ReFLEX,
iDEN, TETRA, DECT, DataTAC, and Mobitex.
WAP
is the standard created by the WAP Forum (now the Open Mobile Alliance
[OMA])
that brings the World Wide Web to wireless devices. It specifies the protocol
stack and application environment of mobile Internet browsing applications
The
most up-to-date version of the WAP 1.x specification is WAP 1.2.1, which
defines WML 1.3
WML
files have the extension ".wml". The MIME type of WML is
"text/vnd.wap.wml"
WML (Wireless Markup Language) is the first markup
language standard for wireless devices. It is supported by all the major mobile
phone manufacturers
WML 1.x is very similar to HTML. Both of
them use tags and are written in plain text format. Some tags in WML 1.x are
directly borrowed from HTML. If you have experience in using the HTML markup
language, you should be able to learn WML 1.x quickly.
WAP 1.x is an earlier version of the WAP
standard. The most current version is WAP 2.0. The markup language defined in
WAP 2.0 is XHTML MP (XHTML Mobile Profile)
Some
major WML features lost in XHTML MP:
1.
XHTML MP does not support decks and cards
2.
XHTML MP does not support timers
3.
XHTML MP does not support events
4.
XHTML MP does not support variables
5.
XHTML MP does not support client-side scripting
6.
XHTML MP does not support programmable softkeys
7.
XHTML MP does not support the tag
8.
XHTML MP does not support the format attribute for input fields
9.
XHTML MP does not support posting of data with anchor links
XHTML MP is
a subset of XHTML. The syntax rules of XHTML MP follow that of XHTML.As mentioned before in this XHTML MP tutorial, XHTML is just a stricter and cleaner form of HTML. If you have already learned HTML, you can immediately start writing XHTML MP markup code by following the XHTML MP syntax rules below.
1.
Tags
must be closed properly
2.
Tags
and attributes must be in lowercase
3.
Value
of attributes must be enclosed within quotation marks
4.
No
attribute minimization is allowed
5.
Tags
must be nested properly
Supported
ModulesModules included in XHTML-MP 1.2 are:
·
Structure
·
Texts
·
Hypertext
·
List
·
Forms
·
Basic
Tables
·
Image
·
Object
·
Metainformation
·
Scripting
·
Style
Sheet
·
Style
Attribute
·
Link
·
Base
XHTML-MP
1.2 also includes partial support for:
·
Presentation
·
Intrinsic
Events
·
Legacy
