Mobile Web Development Tips (xhtml)

Web Developing for mobile is not the same as developing a website for PCs. I have summarized some tips which might help any beginner which i have found during Mobile Web Development.

px to em conversion

In mobile web, a pixel difference is also crucial as the website is viewed in Mobile which will have a small screen width of 176px/240px/320px etc. In the CSS the best practice is to use .em as it is directly proportional to font size. The below given link is very useful to convert px to em.

http://riddle.pl/emcalc/

dotMobi

The .mobi top-level domain is the ICANN approved top-level domain specifically for mobile devices. A sample Mobile Web, http://www.domain.mobi

Automated test sites to validate mobile web sites

The below given Test sites are very use full in identifying how well the website developed will look in the Mobile Environments.

http://validator.w3.org/mobile/

http://mobiready.com/

http://www.w3.org/TR/mobileOK-basic10-tests/

Mobile Touch Screen Zooming Feature

If the targeting Mobile is having a Touch Screen and able to Zoom using that feature, use the following block of code inside the and assign the maximum-scale to your requirement and include in the meta directive.
content="width=device-width; initial-scale=1.0; maximum-scale=3.0;"

Caching

By specifying cache information on your mobile pages, you lower the number of times devices download common resources. This especially helps with resources like a stylesheet or logo. use the following and include in a meta directive to set a Cache-control header.
http-equiv="Cache-Control" content="max-age=300"