iPhone CSS?

| | Comments (5)

Cole made a post on his iPhone blog about the WordPress plugin to make your WP blog look good on iPhone's Safari. It's a complex issue. iPhone is sized kind of like a handheld, it functions kind of like a handheld, but it doesn't display like a handheld since its screen is wider. Safari on an iPhone is an adult scale browser with robust capabilities. I found a post that claims this syntax works, but I'm not familiar with the use of the word "only" :

<link media=”only screen and (max-device-width: 480px)”
href=”iPhone.css” type=”text/css” rel=”stylesheet” />

The W3C pages have quite a bit of info, but nothing is leaping out at me.

Designing with an option for 480 pixel display makes sense. Does this media syntax work? iHope some of our research will look at these things. Apple has some information on their Developer Connection pages. Specifically, they call for Standards based design, listing support for HTML 4.01, XHTML 1.0, CSS 2.1, partial CSS 3, and ECMAScript 3. They also appear to be the original source for the iPhone mediatype code. They go on to say "Older browsers ignore the only keyword and won’t read your iPhone style sheet. (Thanks, Apple.) To specify a style sheet for devices other than iPhone, use an expression similar to the following:

<link media="screen and (min-device-width: 481px)"
href="not-small-device.css" type="text/css" rel="stylesheet" />

Apple also lists info on laying out content for the iPhone viewport, information on readability, image optimization, forms... So should you design for iPhone Safari? I think the heart of standards based design is that you don't design for specific devices. I'd even venture to say that you shouldn't use sniffers, either. But you should at least be concerned that your information is readable on everything that's available.

LATE ADDITION: I just found a page on flickr of all places that opens up a discussion of readable websites on iPhone. Joe Clark has a comment where he asks, "Why doesn’t Safari support the handheld CSS media type?" As much as I like Clark and would love to see him address the Penn State Web Conference, I don't think the iPhone is a handheld.


Cole said:

At the risk of getting my butt kicked for knowing too little ... I think one of hte reasons why many people are designing alternative views of sites for the iPhone is b/c of Apple's insistence that developers build their apps via the browser. I don't really have an opinion on the perceived closed application environment on the iPhone -- I wouldn't install third party apps on a device I rely for business connectivity like a phone. I had a Treo and could install apps and 7 times out 10 they did something bad to the phone.

When I have real wifi, I enjoy hitting full sites -- with all the layout the site designer wanted me to see. When I am over on the EDGE cell network, I much prefer the iPhone friendly versions.

I did come across iUI this morning ... it claims to automatically "... makes developing iPhone web apps easy." No idea, but it might be worth a look.

dave said:

Idiot that I am, I always get confused when technologically advanced humans refer to applications when I think in terms of web pages and design. Joe Hewitt seems to be a pretty smart guy and I just started looking through his iUI download. In the spirit of knowing too little, it took me quite a few reads before I found that the first time he mentions iUI it's a link to the download page. Nice stuff so far, and along with the Apple Developers doc, we have access to quite a bit of useful material if we want to make things look like they belong on an iPhone. That's no small feat!

I keep feeling like I'm pressing my forehead against a grinding wheel when I start to think about all of this. There are at least two conversations- one centering on Penn State and another on general best practices that may not have to consider AD54. Other grinding thoughts, like that I have over Joe Clark's expectation that an iPhone is a handheld, are wearing my tiny right hemisphere out. The handheld media type was obviously conceived with certain capabilities and limitations in mind, and the iPhone doesn't necessarily have them. So when do we create a new media type? and is it? Apple's expectations of the iPhone interface are that the user experience isn't "dumbed down"; isn't creating 480px wide styles "dumbing down"? My brain is so full...

Christian Johansen said:

Dave, I believe this is the opening salvo of the next browser war. I left a comment on Cole's post before I found your's, so I'll just repeat that the unique link attributes are non-standard (gasp!) and therefore likely to be designed for browser sniffing. I'll repeat it here: therein lies total madness.

The good news is that this plays into the movement towards site publishing tools (read CMS :-) because there is no other way to manage customizing pages for browsers than with a CMS.

I phones are the new generation of phones.

Estelle said:

Safari on the iPhone supports the screen media type instead of the handheld because Safari is an A-grade browser that has some of the most advanced CSS support of any browser. Unlike other mobile phones, the iPhone can access wireless networks with great bandwidth. media="handheld" is usually a tiny subset of the media="screen" CSS because of mobile bandwidth and browser limitations. The iPhone does not have these limitations.

http://www.evotech.net/blog/2007/07/web-development-for-the-iphone, http://www.evotech.net/blog/2007/07/safari-30-css-support and http://westciv.com/iphonetests/ may give you some insight into the power of the iPhone safari browser.

Fortunately, Safari 3 for the iPhone supports media="screen" instead of media="handheld", or the iPhone would only get the stripped down cell phone CSS of many sites. However, when the iPhone is used during travel, the bandwidth is slower. For this, when I have a heavy weight page, I use quick little javascript bandwidth test, and serve up minimal js, images and css when the iPhone has poor bandwidth.

Penn State
April 18, Symposium 2009; reimagine.
New content. Symposium 2008.Digital Commons at Penn State. Improve the workplace; hire for variety.


Blogging at Penn State.

Recent Comments

Podcasts at Penn State.

My del.icio.us Network:

Me with a camera.

My del.icio.us Links: