Make your websites ready for mobile
Last year mobile web usage increased 148% worldwide, so its high time that we offer a mobile optimised experience to our visitors. Not all of us has got the time and resources to invest in an independent mobile website. Here are few tags which can be used make existing websites ready for mobile:
The Viewport META tag
Use of <meta name="viewport" content="width=device-width"> with width media queries. That will give your site the optimal width and your site will look the better for the device.
The Viewport META tag controls the logical dimensions and scaling of the browser viewport window in many smartphone browsers, including Safari Mobile for the iPhone, Android browser and BlackBerry browsers. The presence of the Viewport META tag indicates that the markup document is optimized for mobile devices.
A typical mobile-optimized site should contain something like the following:
<meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1“>
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
The MobileOptimized META Tag for IE:
<meta name="MobileOptimized" content="width" />Microsoft invented the MobileOptimized META tag to control the layout width for mobile markup rendered in Internet Explorer Mobile (i.e. Pocket IE). The content of the meta tag is an integer width in pixels. In IE Mobile, the presence of this META tag forces a single-column layout at the specified width, preventing the browser from modifying the layout to “fit” the mobile screen.
Some non-MS mobile browsers may also use the tag to force single-column layouts. Mobile browsers and mobile search engine spiders also use this META tag to identify mobile-optimized HTML.
The HandheldFriendly META Tag
The HandheldFriendly META tag is widely interpreted by mobile browsers and spiders as an indicator of mobile markup and a directive to display the web document without scaling. The value of the META tag is “true” for mobile markup and “false” for desktop-optimized HTML.
<meta name="HandheldFriendly" content="true" />
Follow us on: