CSS for mobile browsers |
CSS for mobile browsers |
Frederiek |
Dec 4 2011, 06:04 AM
Post
#21
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
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 |
Dec 4 2011, 06:10 AM
Post
#22
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
QUOTE 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 |
Dec 4 2011, 09:50 AM
Post
#23
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
QUOTE 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 |
Dec 4 2011, 11:06 AM
Post
#24
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
Dec 4 2011, 05:55 PM
Post
#25
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Possibly the META viewport element can help preventing the overlapping: http://www.quirksmode.org/blog/archives/20...ining_meta.html
|
Christian J |
Dec 4 2011, 09:19 PM
Post
#26
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
Dec 6 2011, 05:13 AM
Post
#27
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
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 |
Dec 6 2011, 10:43 PM
Post
#28
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
|
pandy |
Dec 6 2011, 10:52 PM
Post
#29
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Dec 7 2011, 08:22 AM
Post
#30
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
Dec 7 2011, 08:37 AM
Post
#31
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Dec 7 2011, 09:20 AM
Post
#32
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
Dec 7 2011, 11:53 AM
Post
#33
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
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 |
Dec 7 2011, 02:26 PM
Post
#34
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Dec 7 2011, 02:37 PM
Post
#35
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
Dec 7 2011, 02:53 PM
Post
#36
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
QUOTE 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 |
Dec 7 2011, 03:10 PM
Post
#37
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
The world is getting so complicated.
|
Christian J |
Jan 15 2012, 08:59 PM
Post
#38
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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 |
Lo-Fi Version | Time is now: 24th April 2024 - 12:57 AM |