Tag Archives: Mobile

Tips for making mobile friendly website

7 Sep

Over past few year mobile usages has seen a revolution. People not only uses mobile for communication but they use it for various purposes, Online line shopping to ticket booking and all. But Unfortunately mobile arena is not so simple for developers and designers to handle as there is lot of complexity involved in cross browser. The vast number of mobile devices makes thorough testing a practical impossibility, leaving developers nostalgic for the days when they only had to support legacy browsers.

According to IDC,Android and iOS Combine for 92.3% of All Smartphone Operating System Shipments in the First Quarter While Windows Phone Leapfrogs BlackBerry.

IDC Reports on mobile published_ichart_173696

 

 

 

 

 

 

 

 

 Image Credit : IDC – Press Release

Also Check this report.  http://www.icharts.net/chartchannel/worldwide-smartphone-os-share-2012-q1-2013-q1_m3zryyngc

Mobile device have reduced screen size,So let’s tackle these issues one at a time and create a road map for mobile web development:

Implement Mobile Stylesheets

The first step to adding mobile support to a website is including a special stylesheet to adjust the CSS for mobile devices:

One approach to including mobile stylesheets involves detecting the user agent string with a server-side language such as PHP. With this technique, the site detects mobile devices and either serves an appropriate stylesheet or redirects the user to a mobile subdomain, for instance m.facebook.com. This server-side approach has several advantages: it guarantees the highest level of compatibility and also allows the website to serve special mark-up/content to mobile users.

Alternately, the easiest approach involves detecting the mobile device on the client side. One of the earliest techniques for including mobile  stylesheet’s media type, for instance:

<link rel=”stylesheet” href=”site.css” media=”screen” />
<link rel=”stylesheet” href=”mobile.css” media=”handheld” />

The first site.css targets desktops and laptops using the screen media type, while the second mobile.css targets mobile devices using handheld.

Since mobile devices typically have smaller screens, we can target handheld devices by detecting screens that are 480px and smaller:

<link rel=”stylesheet” href=”mobile.css” media=”only screen and (max-device width:480px)”/>

Use Advantage of HTML 5


<input type=”tel” />
<input type=”email” />

These input types allow devices such as iPhone to display a contextual keyboard that relates to the input type. In the example above type=”tel” triggers a numeric keypad ideal for entering phone numbers, and type=”email” triggers a keypad with @ and . buttons. For complete list of HTML 5 input type click here.
SPECIAL IPHONE / IPAD ENHANCEMENTS

Take a look at Sencha Touch, jQTouch and iui. These three Javascript libraries allow you to better interface with the iPhone, and also work on similar devices such as Android. Additionally, keep an eye on the much anticipated jQuery Mobile which has just been released in alpha.

For creating special iphone-icon. Save a 57 x 57 pixel PNG somewhere on your website, then add this snippet within your <head> tag:

<link rel=”apple-touch-icon” href=”/customIcon.png”/>

Hope this post helps you to make a mobile centric site. All comments are welcome either any suggestion,feedback or any query.

Advertisements
%d bloggers like this: