Home » andriod » How to Design for Mobile Layouts

How to Design for Mobile Layouts

Recently, during a Web Site development project, I came across the need to design responsive layout. The most simplest way one can achieve is to add Mobile responsive meta tags. Details could be read here.

http://www.campaignmonitor.com/guides/mobile/responsive/
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

and last but not the least.
http://stackoverflow.com/questions/13871836/html-meta-tags-for-mobile-devices

If reading is not your forte, add the following META tags in the all your HTML templates, or include them using Server Include / Require


<!-- Mobile specific Metas-->
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1.0, width=device-width" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="width">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="MobileOptimized" content="320">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="cleartype" content="on">
<!-- Mobile specific Metas-->

<!-- Given the option, one could also include the same properties via CSS.-->

<style>

/* Class for Mobile View handling */
@-ms-viewport{
width: extend-to-zoom;
zoom: 1.0;
}
@viewport{
width: extend-to-zoom;
zoom: 1.0;
}
/* Class for Mobile View handling */

</style>

Advertisements

2 thoughts on “How to Design for Mobile Layouts

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