

Optimize your website for iPhone in 10 minutes. - sahillavingia
http://sahillavingia.com/blog/2010/11/13/optimize-a-website-for-iphone-in-10-minutes/

======
faramarz
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
The result of that and what I did is the same, actually. :)

------
geuis
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
_-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
If it's wrapped in the following it only effects iPhones.

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

~~~
haribilalic
Like I said, _if it's not limited to Mobile Safari_.

------
citizenkeys
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
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.

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

~~~
fharper1961
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.

