Creating an iPhone\droid friendly website
Posted by Mike Longin on August 10, 2010
For an internal tool I recently created an iPhone\Android friendly version of one of my sites. Considering the plethora of CSS styling sites you would think at least one or two would have some easy layouts for mobile devices. Unfortunately this was not the case. However I did find (http://net.tutsplus.com/tutorials/html-css-techniques/flexible-mobile-first-layouts-with-css3/) which made creating my mobile app super easy. Creating a mobile site comes down to two things. Having the Viewport Metadata and having a valid CSS file. Another useful site (http://eisabainyo.net/weblog/2009/06/12/making-a-website-iphone-friendly-using-css/)
This tag is needed to help autofit the page and to prevent zooming. (If you ever wondered why some sites on the iPhone do not zoom, this is the answer)
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
To create my app I copied the layout here
I used essentially the same css as available on the above site. The most important note I did find in my research however, is not to use fixed widths, and instead to use percentages.
For websites designed for mobile browsing, it is important to have a custom bookmark icon. This way if someone saves the bookmark to thier home screen it stands out. The two site below cover how to do this
In short you need to have these two tags
<link rel="apple-touch-icon" href="../../apple-touch-icon.png" />
<link rel="apple-touch-precomposed" href="../../apple-touch-icon.png" />
A great site for mobile app inspirations is http://cssiphone.com/. I attempted to make my site look like these (didn’t really succeed however.)
This entry was posted on August 10, 2010 at 1:59 pm and is filed under Uncategorized. Tagged: Android, CSS, droid, Icon, iPhone, website. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.