Optimize your website for iPhone in 10 minutes. | Hacker News Reader

Optimize your website for iPhone in 10 minutes.

sahillavingia.com

41 pointssahillavingia13 comments

I recommend tweaking text-sizes, margins and floats through a dedicated CSS rather than forcing my user to view a totally new experience. Scaling the viewport means (for most sites) realigning a lot of things, especially menu's and padded content to fit in the frame.

Use this:

  <link media="only screen and (max-device-width: 480px)"
  href="iPhone.css" type="text/css" rel="stylesheet" />

The result of that and what I did is the same, actually. :)

Here's an idea, don't optimize your site for my iPhone in 10 minutes.

1) user-scalable=no: I'm so tired of going to sites that are 'optimized' for my tiny little screen on the iphone. Lots of people don't have very good vision. I prefer sites where I can double-tap and pinch to zoom in and out so I can read text. If you are going to disable user-scalable, make sure your font sizes are BIGGER than what they would normally be on the web.

2) Guess what, I'm using a device that has a fully capable browser. Know what that means? I can view your site exactly as intended on a bigger browser! Really, its no trouble for me to double-tap on the column containing your article. The iPhone zooms quite nicely.

3) If you are really going to make an iPhone version of your site, put some thought and time into. Slapping some dude's css into your page is going to piss off your mobile visitors more than make them love you. Look around at other iPhone optimized sites and see what's being done well and being done badly. e.g. msnbc, your iPhone version of your site is piss poor. Lots of badly thought-through polish, little practical interface usability.

-webkit-text-size-adjust: none; is worse. If it's not limited to Mobile Safari, it disables font zooming on Chrome and Safari on the desktop.

If it's wrapped in the following it only effects iPhones.

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

Like I said, if it's not limited to Mobile Safari.

1) They are bigger than they would be on the web. I hate when other sites do that so I've made sure not to.

3) Of course, this is just a first step. However, if you're afraid of pissing your mobile users off, you can implement the stuff that will only have a positive response (hiding frivolous tooltips that would cover the screen, for example).

However, I do see your points, so upvoted.

1) Please, NEVER EVER assume you know how the fonts will look on the users device. The iPhone is not the only "mobile platform" out there, and it doesn't even have the majority. Different phones will have different fonts, different default font sizes, different screen sizes, etc. As such "user-scalable=no" will guarantee people all over the world will hate you, including iPhone users who have a different opinion than yourself on what the "right font size" is. Just saying: "I'm using bigger fonts than on the web" will probably push you in the other extreme, with fonts too large and users unable to scale them down.

In conclusion: ALWAYS use "user-scalable=yes". Like this you'll give the user the option of correcting your assumptions if they turn out to be wrong.

Thanks for the article otherwise.

Re 3:

Agreed. This applies to apps too. Either put a lot of time, effort, and thinking into an experience that is catered to the device or just let the user use the web site as is. There's nothing that reeks of poor quality than an app or mobile version of a website that has very little benefit over a non-customized experience.

this same css code also works for android. the trick is the "max-device-width: 480px;"

important note: no decent modern phone, including iphone and android, uses the css "media: handheld;" at all. so its not even worth implementing that stylesheet anymore.

I find it really frustrating when a mobile version of a website offers a subset of the features that are available in the 'desktop' version.

If you don't think that a feature is needed in the mobile version, it probably isn't required in the desktop version. Chances are, however, that the user wants all the features available in both versions of a website.

Using jquery touch helps too. For "Native looking" website designs or PhoneGap apps it's very useful. http://www.jqtouch.com/

I just tried jquery touch and jquery mobile (one of Resig's projects) on Android yesterday. The Android support was not good in jquery touch; e.g. missing navigation icons, page transition animations were not working. This is really wierd since jquery mobile actually credits jquery touch for their transition animations. I guess jquery mobile fixed some bugs on Android.

Even though jquery mobile is still in alpha, it seems much more promising than jquery touch.

Reply on news.ycombinator.com