Two tips for iPhone developers

So you’re making a site “optimised for the iPhone”. Hurray! I was starting to miss those “this site looks best in Internet Explorer 5 with 800×600 resolution” badges. So here are my top two iPhone develpment techniques.

1. Don’t do browser sniffing. The iPhone is just a phone, and Safari is a web browser. There are other browsers out there capable of rendering your content. There are even other mobile devices out there!

2. Think very carefully about why you want to use maximum-scale on viewport or user-scalable=0/ no. Is it for valid application reasons (think of zooming in on something in a game, whereby the zoom event does an XHR to the server to show a higher-scale map or higher-resolution image) or is it just to protect your lovely design?

If the latter, then it’s just the iPhone equivalent of setting fonts in pixels for old versions of Internet Explorer, as it prevents a user with low vision zooming the screen to a magnification that they want. And that is, of course, evil selfish and stupid.

That’s it. Have a lovely day.

sent from my ZX80.

7 Responses to “ Two tips for iPhone developers ”

Comment by Patrick H. Lauke

Claps. #2 particularly shits me off, and the comparison to pixel fonts is strikingly accurate. I guess developers use it to “make it look like a native app, but it’s not really”…fools

Comment by Amadeus

You’re kidding right? Do you even understand iPhone web development? There’s something called screen specific stylesheets which is perfect for optimizing the experience for an iPhone. Let’s face it, zoom and dragging in 2 directions is a poor experience for a site designed to be taken in vertically. Furthermore, I have never seen a site lock in the zoom when they didn’t have an iPhone/mobile specific stylesheets. News flash, it doesn’t require ‘browser sniffing’. It seems you are creating so called ‘tips’ to give yourself credibility when in reality it’s common sense.

I don’t mean to be rude, but posts like this make me despise most ‘blogs’.

Seems I need to stop following the Twitter Boaglinks account.

Comment by Andrew Ramsden

Very true Bruce, this sort of technique should be used with care.

Most sites are ok to use on iPhone. But there is sometimes a need for “mobile” layouts. For example, sites with full page line width are tricky (because on iPhone you can’t control the width of your browser “window” so to speak). To make those sites readable means to zoom in and use horizontal scrolling back and forwards for every line. Yuck!

Wikipedia is a good example of this problem, which us why I appreciate the mobile version of their site.

This is a good approach for Wikipedia because they have a well known site design/layout and a large existing user base, so changing their main site layout may not be a viable option (at least without much testing).

Comment by Zeke Franco

You don’t have to do sniffing you can create separate styles and deliver it like this.

@media only screen and (max-device-width: 480px) {
selector {

or via a separate style sheet like this


By using specific style sheets you are just enhancing the experience for a subset of users. Which is a good thing. If the user’s browser doesn’t understand the the special style sheet the will just get the regular (or mobile) style sheet.

The same thing can be down with javascript you can enhance the content based on the user’s device. You just need to make sure the JavaScript your using is supported by running some tests.

I don’t hear people complaining about how some Web sites deliver CSS3 and HTML5 to browsers that can understand it. For example IE7 won’t get text-shadow but Safari users will. Content is still there it’s just you’ve added some nice details for people who have a progressive browser.

Comment by M1chel

I was reading the tutorial by Paolo Ranoso on nettuts which you commented and I followed your link here thinking at another in depth tutorial, instead I found quite a piece of advice.

I agree with you, but I’m also laughing a lot coz I was expecting a bulleted list tutorial and I got an angry man 😀

Thanks for the advice and great blog. I loved your accessibility guidelines for wordpress on another article.

Comment by M1chel

sorry for the double post but I think I might be helping:

on the page that ask the capthca there’s this error showing
Warning: session_start() [function.session-start]: Cannot send session cache limiter – headers already sent (output started at /home/brucelaw/public_html/wp-content/plugins/SK2/sk2_second_chance.php:2) in /home/brucelaw/public_html/wp-content/plugins/easy-contact/econtact.php on line 112

Also, I would recommend to use something to make the page redirects you back to blog after the captcha is accepted or at least place a link, coz now it’s a landing page. which is a bit of a usability nightmare.
Hope I helped.

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.