Printable Version of Topic

Posted by: Christian J Dec 2 2011, 07:46 PM

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-of-the-mobile-stylesheet

So instead of media handheld, it's often recommended to use http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/, like this:


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?

Posted by: pandy Dec 2 2011, 08:35 PM

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.

Posted by: Darin McGrew Dec 2 2011, 08:48 PM

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.

Posted by: Darin McGrew Dec 2 2011, 08:53 PM

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).

Posted by: Christian J Dec 2 2011, 09:29 PM

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


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


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).

Posted by: Christian J Dec 2 2011, 09:35 PM

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.


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

Posted by: pandy Dec 2 2011, 09:40 PM

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.

Posted by: Christian J Dec 2 2011, 09:44 PM

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.

Posted by: Christian J Dec 2 2011, 09:51 PM

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


Didn't follow that.

Posted by: Christian J Dec 2 2011, 09:55 PM

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.

Posted by: Frederiek Dec 3 2011, 06:27 AM

What's wrong with using CSS media queries, instead of the media attribute of the LINK tag? Haven't you read the ALA article http://www.alistapart.com/articles/responsive-web-design/ (which, btw, has caused a big hype on the web)? Nowadays, "mobile first" is advocated.

Posted by: pandy Dec 3 2011, 06:29 AM

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



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.

Posted by: Christian J Dec 3 2011, 06:57 AM

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.


Come again?

Posted by: Christian J Dec 3 2011, 07:41 AM

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.


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).


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.

Posted by: Darin McGrew Dec 3 2011, 10:34 AM

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.

Posted by: pandy Dec 3 2011, 11:12 AM

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).

Posted by: pandy Dec 3 2011, 11:13 AM

Hm. Now I think I did remember wrong.

Posted by: Christian J Dec 3 2011, 03:11 PM

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.

Posted by: Christian J Dec 3 2011, 03:14 PM

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

Posted by: Frederiek Dec 4 2011, 06:01 AM

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

Posted by: Frederiek Dec 4 2011, 06:04 AM

24ways just posted an article about that: http://24ways.org/2011/conditional-loading-for-responsive-designs

Posted by: Frederiek Dec 4 2011, 06:10 AM

That's true. But you'll have to have several LINK tags to accomodate the different devices.

Posted by: Christian J Dec 4 2011, 09:50 AM

That sounds like the "KISS principle" and "progressive enhancement" wrapped in a new buzzword. Lets hope it makes the bloat go away from desktop web sites too.

It seems true that smartphone sales have exploded, but I'm not sure if the increased traffic is about ordinary web surfing (after all web sites are a pain to use on small screens, even when optimized for mobile). More likely most of the traffic is due to social site activities (Facebook), multiplayer games and similar.

Posted by: Christian J Dec 4 2011, 11:06 AM

Now I read that smartphone resolutions may overlap even with those of contemporary desktop computers:

http://en.wikipedia.org/wiki/Samsung_Galaxy_Note: 1280x800px
http://en.wikipedia.org/wiki/Google_Galaxy_Nexus: 1280x720px

Posted by: Christian J Dec 4 2011, 05:55 PM

Possibly the META viewport element can help preventing the overlapping: http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

Posted by: Christian J Dec 4 2011, 09:19 PM

After quick-testing with

it does appear max-width is smaller than the actual screen resolution. It also changes with orientation.

If this applies to smartphones in general, it means you can use relatively small max-width values (like 600px?) to sniff for smartphones without excluding those with higher resolutions.

Posted by: Frederiek Dec 6 2011, 05:13 AM

There are quite a few interesting articles on the web about media queries and available space, see a listing at http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html#mq , in particular:
- CSS Media Queries & Using Available Space - Chris Coyier
- CSS3 Media Queries - Nick La
- CSS Media Queries and IE Fix - Serban Ghita (though I'm not convinced by the demo)
and links from within these articles.

Just thought that might interest you.

Posted by: Christian J Dec 6 2011, 10:43 PM

For one thing the IE Fix script doesn't seem to react to the user resizing the window (like CSS media queries do), but that should be easy to add with an onresize event.

Posted by: pandy Dec 6 2011, 10:52 PM

Didn't work in anything I tried and it was ugly when it failed. Not the newest of anything here, but FF, Opera and IE.

Posted by: Christian J Dec 7 2011, 08:22 AM

Technically it works for me, but the chosen width limits are odd:


which I guess means windows between 1025 and 1199px get none of the above stylesheets, instead defaulting to "core.css".

Also I'm not sure if it's safe to use the same value for both a max- and min-width (480px), maybe one should be 481px.

And of course you must reload the window to make the javascript fix change stylesheet in IE8 and older.

Posted by: pandy Dec 7 2011, 08:37 AM

My point was that far from everyone uses the latest browser version. It's bad when things fails in browser that aren't really old, me thinks. If it at least did nothing, but it does do something and its ugly. Well, except in IE7 where it does nothing.

Posted by: Christian J Dec 7 2011, 09:20 AM

I see what you mean after testing in my old K-Meleon. It does work in my IE6+ though (using IETester).

Using width queries for desktop browsers is a bit off-topic, but an interesting topic nevertheless. I suspect we'll see a return of the fixed-width layouts - but with several fixed widths per page this time - causing hor. scrolling close to the queries' border-line values. The demo on http://ghita.org/ux/css-media-query.php is actually a good warning example of that: the hor. scrollbar shows up as soon as the window is just a little narrower than 1024px, then the scrollbar grows more and more until it goes away abruptly when the smallscreen styling kicks in at 480px.

Posted by: Frederiek Dec 7 2011, 11:53 AM

Like I said, I wasn't convinced by that demo. It's even worse: at 1199px the boxes turn small (see below (having used a media query bookmarklet to show the size)), then from 990 all is "well", but the horizontal scrollbar starts to show, until about 480 and even around there problems come up.



On my current business web site, I use only max-widths for desktop (no width specified), 800px, 520px, 400px and 350px, which seems to cover most devices.
I don't have a smartphone, but it's ok on an iPad.

Posted by: pandy Dec 7 2011, 02:26 PM

Yeah, that's what happened all the time for me. It turned large and it turned small as I resized the browser window but it didn't always fit. When the window gets small enough the design suddenly gets wide and vice versa.

I thought mobiles reformatted the layout themselves. Isn't that so anymore?

Posted by: Christian J Dec 7 2011, 02:37 PM

Opera Mobile might do it with the "Single column view" setting. Others try to make the page look just like on large screen but in miniature size, so you may have to drag a page to the part you want to read and then zoom in that part. (That's why mobile browser vendors ignore media handheld: so that they can force this idea on users. )

Posted by: Darin McGrew Dec 7 2011, 02:53 PM

The default Android browser shows the page as a thumbnail of the media="screen" version. When you tap on a location, then it zooms into that location. It does seem to apply max-width to elements with text content though, so the zoomed-in paragraphs fit inside the available display area.

Posted by: pandy Dec 7 2011, 03:10 PM

The world is getting so complicated.

Posted by: Christian J Jan 15 2012, 08:59 PM

According to http://www.quirksmode.org/blog/archives/2012/01/the_four_device.html#link3 mobile devices ("that fit in your pocket and have mobile connectivity") make up a very large part in certain developing countries.

Here are the graphs for Nigeria: http://gs.statcounter.com/#mobile_vs_desktop-NG-monthly-201012-201112
Africa as a whole is still dominated by desktop, though: http://gs.statcounter.com/#mobile_vs_desktop-af-monthly-201012-201112