Dra Studio - Blog - Design & Illustration

I am a little late to the game on this, but recently I was creating an iPhone screen optimized version of a site for my personal usage and thought I would share some of my findings.

The Initial

Though Apple recommends through the expansive information in its iPhone Developer Connection to implement CSS3 conditional statements to effectively achieve alternate style-sheets for personal computers and for the iPhone, I wasn’t satisfied with the resulting functionality. Yes, it did allow me to provide a 480px wide version of my design to the iPhone, but strictly using Apple’s sample code left me without a style-sheet for older browsers to fall back on.

Apparently, the “recommended” conditional statements of CSS3 do not degrade to older browsers that don’t support them yet. Sure that is not a major issue, but if I still wanted to provide any kind of design for users of IE 6, I would have had to segment out my CSS rules into 3 separate style-sheets. One would be attached to the page using the traditional link tag (for the older browsers) and the other two (to be loaded using the previously mentioned conditional statements) would have to be comprised mainly of descendant selectors to cascade over the previous stylesheet’s presentation changes. Not to difficult to initiate, but I felt it would be a big pain to continue to maintain … especially for the needs of this particular “project”. Ehem. Moving on …

The Desired

What I found extremely helpful, in the way of an alternate approach, was this article over at Jeremy Flint’s blog, which properly demonstrated how to utilize PHP to “sniff” the User Agent of the browser and once determined whether it was an iPhone or not, provide the appropriate style-sheet.

While Apple does technically suggest not using a sniffing Agent to provide the presentation aspects of your website, I kinda feel their non-backwards-compatible recommendation has a much larger hole in it than the one I am creating by reading the User Agent. And frankly, the fact that I can switch my User Agent on the fly (using the ‘Develop’ menu item in Safari 3.0, this is the method I am going to stick with for now.

Any thoughts or other findings you want to share? I’m all ears. Well … an iPhone too.