Designing a site that can be viewed on the iPhone is really no different than any other site.  As I have learned thus far, you are using the same CSS, JavaScript, HTML, etc.  There are a few tweaks that you make that basically have to do with adjusting for the size of the screen or viewport.  You have to adjust it to the size of viewport, which will also vary depending on whether it’s in landscape or portrait mode.  You will also have the ability to tailor the CSS based on viewport orientation.

Really, the biggest difference starts to come in when you have you plug-ins, specifically Flash plug-ins. Those are the sites I tend to encounter most often and get a little frustrated when I can’t view them.  Unfortunately, that’s just the way it is for now. Adobe is getting frustrated with Apple and as recently as this week pointed the finger solely on Apple for the issue.  They are working Flash into stand alone apps at this point, but it’s not likely to be supported in the iPhone’s Safari browser any time soon.

Ok, enough of that tangent! There are a few other important elements for designing iPhone friendly websites. I found a good site that describes The viewport meta tag is important because it instructs the browser to use the width of the device as the width of the viewport, instead of the default 980 pixels.  Making the toolbar disappear is another element. If you have an iPhone,  you may have noticed that when a page is first loaded, the URL toolbar is visible, and when you scroll down, it disappears.  There is another element to the design that most try to incorporate through CSS – the usage of rounded corners to go along with the browser style.  Finally, you have to account for the touch events instead of the usual mouse click.

Of course, there are lots of other things to consider, like whether or not to use WebKit. For information on the iUI, I came across this fantastic resource.  Finally, for information on CSS for the iPhone, I found this site.

Advertisements