CSS Media Queries not always playing ball

*edit it figures, no matter how long you rip hair out and gnash teeth, the moment you post something and then go back to try to play with the problem more, you either discover the answer or accidentally fix it. I have no idea what made it work but suddenly it does (using exactly what I could have sworn I typed in the first 100 times).
So disregard this whole post, I can’t delete it.

Hello all,

I’m redoing a site (yay I get to redo how it looks this time). I thought I’d go ahead and use media queries for the devices who understand them to let the page squish real small and all that.

Thing is, they work great on my desktop browsers when I have
@media and (max-width: somethingsmall) {
special stuff for when it’s small;
}
in my CSS sheet.

However after flipping through this awesome set of slides by Bryan Reiger I thought I would also try to do it “backwards”: mobile first, then progressively enhance for desktop.

Since many mobiles don’t support media queries, the idea is to have a sort of default stylesheet with stuff that would work on mobile, then use media queries to call another stylesheet for Desktop with more background images and widths and floats and things.

So I tried that:


    <link rel="stylesheet" type="text/css" media="screen, projection, handheld" href="scooter.css">
    <link rel="stylesheet" type="text/css" media="screen and (min-width: 600px)" href="desktop.css">

I’ve done various permutations of this. Nothing works in my desktop browsers… it’s like they’re acting like IE, just loading the desktop.css regardless of device width (and I’ve tried it with and without the “device” part (min-device-width) and also without the
<meta name=“viewport” content=“width=device-width”>
meta tag I’ve got as well. Also, strangely, within a single stylesheet things are not cascading correctly (when they did when I just had @media in the stylesheet instead of in the link tag), such as

a:visited
is overriding
form label a

Since I’m busy redoing these pages and am actively working on them, I’m not keeping my code this way. It would be nice if it worked on many mobiles but it’s essential that it works on the desktop, and right now my desktop browsers are having trouble with media=“something” .

Am I misunderstanding how these work when called via a link tag ?? I should be triggering different styles based on my browsers’ widths right??

Otherwise, I’ll have to ignore what I learned in the awesome slide show because all of my sites are so far desktop-first, mobile-second (if a site works on mobile but not on desktop it’s not allowed… if it works on desktop but breaks on mobile that is considered acceptable by the boss).

Thanks,
poes

The slide show was very awesome. I should put it in my sig. He talked at some other conference but luckily Stephen Hay mentioned it in his talk at Fronteers.
I wish I has seen the actual talk.

Glad you sorted it out Mallory.:slight_smile: I remember I got confused when trying media queries out in the css3 live course.

I liked the slide show in your link above.

I know this is a late reply, but I’m glad you posted this thread. It’s a great slideshow, and nice to see what you did to implement it. This is a great way to look at web design, given that the web is getting more and more mobile. I’m off to try this out!

BTW, the author has a blog post about this slideshow here: http://yiibu.com/articles/rethinking-the-mobile-web/
and his site is a working example of the theory.

Oh, AWESOME, I’ve been looking around to see if there was a video filmed of his presentation or something because I wanted to see it… this is the next best thing. Thank you!

Incidentally I only learned of these slides because they were mentioned briefly in Stephen Hay’s talk “Real-world Responsive Design” at Fronteers Conference 2010.
Aha, someone has a list of slides etc:
http://www.killervoltage.com/index.php/2010/10/27/fronteers-and-beyond/
Hay started Day 2 off.

You might also be interested in Luke W’s talk (that seems in some measure at least to have inspired the slideshow):

I found it a very engaging talk.

I’m starting to have second thoughts about this. :slight_smile:

Maybe it’s just me but I absolutely hate the way the screen size changes when I adjust my window on that site. It’s like trying to read a book when someone turns the page too soon. I had the same feelings when this was done with javascript.

I closed the window a bit so it sits alongside another window that I wanted to keep open and the page changed to a different format and I lost my position and thought the page had gone away as the images disappeared.

I can see many non-savvy users not knowing what’s going. It’s really disconcerting as I am a continual window re-sizer (I’ve just invented a new phrase). I’m constantly moving and resizing windows so I can keep my work visible while I look at other things. I don’t want the page to change depending on my window size - that’s my choice so leave it alone :). I don’t mind fluid sites because they have a logical re-flow but this sudden flick into another format is not good.

I don’t know what the answer is but it seems that my browsing experience has been compromised at the expense of mobile users. I don’t have a mobile phone and I don’t want a mobile experience on the desktop either.

Hmm, I saw your first sentence in my email, and thought—o no, Paul has found the flaw in this strategy—then came here to read your whole post, but to be honest, it hasn’t put me off. I actually quite like that behavior, and I’m also a chronic re-sizer. I also don’t have a mobile web device, but usage of these platforms is exploding, so I guess we have to account for them, and as their @media support is generally terrible, it makes some sense to me to reverse the process. It must be horrible to browse sites designed for wide desktops through these keyhole viewports. The suggestion is that desktop browsing will soon be (if it isn’t already) the exception rather than the rule, so I guess we desk-toppers (there’s another new word!) will have to get used to it.

In that video I linked to, Wroblewski shows how much more logical sites designed for mobile tend to be (stripped of all the usual fluff that is mostly just confusing). So it’s not a bad way of looking at site / content design from the outset.

Anyway, I take your point about disappearing text etc. I tend to highlight the text that I’m up to before resizing a page, so that it’s easier to find after the re-size, so I don’t find it a real problem. But the narrow layout is usually easier to read in that mobile layout, so I find it better anyway if I need pages side by side.

Anyhow, that’s my 2c.

Yes my previous post was a bit tongue in cheek but still playing the Devils advocate “Whatever happened to putting the user in control ?” :slight_smile:

I never liked it when they did exactly the same thing with JS and neither did most users which is why it never took off. I don’t really see much of a difference here.

Perhaps the answer is not to start switching the screen sizes unless it’s at about 480px which allows normal usage without interruption. The ipad could be accommodated in a normal elastic site anyway.

Mobile web is taking off but it won’t replace desktop browsing and indeed mobile users have their own requirements and are using things in a different way to desktop users so attempting to marry both is always going to be difficult.

I wonder what will happen if most mobile usage is going to be app based as suggested here.

I set my particular page to change at 600px. I figure I’m catching desktops still running 800x600 even if they have some goofy sidebar or whatever still… while some devices like the tablets, I really don’t know all the possible dimensions but they’re wider than the phones and PDAs.

Question is what the iPhone 4 does. It has a resolution of 960px… does it believe it can show a 960px-wide-based css sheet?

I wonder what will happen if most mobile usage is going to be app based as suggested here.

Meh, he meant iPhone users preferred a particular app than his particular site. Abode claims otherwise:
http://www.readwriteweb.com/mobile/2010/10/adobe-says-people-prefer-mobile-web-not-apps.php

Question is what the iPhone 4 does. It has a resolution of 960px… does it believe it can show a 960px-wide-based css sheet?

It’s getting complicated now :slight_smile: