Creating an iPhone\droid friendly website

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

Meta Tag

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


CSS

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.

Icon

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

http://eisabainyo.net/weblog/2009/06/12/making-a-website-iphone-friendly-using-css/

http://stackoverflow.com/questions/1951381/configuring-android-web-applications

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

Inspirations

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.)

About these ads