Styling a Site for the iPhone

January 5th, 2010  |  Published in Design, iPhone  |  1 Comment

Apple’s iPhone App Review process leaves many of us stuck between a rock and a hard place. What can we do to more effectively push out content without having to deal with Apple? A month’s wait for approval for App submissions and updates isn’t unheard of.

Gruber has discussed the idea that we move in the direction of web apps. This can be a great solution, if you’re an online news site, and don’t need advanced device feedback or complex interaction. This is what we did for the ABA Journal mobile site, and it’s working well enough.We kept it simple because a large part of our audience is on Blackberry, which doesn’t have the horsepower to take on the more “fancy” effects that something like jQTouch could do. Check it out – you can take care of some of the animations and stuff that closes the gap between web and native apps.

One more thing: I recommend using this little blurb:

meta name="viewport" content="width=320"

That sizes the page to better fit iPhone, but it’s still viewable on any other browser just fine. Keep the markup simple, and do all of your special styles in CSS3. The iPhone is good with CSS3 support, but don’t place essential functionality in it if you need Blackberry support.

Use standard HTML to provide your list of stories, headlines, etc. Blackberry and iPhone both tweak the proportions/display of text based on h1, h2, h3, p, and so on. You can override those, but it’s better to use standardized markup and work with what the platforms do natively. They change those sizes to make them easier to read on their tiny screens. Blackberry also lacks the fonts that iPhone has, opting for a hideous, blocky screen font.

Don’t depend too much on typographic creativity or consistent layout. It won’t happen here. Blackberry will screw up any attempts at floating columns, so stick with a single column. Fortunately, colors are (mostly) there, so you can use color where needed.

Don’t use frames, iframes, or divs for important layout or columns. Safari and other mobile browsers change the way those behave.

Hope this helps a bit. I’ll post more on some other experiments I’m doing at a later point. This is an interesting space, now that the iPhone is bringing web standards back to the front (Flash is not part of web standards, by the way. Stop using it.). Apple and others are really innovating here, and it’s very likely that we’ll soon have the same features on web apps that we do on native apps.

Responses

  1. Chase Peterson says:

    July 26th, 2010 at 11:31 am (#)

    there would be a great demand for mobile browsers in the coming years that is for sure.~*”

Leave a Response