The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> CSS for mobile browsers
Christian J
post Dec 2 2011, 07:46 PM
Post #1


.
********

Group: WDG Moderators
Posts: 5,934
Joined: 10-August 06
Member No.: 7



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


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 2 2011, 08:35 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,218
Joined: 9-August 06
Member No.: 6



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. cool.gif


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Dec 2 2011, 08:48 PM
Post #3


WDG Member
********

Group: Root Admin
Posts: 7,998
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Dec 2 2011, 08:53 PM
Post #4


WDG Member
********

Group: Root Admin
Posts: 7,998
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE(pandy @ Dec 2 2011, 05:35 PM) *
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).


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 2 2011, 09:29 PM
Post #5


.
********

Group: WDG Moderators
Posts: 5,934
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Dec 3 2011, 02:35 AM) *

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.

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

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

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


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 2 2011, 09:35 PM
Post #6


.
********

Group: WDG Moderators
Posts: 5,934
Joined: 10-August 06
Member No.: 7



QUOTE(Darin McGrew @ Dec 3 2011, 02:48 AM) *

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.

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


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 2 2011, 09:40 PM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,218
Joined: 9-August 06
Member No.: 6



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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 2 2011, 09:44 PM
Post #8


.
********

Group: WDG Moderators
Posts: 5,934
Joined: 10-August 06
Member No.: 7



QUOTE(Darin McGrew @ Dec 3 2011, 02:53 AM) *

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.


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 2 2011, 09:51 PM
Post #9


.
********

Group: WDG Moderators
Posts: 5,934
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Dec 3 2011, 03:40 AM) *

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? unsure.gif

QUOTE
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. unsure.gif


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 2 2011, 09:55 PM
Post #10


.
********

Group: WDG Moderators
Posts: 5,934
Joined: 10-August 06
Member No.: 7



QUOTE(Christian J @ Dec 3 2011, 01:46 AM) *

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" unsure.gif ), but I'm not sure of mobile browser support.


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 3 2011, 06:27 AM
Post #11


Programming Fanatic
********

Group: Members
Posts: 4,281
Joined: 23-August 06
From: Europe
Member No.: 9



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.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 3 2011, 06:29 AM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,218
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Dec 3 2011, 03:51 AM) *

QUOTE(pandy @ Dec 3 2011, 03:40 AM) *

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? unsure.gif

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

QUOTE
QUOTE
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. unsure.gif


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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 3 2011, 06:57 AM
Post #13


.
********

Group: WDG Moderators
Posts: 5,934
Joined: 10-August 06
Member No.: 7



QUOTE(Frederiek @ Dec 3 2011, 12:27 PM) *

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.

QUOTE
Nowadays, "mobile first" is advocated.

Come again? unsure.gif


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 3 2011, 07:41 AM
Post #14


.
********

Group: WDG Moderators
Posts: 5,934
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Dec 3 2011, 12:29 PM) *

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.

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

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


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Dec 3 2011, 10:34 AM
Post #15


WDG Member
********

Group: Root Admin
Posts: 7,998
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 3 2011, 11:12 AM
Post #16


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,218
Joined: 9-August 06
Member No.: 6



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


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 3 2011, 11:13 AM
Post #17


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,218
Joined: 9-August 06
Member No.: 6



Hm. Now I think I did remember wrong. unsure.gif


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 3 2011, 03:11 PM
Post #18


.
********

Group: WDG Moderators
Posts: 5,934
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Dec 3 2011, 05:12 PM) *

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.


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 3 2011, 03:14 PM
Post #19


.
********

Group: WDG Moderators
Posts: 5,934
Joined: 10-August 06
Member No.: 7



QUOTE(Darin McGrew @ Dec 3 2011, 04:34 PM) *

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


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Dec 4 2011, 06:01 AM
Post #20


Programming Fanatic
********

Group: Members
Posts: 4,281
Joined: 23-August 06
From: Europe
Member No.: 9



QUOTE(Christian J @ Dec 3 2011, 12:57 PM) *

QUOTE
Nowadays, "mobile first" is advocated.

Come again? unsure.gif

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


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th July 2014 - 03:52 PM