Question

I’m going to build a website using xhtml, css, javascript and php. And this website should properly appear on iPhone and other kinds of smart phones just like it will appear on computers, so I want to konw what are the points that I should keep in mind when I start building such website.

Answer 1

1) Use the <meta name="viewport"> tag to correctly set the scale so that your content fills the screen

2) Avoid internally scrolling areas such as iframes or divs with overflow:scroll as these do not work on iOS4 and earlier, or most versions of Android

3) Avoid position:fixed to pin navigation to particular parts of the screen as this does not work on iOS4 and earlier, or most versions of Android

4) Don’t rely on hover or rollover-based interaction like drop down menus that appear when you mouseover because these don’t work well or at all on touch-based devices

5) Avoid small text or links close together because if your page is 800px wide and it’s being shrunk down to a 320px screen, these will be hard to read or tap.

6) Don’t use Flash

More generally, you have a choice for how to approach this:

1) Make a single site design with nice big text that can be used well when scaled down to a small screen

2) Design two layouts for your site and use JavaScript or CSS media resolution queries to switch stylesheets between the mobile and desktop versions, or

3) Make a so-called liquid layout where the width can be scaled gracefully for different screen sizes without zooming