This post, and the related CSS code to target the iPhone 4’s browser, came through my Twitter stream multiple times today.
Thomas Maier writes about targeting the Mobile Safari browser with CSS media queries on his blog.
I think the things Apple are doing, and the advances they are making in the mobile phone and hand-held Internet device markets are amazing. I think it’s great that consumers (with the help of device makers) are redefining where, when, and especially how they interact with devices and data. I think the iPhone is cool. [I don't own one (I do have an iPod touch for testing), but that new display is incredibly tempting...]
So here we have this awesome new device which allows us to access all the same information we previously only could from a desktop (or laptop) computer. Apple even went out of their way to reinvent the way we interact with and browse that information so that we could have "the full Internet experience," and not some scaled-down mobile version.
See where I'm going with this?
It seems to me that we have so called 'standardistas' promoting information on how to design for a specific device, when the last — what has it been now? — 10 years have been all about getting away from browser sniffing, and moving toward adaptable, degradable design. In enough time, there won't be a 'mobile web,' it will just be the standard 'desktop web' that we're used to, and "these websites over here that only work on the iPhone." Thankfully, I'm not the only one, nor anywhere near the first person to realize this.
But a funny thing happened. Web developers started making versions of their Web sites optimized for the iPhone. Some had these versions available shortly after the iPhone launched. But since then many of the major sites like Google, Yahoo, FaceBook, Amazon, and so on, recognize when they are being browsed on an iPhone and will display an iPhone-specific view instead of the one you see on your Mac or PC. So Apple gave us the real Web, but the Web site developers took it away.
Gary Rosenzweig from 'iPhone’s Promise of "The Real Web"' posted on MacMost.
[Emphasis added by Jstn Ryan.]
The iPhone has become an obsession. If we don’t pay attention, we’ll have a mobile web that only works on the iPhone. And then we’ll have the real mobile web that wasn’t made by us and doesn’t give a shit about web standards and best practices.
[ ... ]
We’re doing exactly the same as ten years ago. We now say “iPhone” instead of “IE6,” but otherwise nothing’s changed.
Peter-Paul Koch from 'The iPhone obsession' on his site, QuirksMode.
What’s the solution?
First you have to identify whether or not you have a problem. If you're designing for a specific audience, namely iPhone 4 users only, then there is no problem. At the moment, though, that’s a pretty small target audience. Additionally, if you're only using this media query to "clean up" the appearance of your site when viewed on the iPhone 4, it’s probably safe to bet that you're doing things the 'right' way.
Why use this specific targeting at all, especially when there are much better alternatives? Another trend which has resurfaced recently is being called Responsive Design. It’s sort of a rethinking of the elastic and liquid layouts of a few years back.
"Figure 1" from the A List Apart article 'Switchy McLayout: An Adaptive Layout Technique,' demonstrating the changing design of a web page based on the browsers display-size characteristics.
Using the very same idea, CSS media queries can be used to target all devices of certain display capabilities, for example display width and or height, not just the fact that their "device pixel ratio" (whatever the hell that actually means) is a certain value.
These media queries, although commonly in use for serving styles to iPhone, also work for any other browser which will recognize them. Consider this a way of 'future-proofing' your website. If I come along one day with a device that has a screen size similar, if not the same, as the iPhone, your website will already be appropriately styled for my browsing experience, no modification necessary.
Consider the following:
@media screen and (max-device-width: 480px) { /* iPhone 2/3 */ }
@media screen and (max-device-width: 960px) { /* iPhone 4 */ }
@media screen and (max-device-width: 1280px) { /* etcetera… */ }Media queries can be a very powerful tool, and certainly don't stop at the functionality shown above. By changing max-device-width to device-width further style customization is possible:
@media screen and (max-width: 320px) {
/* iPhone 2/3 portrait AND ANY DEVICE WITH SIMILAR DISPLAY SPECS */
}
@media screen and (max-width: 960px) {
/* iPhone 4 landscape AND ANY OTHER DEVICES WITH MATCHING SPECS */
}
@media screen and (max-width: 768px) and (orientation: portrait) {
/* iPad portrait, etcetera… */
}These media queries show some specific, powerful examples of targeting specific devices in specific modes, and can certainly be used for providing that functionality (if that’s your end-goal), but the point is that they shouldn't. They are powerful enough to give the designer the ability to build a site’s HTML once and style it endless ways provided some simple conditions of the device on which it is being viewed — not just the iPhone.
Go forth, and design wisely.
4 Responses to “Web Developers Are Fucking Hypocrites”
You don’t say anything I would disagree with. It’s all about designing for the user and it’s totally different from designing in the late 90s and early 00s, because at that time we needed to be slaves of our browsers and really plattform-dependent and restrictive. Now we are able to choose and able to design what the user whats to see and to use. So media queries and specific CSSs are all about the same idea. And designing for a specific device today doesn’t mean to downgrade a site. Only if you do it wrong. It’s all about giving the user the possibilities and the same code base but styled specifically for the devices she or he uses (this is where we are hitting the Flash debate, but that’s another story).
@Thomas – Cheers for not taking the aggressive title as a personal attack.
My primary disagreement with the specific media query you provided is its specificity. Really, how many devices are ever going to utilize
-webkit-min-device-pixel-ratio? My guess is just one.That means any CSS within this query is only going to be used for the iPhone 4, when I feel we should be designing a little bit more generally for a device’s display capabilities (like width). Instead of redesigning, realigning your page specifically for display on the iPhone 4, why not spend the effort adjusting for all devices which have similar or the same display capabilities? Hence my suggestion for limiting to
max-device-widthandmax-width.That’s true, but at this point we are at a very early stage. As we know, the W3C often implements standards Apple suggests, but standards take their time and sometimes we don’t even know if they are getting final in the future. It’s a little bit like border-radius. We used this property over a long time now, but always browser-specific. Safari 5 started to implement border-radius without the browser-prefix and maybe the resolution-targeting property will be like that someday, too. Of course we should fine-tune our designs for all devices and not only for the devices from Apple but as long as we can’t we won’t. You _can_ use this code without the prefix, too, but today it doesn’t affect any device or anything.
[...] slap them on our pages, and expect everything to be just fine. When developing pages, please take care to use coding techniques appropriately, and be especially careful when using new[er] techniques that may affect users in adverse ways. If [...]