Just another tech site

Mobile Web


let’s go mobile.

Introduction

The way we use Mobile devices is very diferent fron the traditional devices. Here are some reasons

  • screen resolution
  • screen proportions and orientation
  • bandwidth limitation
  • Devices are very different
  • lack of plugins. so no Flash nor silverlight etc.
  • Interaction … No mouse but touch keyboard and fingers…

So what is the impact? basicaly the LAYOUT and the NAVIGATION is completely different.
The usuability is different for mobile device then for a regular device.

Portrait vs Landscape

that is also something different from the traditional applications

Mobile devices

Mobile OS

a short list of mobile OS

Windows Mobile
The iPhone platform
Palm OS 4.5 in 2.31 in
Mobile Linux
Symbian OS
The BlackBerry platform
Android

Example mobile Resolution

just to have an idea, these are some resolutions

iPad 768×1024
iPhone 3 320×480
iPhone 4 640×960 4.5 in 2.31 in
Backberry Curve 360×480
Samsung Galaxy ACE 320×480

Mobile UI

Regular vs Mobile layout

Basicaly the screen shape and resoltion make the layout very different

Facebook mobile layout

Let’s start with Facebook Touch for iPhone (touch.facebook.com). The iPhone version of Facebook is characterized by single-column structure (with fluid width) that contains three main sections: header, main content and footer.[3]

The Navigation

The navigation bare is pretty simple. The idea is to have the button sufficiently big for the use to click on it.

Best Practice in mobile layout

So the website will be different. here are some elements to remember from mobithinking [5]

  • The mobile web is mobile: The mobile web is used by people on the move. For this reason, you need to create user experiences that fit with this dynamic. Think trains, planes and automobiles, and the type of content and services that people will need in these environments in relation to your content and services.[5]
  • Context is King: because the users has limited time and space, the context is very importnat to present the info.[5]
  • The devices are (very) different. [5]
  • forget your dotcom thinking. Most importantly, forget about the mobile web as a “desktop lite” experience. If your objective is just to repurpose your desktop content for the mobile web, then you’ll most likely fail your users: their location, their contextual requirements and their devices demand that they be treated in a different fashion.[5]

Architecture

therefore it is recommended to build a separate UI. of course the BLL and the other layers may remain but the main UI will need to be redesigned.

Mobile Page 101

Browser Detection

browser detection can be done at cliente side with some Javascript code or at server side using the HTTP_USER_AGENT server variable.

following you will find a snipplet that let you help you with the detetion

string u = Request.ServerVariables["HTTP_USER_AGENT"];
Regex b = new Regex(@"android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|symbian|treo|up\\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino", RegexOptions.IgnoreCase | RegexOptions.Multiline);
Regex v = new Regex(@"1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|50|54|e\\-|e\\/|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\\-|2|g)|yas\\-|your|zeto|zte\\-", RegexOptions.IgnoreCase | RegexOptions.Multiline);
if ((b.IsMatch(u) || v.IsMatch(u.Substring(0, 4))))
{
    lbDev.Text = "Mobile";
    //UserTracking.InsertEvent(GConfig.ACS_ConnectionString, GConfig.PromotionID, SessionHelper.SessionID, SessionHelper.AuthenticatedLogin.LoginNumber, EventType.Acs_MobileLoginin, string.Format("Usid : {0}", (Request.Cookies["USIDCHL"] == null ? "" : Request.Cookies["USIDCHL"].Value)));
    //Response.Redirect("mobile/home.aspx");
    //Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "IsMobile", "<script language=javascript>self.location='mobile/home.aspx';<//script>");
}

There also other options such as WURFL
http://wurfl.sourceforge.net/dotNet/ for .NET
http://detectmobilebrowsers.com/ (PHP, Javascript etc)

viewport meta tag

The use of the meta tag

<!doctype html>
<html>
<head>
    <title>Hello world!</title>
    <meta name="viewport" content="width=device-width"/>
</head>
<body>
   <p>Hello world!</p>
</body>
</html>

This viewport metatag is supported on many smartphones, from iPhone to Android to webOS (Palm) to even Internet Explorer Mobile, Opera Mini and Opera Mobile.

Tools and Components

HTML5 and JQUERY mobile version

because HTML5 and JQuery will be compatible in all version. It might be a good idea for mobil web development.

Validation Tool

ok once you build your webpage or you just want to check if your current page is mobil freidly, just use this tool from W3C.

Online Emulators

[a] http://www.opera.com/mobile/demo/

Other simultors and emulators are available such as
[b] http://www.testiphone.com/

Reference

[1] http://davidbcalhoun.com/2010/viewport-metatag
[2] http://validator.w3.org/mobile/
[3] http://woorkup.com/2010/01/10/best-practices-to-develop-perfect-websites-for-iphone-and-mobile-devices/
[4] http://jquerymobile.com/
[5] http://mobithinking.com/best-practices/a-three-step-guide-usability-mobile-web
[6] http://css3wizardry.com/2011/01/30/the-holy-grail-of-mobile-layout/
[7] http://wurfl.sourceforge.net/dotNet/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Tag Cloud

%d bloggers like this: