SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

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

    Code:
    <!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?

  2. #2
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,314
    Mentioned
    19 Post(s)
    Tagged
    1 Thread(s)
    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.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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....

  4. #4
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,314
    Mentioned
    19 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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.
    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.

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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.

  6. #6
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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.
    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.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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.
    http://www.lukew.com/ff/entry.asp?933

  10. #10
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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.
    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.

  11. #11
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    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.

  13. #13
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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_other.../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.

  14. #14
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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.
    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.

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

  15. #15
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    ... 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.

    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.
    http://www.slideshare.net/bryanriege...e-web-by-yiibu

  16. #16
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,314
    Mentioned
    19 Post(s)
    Tagged
    1 Thread(s)

  17. #17
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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...

  18. #18
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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?

  19. #19
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,314
    Mentioned
    19 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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...
    Are you perhaps browsing without JS or flash?

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Jeff Mott View Post
    Are you perhaps browsing without JS or flash?
    No, I have all that on and I just get the spinning wheel, too.

  21. #21
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,314
    Mentioned
    19 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    No, I have all that on and I just get the spinning wheel, too.
    Hmm... not sure what's up with that. It showed mobile vs desktop stats, with desktop at 91.5% and mobile at 8.5%

    Poor quality screenshot... http://www.webpagetest.org/results/1...1/1_screen.jpg

  22. #22
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    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?
    Well, default for SCREEN (since there really should be no such thing as a default) on which all other screen values are based... I also wouldn't say 'browser' on that either.

    Remember, CSS is a first in, first out -- code order based. Later properties override earlier ones -- and since if a query fails it's not applied, you have to leverage that.

    Really it comes down to prioritizing behaviors and understanding that, to be brutally frank, old mobile devices SUCK... there were no standards, it's fractured by manufacturer, and everyone ran their own direction to try and make normal desktop layouts work on their devices or specific 'WAP' type pages that few if any developers wasted their time trying to do anything with... So if you are thinking about legacy pre-iOS pre-Droid phones, DON'T WASTE YOUR TIME... because it's such an unpredictable mess you're probably better off sending them what you'd send desktop users... since they should be used to pages being broken in the first place; if you keep semantic markup and keep in mind most of the legacy ones ignore CSS layout and just pull FAC, you're fine. (again, semantic layout and graceful degradation FTW!)

    They're giving us the tools in the here and now to do it better on the popular devices, so concentrate on that. Particularly since the concepts of separation of presentation from content using semantic markup came about for this very purpose.

  23. #23
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jeff Mott View Post
    Hmm... not sure what's up with that. It showed mobile vs desktop stats, with desktop at 91.5% and mobile at 8.5%
    Works for me if I switch it to a bar graph... the line graph refuses to load in either Opera or FF. (don't have chrome on the lappy).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •