4 ms·

Optimize your website for iPhone in 10 minutes.

41 points by sahillavingia 16y ago

znt 16y ago
Using jquery touch helps too. For "Native looking" website designs or PhoneGap apps it's very useful. http://www.jqtouch.com/ http://www.jqtouch.com/
- fharper1961 16y ago
  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.
geuis 16y ago
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.
- haribilalic 16y ago
  -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.
  - sahillavingia 16y ago
    If it's wrapped in the following it only effects iPhones. @media screen and (max-device-width: 480px) {
    - haribilalic 16y ago
      Like I said, if it's not limited to Mobile Safari.
- sahillavingia 16y ago
  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.
  - dlazar 16y ago
    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.
faramarz 16y ago
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" />
- sahillavingia 16y ago
  The result of that and what I did is the same, actually. :)
citizenkeys 16y ago
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.
Pheter 16y ago
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.

41 points by sahillavingia 16y ago

znt 16y ago

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

fharper1961 16y ago
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.

geuis 16y ago

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.

haribilalic 16y ago
-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.
- sahillavingia 16y ago
  If it's wrapped in the following it only effects iPhones. @media screen and (max-device-width: 480px) {
  - haribilalic 16y ago
    Like I said, if it's not limited to Mobile Safari.
sahillavingia 16y ago
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.
- dlazar 16y ago
  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.

faramarz 16y ago

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" />

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

citizenkeys 16y ago

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.

Pheter 16y ago

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.