Tuesday, June 12, 2012

Mobile Web Development

 Mobile Web Development

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. 
A DOCTYPE (Document Type Declaration)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
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)
                                  ("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";
       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);
                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
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>
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
 (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 Modules
Modules 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