Webdesign for Mobile

Hi Guys,

Anybody give me the idea for mobile web design technology(Eg., Blackberry, iphone and Nokia E Series model).

  1. Also Need How do i concentrate the html code when do i design for mobile website?

  2. Give me the sample Design and HTML Code?

  3. What are the standard we have following the mobile web html code?

Thanks and Regards,
Dinesh

You need to write light clean code without any bloat and separate the CSS from the (x)html and not use many images or scripts. Basically it helps if you write simplified pages in something like XHTML Basic 1.1. Some best practices are: http://www.w3.org/TR/mobile-bp/

Modern cellphones are able to handle HTML just as good as XHTML, though some of the HTML error handling might not be as advanced. In addition to light-weight code, as mentioned by xhtmlcoder, you should therefore make sure your pages are valid.

I would recommend that you set your standard stylesheet to media="screen". Even if you don’t have a mobile browser stylesheet (which can be set using media="handheld"), this will prevent unforseen CSS bugs caused by the much smaller viewport.

Most importantly, don’t use table-based layouts. These are an absolute pain to navigate on cellphones.

http://mobiforge.com/
http://mtld.mobi/emulator.php
http://articles.sitepoint.com/article/iphone-development-12-tips

To keep your HTML slim… don’t use table based (or complex layouts), avoid columns (most non-iPhonish devices don’t like columns in a limited width environment). Scale your images to smaller resolutions (users can’t see large images well on small screens - it’s a waste), reduce the script usage - the less bandwidth used the better and finally… scale down your content. If you can say it in less words… do it, reducing the content size by 50% will save you a HUGE amount of bandwidth.

Alas there’s no perfect solution, however this design: http://m.alistapart.com is one of the best (Mobile A List Apart site), it’s based on a service called Mobify (http://www.mobify.me/) which turns normal sites into lovely mobile versions. It’s the best automated solution out there.

There isn’t one, mobile web design is like HTML email designing. It’s based on standards that don’t exist, no-one agrees on the same implementation method (etc), it’s a mess! The handheld at-rule isn’t widely supported, M-HTML isn’t supported at all, CSS3 at-rules are barely supported and device detection is dodgy at best. :slight_smile:

PS: This article helps show the issues (it’s fix unfortunately no longer is relevant due to more cellphone floods): http://www.alistapart.com/articles/return-of-the-mobile-stylesheet