12 October 2010

make a mobile compatible website


How to design a website for mobile devices (smart phones). Next web world with smart phones so start working on mobile templates. In this post I want to explain very basic HTML design tip with adding a meta tag.

Normal site

Contains HTML code. CSS width style fixed with pixels. width : 900px

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Normal Website</title>

<style>

#container

{

width:900px;

}

</style>

</head>

<body>

<div id="container"></div>

</body>

</html>


Mobie site

Contains HTML code. CSS width style with percentage. width : 100% . Take a look at META tag viewport.

<html>

<head>

<title>Mobile Website</title>

<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport" />

<style>

#container

{

width:100%;

}

</style>

</head>

<body>

<div id="container"></div>

</body>

</html>


META tag viewport for Iphone

Width fixed 320

<meta content = "width = 320,initial-scale = 2.3, user-scalable = no" name = "viewport" />


META tag viewport for all smart phone devices (recommended)

Auto width adjustment.

<meta content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name = "viewport" />


Here is some mobile simulator list at where you can check your site
Iphone --


http://www.testiphone.com/
http://www.genuitec.com/mobile/

Android --

http://tmobile.modeaondemand.com/htc/g1/
http://www.addictivetips.com/wp-content/uploads/2009/Android-Emulator.zip
http://androidandme.com/2009/10/news/how-to-install-android-sdk-and-play-with-android-2-0-in-the-emulator/
http://www.youtube.com/watch?v=wjD5any2C8Q

Nokia -
http://emulator.mtld.mobi/emulator.php?emulator=nokiaN70&webaddress=mtld.mobi
http://www.forum.nokia.com/info/sw.nokia.com/id/db2c69a2-4066-46ff-81c4-caac8872a7c5/NMB40_install.zip.html

Blackberry -
http://na.blackberry.com/eng/developers/resources/simulators.jsp

HTC --
Test with T-mobile simulator

1 comment:

  1. I have read this post. collection of post is a nice one ..that am doing website designing company chennai india and website development company chennai india. That I will inform about your post to my friends and all the best for your future posts..

    ReplyDelete