CSS for mobile browsers Options

[Frederiek]

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

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

[Frederiek]

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

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

[Christian J]

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

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.

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

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

Samsung Galaxy Note: 1280x800px
Google Galaxy Nexus: 1280x720px

[Christian J]

Possibly the META viewport element can help preventing the overlapping: http://www.quirksmode.org/blog/archives/20...ining_meta.html

[Christian J]

After quick-testing with

CODE

<meta name="viewport" content="width=device-width">

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.

[Frederiek]

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...ign/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.

[Christian J]

- CSS Media Queries and IE Fix - Serban Ghita (though I'm not convinced by the demo)

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.

[pandy]

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.

[Christian J]

Didn't work in anything I tried and it was ugly when it failed.

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

CODE

max-width: 480px - smartphone.css
min-width: 480px and max-width: 1024px - tablets.css
min-width: 1200px - wide.css

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.

[pandy]

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.

[Christian J]

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.

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.

[Frederiek]

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.

[pandy]

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?

[Christian J]

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

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

[Darin McGrew]

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

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.

[pandy]

The world is getting so complicated.

[Christian J]

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.

According to http://www.quirksmode.org/blog/archives/20...vice.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_deskt...y-201012-201112
Africa as a whole is still dominated by desktop, though: http://gs.statcounter.com/#mobile_vs_deskt...y-201012-201112