There are some great iOS tips here, and in that regard, this article is helpful (though the meta tag tip for hiding browser chrome is only true when the site is running from an installed-bookmark, as far as I know).
Unfortunately, the included media query opinions make those better points harder to appreciate, as (with honest respect to the author) those portions of the article are not consistent with my experience in the medium. To build on Ethan’s points above, responsive design is not about taking a desktop-oriented design and doing whatever possible (display:none, etc) to make it look presentable on mobile. It’s a strategy that aims to provide a great and appropriate experience to all browsers and devices in a responsible fashion. Content that isn’t relevant to users on an iPhone may in fact be unnecessary in all contexts, or more frequently, that content is actually appropriate to both contexts and just needs different presentation and behavior to cater to each use case (bigger hit areas on links, collapsing large nav lists, touch gesture improvements, etc, etc).
In my experience with mobile, as dev lead on the jQuery Mobile project, and being deep in the process of building a responsive design for a fairly complex site (the one Ethan tweeted excitedly about yesterday), even “application”-like experiences can be built with progressive enhancement, feature detection for touch events, and media queries to optimize the same content for different viewing contexts. Even your images can be responsive now! http://bit.ly/g0IDAI
One last point: the JS community spent years bogged down in User Agent string parsing madness before fairly recently making a forward-looking shift towards feature-detection-based approaches (jQuery no longer uses it internally, for example).
It may have been pointed out already, but the User Agent detect cited in this article will include Opera Mini users on the iPhone (info here: http://bit.ly/aXvUmZ), which is probably not intentional, and a good example of why UA detect assumptions are a dangerous bet.
<pre><code>
( /iPhone/i ).test(“Opera/9.80 (iPhone; Opera Mini/5.0.0176/812; U; en) Presto/2.4.15”)
Scott Jehl
There are some great iOS tips here, and in that regard, this article is helpful (though the meta tag tip for hiding browser chrome is only true when the site is running from an installed-bookmark, as far as I know).
Unfortunately, the included media query opinions make those better points harder to appreciate, as (with honest respect to the author) those portions of the article are not consistent with my experience in the medium. To build on Ethan’s points above, responsive design is not about taking a desktop-oriented design and doing whatever possible (display:none, etc) to make it look presentable on mobile. It’s a strategy that aims to provide a great and appropriate experience to all browsers and devices in a responsible fashion. Content that isn’t relevant to users on an iPhone may in fact be unnecessary in all contexts, or more frequently, that content is actually appropriate to both contexts and just needs different presentation and behavior to cater to each use case (bigger hit areas on links, collapsing large nav lists, touch gesture improvements, etc, etc).
In my experience with mobile, as dev lead on the jQuery Mobile project, and being deep in the process of building a responsive design for a fairly complex site (the one Ethan tweeted excitedly about yesterday), even “application”-like experiences can be built with progressive enhancement, feature detection for touch events, and media queries to optimize the same content for different viewing contexts. Even your images can be responsive now! http://bit.ly/g0IDAI
One last point: the JS community spent years bogged down in User Agent string parsing madness before fairly recently making a forward-looking shift towards feature-detection-based approaches (jQuery no longer uses it internally, for example).
It may have been pointed out already, but the User Agent detect cited in this article will include Opera Mini users on the iPhone (info here: http://bit.ly/aXvUmZ), which is probably not intentional, and a good example of why UA detect assumptions are a dangerous bet.
<pre><code>
( /iPhone/i ).test(“Opera/9.80 (iPhone; Opera Mini/5.0.0176/812; U; en) Presto/2.4.15”)
==> true
</code></pre>