CSS for mobile browsers Options

[Christian J]

Some mobile phone (smartphone) browsers only apply screen media CSS, while ignoring handheld media. Apparently this is because the vendors

"believed that handheld style sheets were less well-designed and maintained than their screen counterparts, and provided an inferior experience to the users."
http://www.alistapart.com/articles/return-...bile-stylesheet

So instead of media handheld, it's often recommended to use CSS3 media queries, like this:

CODE

media="only screen and (max-device-width:480px)"

But what about mobile phones with large resolutions, like 854 x 480px? If we increase the max-device-width to include these, it will start to overlap with the resolutions of some netbooks (and older desktop computers). Should we really give netbooks the same inferior CSS "experience" as mobile phones?

This post has been edited by Christian J: Dec 3 2011, 06:58 AM

[pandy]

Netbooks with 480 pixels wide screens? Naah, can't think there are any with that small screens?

Otherwise I have no idea. I don't even have a cell phone so I let them eat the same cake as everyone else. From what you say that's what they want anyway, at least the vendors.

[Darin McGrew]

Yeah, unfortunately, the "must look the same everywhere" crowd won, and some key mobile browsers were designed to ignore media="handheld" style sheets. I'd be surprised if this new mechanism really takes off, given the power of the "must look the same everywhere" attitude that caused the original problem.

[Darin McGrew]

Netbooks with 480 pixels wide screens? Naah, can't think there are any with that small screens?

Yeah, even the OLPC display is 1200x900.

My question is what happens when I use a smartphone in landscape orientation. Just because the display is 800x480 rather than 480x800 doesn't mean that it's no longer a mobile browser (with all its limitations).

[Christian J]

Netbooks with 480 pixels wide screens?

No I was thinking of 800px, i.e. same range as some smartphones. http://en.wikipedia.org/wiki/Comparison_of...#Specifications seems to list a few, e.g. Asus Eee PC 700.

I don't even have a cell phone so I let them eat the same cake as everyone else.

Alas it seems you need dozens if you want to test.

From what you say that's what they want anyway, at least the vendors.

Yes. Unfortunately there are some bugs. For example, current Android browsers treat "overflow: auto" the same as "hidden", in effect making pages partially unreadable (while at the same time they try to prevent CSS authors from hiding the buggy CSS).

[Christian J]

Yeah, unfortunately, the "must look the same everywhere" crowd won, and some key mobile browsers were designed to ignore media="handheld" style sheets.

I'd rather see a simple single-column layout in smartphones, both as an author and user, and eventually I suspect most other smartphone users will too after the novelty of touch screens is replaced by the need for usability.

I'd be surprised if this new mechanism really takes off, given the power of the "must look the same everywhere" attitude that caused the original problem.

At least the browsers seem to support some of the media queries, but maybe the vendors will withdraw that support.

[pandy]

I thought max-device-width was the width? But screen width doesn't seem like a good thing to judge by anyway. I turn images off sometimes on my Netbook. Not because of the resolution, that's large enough, but because of the slow mobile connection and to save battery time.

[Christian J]

My question is what happens when I use a smartphone in landscape orientation.

On mine it doesn't matter with min-device-width. With min-width desktop browsers change stylesheet when I resize the browser window, but I can't resize a smartphone window and zooming it doesn't seem to matter.

[Christian J]

I thought max-device-width was the, width?

I think it's the same as screen width (as opposed to the page width, which might be much wider). Why did you ask?

But screen width doesn't seem like a good thing to judge by anyway. I turn images off sometimes on my Netbook. Not because of the resolution, that's large enough, but because of the slow mobile connection and to save battery time.

Didn't follow that.

[Christian J]

If we increase the max-device-width to include these, it will start to overlap with the resolutions of some netbooks (and older desktop computers). Should we really give netbooks the same inferior CSS "experience" as mobile phones?

Another idea might be to use the min-resolution media query, since the combination of small screen size and high resolution results in a high pixel density (which I understand is what W3C means with "resolution" ), but I'm not sure of mobile browser support.

[Frederiek]

What's wrong with using CSS media queries, instead of the media attribute of the LINK tag? Haven't you read the ALA article Responsive Web Design (which, btw, has caused a big hype on the web)? Nowadays, "mobile first" is advocated.

[pandy]

I thought max-device-width was the, width?

I think it's the same as screen width (as opposed to the page width, which might be much wider). Why did you ask?

Because you said max-device-width:480px but rather thought of 800px. I thought I misunderstood something.

But screen width doesn't seem like a good thing to judge by anyway. I turn images off sometimes on my Netbook. Not because of the resolution, that's large enough, but because of the slow mobile connection and to save battery time.

Didn't follow that.

It can be the slow connection rather than the screen resolution that is the show stopper. And the same devise can be used with a fast connection. I don't know if a smart phone can be hooked up to a broadband connection, but a netbook certainly can. That is, under bad circumstances I might prefer the minimalistic pages even if I don't need them resolution-wise.

[Christian J]

What's wrong with using CSS media queries, instead of the media attribute

Nothing, except that a 3.3" mobile screen might have the same resolution as a 7" netbook screen. Even if that's considered OK, there's still a need for hiding CSS when mobile browsers are buggy. Maybe in time various hide-CSS tricks will be discovered, just like for the desktop browsers.

Nowadays, "mobile first" is advocated.

Come again?

[Christian J]

Because you said max-device-width:480px but rather thought of 800px. I thought I misunderstood something.

That was just a code example. But I recall seeing sites where something like 480px is recommended as a way to detect mobile browsers, as if higher mobile resolutions didn't exist.

I don't know if a smart phone can be hooked up to a broadband connection

It can, and in addition 4G seems to be under development. Of course there are still people with slow connections only (even some desktop computers).

That is, under bad circumstances I might prefer the minimalistic pages even if I don't need them resolution-wise.

True, but in that case it's not enough to just restyle the page into a single column layout, you should also avoid downloading all the unnecessary things (inline images, JS files etc). But creating a page like that seems to be beyond the scope of CSS media queries, instead you may have to resort to server-side browser sniffing etc.

[Darin McGrew]

What's wrong with using CSS media queries, instead of the media attribute of the LINK tag?

Nothing's wrong with them, except that major mobile browsers ignore media="handheld" style sheets and use media="screen" style sheets instead. Essentially, browser vendors have once again subverted a good design by refusing to implement it.

[pandy]

I didn't know the only difference was the one column layout.

I may remember wrong, but isn't it true that image hidden with display: none are not downloaded? If so, if one bothers with a mobile version at all it would make sense to also get rid of too large images, maybe use smaller ones instead (would need to be backgrounds if it's all done with CSS, but they could still be inline images in the desktop version).

[pandy]

Hm. Now I think I did remember wrong.

[Christian J]

I didn't know the only difference was the one column layout.

I just used that as an example of a mobile friendly layout, as opposed to a mobile friendly page. The latter may also need to use less bandwidth (just like you said). This thread was mainly about the layout aspect of things.

[Christian J]

What's wrong with using CSS media queries, instead of the media attribute of the LINK tag?

Nothing's wrong with them, except that major mobile browsers ignore media="handheld" style sheets and use media="screen" style sheets instead. Essentially, browser vendors have once again subverted a good design by refusing to implement it.

I should add that media queries can be used in the LINK tag's MEDIA attribute as well.

[Frederiek]

Nowadays, "mobile first" is advocated.

Come again?

Meaning, you design for mobile first and then continue to design for desktop devices.
http://www.lukew.com/ff/entry.asp?933
http://www.abookapart.com/products/mobile-first