Pure CSS Responsive website design backwards compatibility best practice?

I haven’t posted a philosophical question in a while so I guess this one is due. I have been toying with media queries and making sites that are responsive and accommodate the ever changing mobile device market. The first thing I heard when I dove into this endeavor was that the best practice is to code for mobile first ( smallest simplest design), and progressively enhance. This actually does make a lot of sense, saves a lot of CSS resets and rewrting… EXCEPT: What happens if your site is viewed by an OLD browsers that doesn’t support media queries.

I followed the (small device first) mantra in this sample code: the thing is (not to mention a dreaded IE… which I suppose can be resolved with conditional comments) if someone ON A DESKTOP SYSTEM WITH A WIDE MONITOR loaded the site in FF3, which I don’t think support media queries, loaded this page it would display as it would on the smallest of mobile devices ( as all the med queries would be ignored).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
	<head>
		<title></title>
		<style type="text/css">
 * {font-size:100%; margin:0; padding:0; }
 #hed{border-bottom: 5px solid teal; background: orange}
 #brand{font-size: 200%; font-weight: bold; background: orange}
.hNav {  background: pink;   font-family: arial;   overflow: hidden;}
.hNav li { list-style:none;  }
.hNav li form>*{margin:0; padding:0  }
.hNav li +li {border-top:1px solid #eee}
.hNav li +li a, .hNav li form{ border-top:1px solid red}
form {  line-height: .8; padding:.5em}
form input{height:1em padding:.2em ; font-size: 75%; display:block; margin-top:.5em}
.hNav a {display:block;   text-decoration:none;padding:.5em; display:block;}
.hNav a:hover {background: #155}
.hr{width:360px; height: 10px; background: red}	
.hNav{border-top: 1px solid #eee;}
@media only screen and (min-width:480px){
	form input{ display:inline;margin-top:auto;margin-left:.5em}
	#brand{width:180px; float:left;  }
	.hNav{border-top: none;border-left: 1px solid brown}
	.hNav li{ border-left: 1px solid #eee}
	.hNav li:hover{ border-left-color:transparent;}
	.hNav li:last-child:hover{ border-left-color:#eee;}
}
@media only screen and  (min-width:768px){
	#hed{border: none; background: none;}
	 #brand, .hNav{width: auto; margin:0 auto; float:none; border:none;}
	 	.hNav li{ border-left:none;}

    .hNav li +li {border-top:none; border-left:1px solid #eee}
	.hNav li +li a, .hNav li form{ border-top:none; border-left:1px solid red}
	.hNav{border-radius: 3px 1em ;border-radius: 3px 1em ; overflow: hidden;}
	.hNav li { float:left;  }
	.hNav li:last-child { float:right;}
	#brand {margin-bottom:.25em}

}
@media only screen and (min-width:1024px){
	#brand,.hNav{ width:80%; margin-left auto; margin-right: auto}
}

		</style>
	</head>
	<body>
	<div id="hed">
	<div id="brand">My Logo Brand</div>
<ul class="hNav">
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item longer sample item</a></li>
	<li><a href="#">item</a></li>
	<li><form><div>Search:<input type="text" name="search"></div></form></li>
</ul>	
</div>
<div class="hr"></div>
</body>
</html>

So the question is, before resorting to .js browser sniffing, conditional comments et all, what is the BEST practice fro making a site display in its full-desktop glory by default… but streamline and accessible in other devices? Is .js unavoidable if this is one’s goal?

Seems to me that if you want your responsive site to work on desktop browsers that don’t support media queries (which I would think is a standard requirement) then your only option is to code your CSS for desktop screens and add media queried CSS for the smaller devices.

Further, I don’t personally see how coding for the smallest screen first would save on CSS. I’d want to see some concrete examples of that before I accept it as a best practice.

The idea is saves on CSS because you don’t have to reset the styles done for the larger screens. I f you coded for desktop first you would have to UNDO the code in each of your @media rules for smaller screens. This seems actually EASIER to do, thought wise… but it is more typing ( code) in the end.

Seems to me that if you want your responsive site to work on desktop browsers that don’t support media queries (which I would think is a standard requirement) then your only option is to code your CSS for desktop screens and add media queried CSS for the smaller devices.

I would have thought most client s would by default want to ask(or will say yes to) old browsers ( remember when being able to support of IE6/7 was the mark of a true designer?)

This is the ever so famous link on mobile first it seems to suggest that the best practice it seems to suggest the a fore mention solution for IE/OLD IE, but doesnt mention safari2 or FF3…or the like…

And if you started with mobile first, wouldn’t you still have to undo mobile styling to implement the desktop design? If the mobile and desktop designs are significantly different, then you’ll always end up undoing one to implement the other.

I checked out your link. It has a slightly different justification. The reasoning is that if you build mobile first, then your mobile site need not download the desktop styles as all. It doesn’t save you from extra typing; it saves the browser from extra downloading. Your link also claims that media queries won’t work on most mobile devices. I find that claim a little sketchy; I’ll probably go double check some stats after this. But if that claim is true, then ultimately you can’t rely on media queries in either mobile or desktop browsers, and your options are to either allow the mobile device that don’t support media queries to scale or scroll as they see fit, or use JS to mimic media queries for the desktop browser.

I haven’t used them extensively yet, but I personally don’t have a problem with js making the switch in those browsers that don’t support them because it’s such a small number.

Generally I’m moving to supporting only the latest versions of the major browsers now, plus multiple versions of IE, with their rapid release cycle it makes testing all the versions independently impossible.

Your content should be the best it can be to the most people, optimising for the future may make the mobile first approach the smarter choice.
Perhaps your user logs are one of the more important decision makers.

You use conditional comments to serve the regular desktop stylesheet to IE6 and IE7 regardless of the media query response (because there won’t be one). As a general rule, you don’t normally need to worry about old versions of anything other than IE, because the numbers of people using obsolete versions of any other browser will be tiny.

Not to point out the BLATENTLY obvious… (and again laughing at all the responses so far but declare your largest size FIRST then use the media queries to undo it… you’re declaring the smallest first so queryless gets that! You’ve just got your order backwards. That’s it, that’s all you need to do, declare from largest to smallest instead of smallest to largest… Declare what you want default FIRST then override it with the queries. You’re declaring the one you don’t want as the fallback first – of course it’s not doing what you want.

Off Topic:

Though it took me a while to figure out what you are even trying to accomplish, what with the lack of line-feeds between selectors, dumping all your attributes and properties on a single line, using a strange and broken universal reset, using a div with a class instead of an actual HR, using a div with a class instead of a heading tag, putting a form in a list when that’s not likely data/choices related to the list… or just the oddball/inconsistent code indentation. :smiley:

If you start with a design that works everywhere before you add bells and whistles then it doesn’t matter if you lose browsers on the way up as they will revert to the original working display. At least that’s how I interpreted it.

Of course the original design will be pretty basic but that won’t really matter too much as not many users will be seeing that. You will enhance the display for more capable devices but any that fall through the net just revert back to the original working display.

However, I don’t really think there is an easy solution as the landscape changes almost daily and there’s always one more hoop to jump through.

The problem with that is that you’re relying on the least capable devices (ie basic phones) to support media queries, when they are the least likely to do so.

Media queries are supported by IE9+, Firefox 3.5+, Opera 9.5+, Chrome 4+, Safari 4+, and all recent versions of Android, Opera Mini/Mobile and iOS Safari. So apart from IE6/7/8 (which you can target with conditional stylesheets), you can pretty comfortably assume that any device that should be using a larger-than-minimum version of the stylesheet will support media queries. Basic mobile devices, on the other hand, quite possibly won’t, and so will need to be served the most basic version of the stylesheet as the default. (If we could rely on media=“handheld” to work then things might be different but, well, we can’t).

That’s why the default stylesheet should fit on the smallest device, and you then use media queries to give larger devices displays suited to their capabilities.

And if you started with mobile first, wouldn’t you still have to undo mobile styling to implement the desktop design? If the mobile and desktop designs are significantly different, then you’ll always end up undoing one to implement the other.

Jeff, please look at my example… you will see that I didn’t UNDO anything ( nearly). Really as the small screens require the least complex layout… I really just built on top. this is part 1) of why I like mobile first part 2) being as DS60 pointed out not having to load both LARGE and Small file size… and those only to be undone anyway.

If you start with a design that works everywhere before you add bells and whistles then it doesn’t matter if you lose browsers on the way up as they will revert to the original working display

Yes but here is the rub. since original design is basic so as to d/l quick and look good at 320px wide it looks OBVIOUSLY unfinished when FF2 displays the same thing on a 1920px wide monitor or such. I HATE to say this, but a CLIENT will find that more “broken” than the full page w/bells and whistled being displayed through a “keyhole” at 320px; I am trying to prep myself for straddling that line of client being right while technically wrong.

I consider browser sniffing but:

  1. I have generally avoided .js crutches for css for anything under IE<8 until now
  2. and again if you are going to make this .js dependent on one… might as well go full hog. (And because DS60 is going to say it… I would do it w/o jQuery :P) ; Still, in principle , .js shims for CSS feel like saying “you must have … that to view this” which is a hair away from saying “best viewed on so and so browser”

If I must go .js I must go .js but I wonder if anyone had devised a pure CSS solution or if that just what is considered standard now.

Me too. The problem with “normal” sites is that weaker devices may display them as a jumbled, broken mess, so the mobile first idea is to present some clean, basic styles for weaker devices and then serve up something nicer for more capable devices via media queries. So yes, the dilemma is then how you deal with older IEs. Most go for conditional comments, but it’s interesting to see some people not bothering. For example, Jeremy Keith (adaction.com) didn’t bother, figuring older IEs could just get the basic styles … which I think is a good idea, but which commercial sites probably can’t afford to do.

Ideally, the code served to simpler devices is not redundant on more capable devices, but is refined by the @media styles.

This is a rough quicky, but shows what I mean (and divides it up into the proper separate files, cleans it up, etc, etc…)

http://www.cutcodedown.com/for_others/dresden/take2/template.html

You know the drill:

http://www.cutcodedown.com/for_others/dresden/take2/

Directory wide open for easy access to the bits and pieces. Didn’t really test it cross-browser a whole lot, but it should get you going the right direction. Again, default version FIRST, THEN the specific target versions.

… and for your ‘default’, don’t use a media query – something else I noticed during the rewrite and a hefty part of what was biting you on this.

Ah, I see where you were going, but that’s not why I use them – I generally assume any device too stupid to know what media queries are is either going to be smart enough to handle a 800 layout, or isn’t going to use anything more than FAC from the stylesheet. (blazer and Opera Mobile/Mini in “small screen” mode come to mind)

… and really with smart handhelds running android dropping into the bargain price range, how long are we going to bend over backwards to support people with eight year old phones – Hell, I’m more likely to tell them to shove it than I am IE5 users. :slight_smile:

It also seems that if you use the smallest as default for phones that EXPECT a desktop layout without queries (pretty much anything running Opera mobile/mini) you’re going to get LESS desirable results.

Basically you need to pick one – legacy desktops or legacy handhelds – you can’t do both reliably…

You should read the slides posted above, the stats disagree with you. Mobile AND Crappy mobiles are more important globally than your recognise.

For what it’s worth… http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201101-201201

Do you have a transcript of that with meaningful text? I lost interest around slide 9 since it’s goofy unrelated pictures with three to six words per page. In the words of the Wendy’s lady “WHERE’S THE BEEF?” – cause I don’t see any beef. If there’s a point in there, I lost interest LONG before it gets to it… More boring than my grandfathers slideshow of visiting the Grand Canyon. 140 slides of that garbage? Do people really sit through that?

… and their ‘number of people with mobile devices’ number exceeds the statistical number of Internet users by 50% – calling their numbers just a wee bit into question.

/FAIL/FAIL/ – crappy slideshows, infographics – usually little more than lies by omission and again, all flash, no substance.

Also, @jeff… is there supposed to be something at that link, because all I get is a spinning ‘loading’ icon in the middle of the content area…

Basically you need to pick one – legacy desktops or legacy handhelds – you can’t do both reliably…
and that answers MY query (pun) , DS60, but let me clarify just in case.

What you are saying is built the DEFAULT STYLE first ( which most clients are going to request to be the ‘desktop’ version) and reset (change/add/remove) properties as need be to accommodate other browsers?

Are you perhaps browsing without JS or flash?

No, I have all that on and I just get the spinning wheel, too. :frowning: