Website Design for Mobile Devices
Wall Script
Follow Me:
Friday, July 30, 2010

Website Design for Mobile Devices

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.

iphone application oneiphone application Two

Live Demo

Related 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>

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" />


Apple developer meta tags information

Redirect iPhone, Blackberry, & Palm Requests With .htaccess
Beginning iPhone 3 Development: Exploring the iPhone SDK
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


30 comments:

  1. Can you please tell me any online simulator for iPhone?
    BTW useful post.

    ReplyDelete
  2. Great post Srinivas. Nice and simple, I need to create a mobile version of my site one day. :-)

    ReplyDelete
  3. nice post .. anyway any online emulator for iPhone viewer or else?

    regards

    ReplyDelete
  4. Well explained design post for mobile device..

    Thanks

    ReplyDelete
  5. hey , nice blog , like it ,
    won't be nice if i u can clickover to my blog page too ,
    & post some suggestion

    ReplyDelete
  6. 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 .
    Sorry for my bad english .

    ReplyDelete
  7. Thanks for u r information


    its very useful

    ReplyDelete
  8. Great useful information. i have a small doubt can you please clarify
    How to Use CSS3 Media Queries to Create a Mobile Version of Your Website?

    ReplyDelete
  9. Thanks for u r information


    its very useful

    ReplyDelete
  10. 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
    but im not able to access the wap site i tried your tutorial .......Reply Please

    ReplyDelete
  11. Thanks for u r information


    its very useful

    ReplyDelete
  12. Thanks for u r information

    its very ueful

    ReplyDelete
  13. Thanks for u r information

    its very ueful

    ReplyDelete
  14. Thanks for the site its awesome site for the visitors.

    ReplyDelete
  15. 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.

    ReplyDelete
  16. This 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.

    ReplyDelete
  17. I like this article because themes was interesting,helpful but ,give more info about that when you update. Thanks

    ReplyDelete
  18. Nice and very cool article.But it work in wml supported mobile phone?

    ReplyDelete
  19. really excellent tutorials..........great yaar

    ReplyDelete
  20. Keep 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..

    ReplyDelete
  21. Best of luck. Good solutions in this blog. Included more information in future for the successive blog. Good luck

    ReplyDelete
  22. Is there any different limit of meta tags for mobile website or its same as of desktop browser...?

    ReplyDelete
  23. it is very cool. I have one question is it the same way that facebook did his downloadable mobile application??????

    ReplyDelete
  24. Do you know any chat application for mobile websites?

    ReplyDelete
  25. Basic 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.

    ReplyDelete

Make in India