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. I had implemented this at touch.9lessons.info, try to access this link with any smart phone Eg: Iphone and Android devices.
Live DemoRelated article : Introducing 9lessons iphone Web Application
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>
<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>
<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" />
Apple developer meta tags information
Redirect iPhone, Blackberry, & Palm Requests With .htaccess
Beginning iPhone 3 Development: Exploring the iPhone SDK
Nice post,..
ReplyDeleteCan you please tell me any online simulator for iPhone?
ReplyDeleteBTW useful post.
Great post Srinivas. Nice and simple, I need to create a mobile version of my site one day. :-)
ReplyDeletenice post .. anyway any online emulator for iPhone viewer or else?
ReplyDeleteregards
Well explained design post for mobile device..
ReplyDeleteThanks
Hi . Now i gonna make my site available for mobile devices , and i have AJAX jQuery chat . But javascript don`t work with mobile browsers and chat don`t work for it , so if u have some code to make it work please post it some where .
ReplyDeleteSorry for my bad english .
Thanks for u r information
ReplyDeleteits very useful
Great useful information. i have a small doubt can you please clarify
ReplyDeleteHow to Use CSS3 Media Queries to Create a Mobile Version of Your Website?
Thanks for u r information
ReplyDeleteits very useful
Any idea for viewing our own language site or creating a site with our language...and one more question, if im already having a site, ex: www.soandso.com i need - wap.soandso.com
ReplyDeletebut im not able to access the wap site i tried your tutorial .......Reply Please
Thanks for u r information
ReplyDeleteits very useful
Thanks for u r information
ReplyDeleteits very ueful
Thanks for u r information
ReplyDeleteits very ueful
Thanks for the site its awesome site for the visitors.
ReplyDelete@austria
ReplyDeleteThank you
Good advice. We often advise our students to take a step back and understand what they are getting into. This article reinforces that concept with some practical advice.
ReplyDeleteThis is really a nice blog i like to read this blog daily it has got all the informative stuff that i want to know about. i want to subscribe it so can tell me when your blog gets updated.
ReplyDeleteI like this article because themes was interesting,helpful but ,give more info about that when you update. Thanks
ReplyDeleteNice and very cool article.But it work in wml supported mobile phone?
ReplyDeletereally excellent tutorials..........great yaar
ReplyDeleteKeep it up! Good topic was explain related to daily life. In this clear the ideas to solving the problems in our life then I like to add my bookmark also subscribe it..
ReplyDeletethanks
ReplyDeleteBest of luck. Good solutions in this blog. Included more information in future for the successive blog. Good luck
ReplyDeleteIs there any different limit of meta tags for mobile website or its same as of desktop browser...?
ReplyDeleteit is very cool. I have one question is it the same way that facebook did his downloadable mobile application??????
ReplyDeleteDo you know any chat application for mobile websites?
ReplyDeleteNice and excellent tutorial
ReplyDeleteBasic HTML design tip with adding a meta tag. Implement this at touch.9lessons.info, try to access this link with any smart phone Eg: Iphone and Android devices.
ReplyDeleteCOOL :D
ReplyDeletegreat and useful trick, nice sharing
ReplyDelete