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" />
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.
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.
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).
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.
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.
[+] [-] faramarz|15 years ago|reply
Use this:
[+] [-] sahillavingia|15 years ago|reply
[+] [-] geuis|15 years ago|reply
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|15 years ago|reply
[+] [-] jamesteow|15 years ago|reply
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.
[+] [-] sahillavingia|15 years ago|reply
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.
[+] [-] citizenkeys|15 years ago|reply
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|15 years ago|reply
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|15 years ago|reply
[+] [-] fharper1961|15 years ago|reply
Even though jquery mobile is still in alpha, it seems much more promising than jquery touch.