5 Replies Latest reply on Apr 20, 2012 7:05 AM by osgood_

    Responsive Design and @media queries

    martcol Level 4

      I thought my HTML/CSS guns were loaded and good to go; and then I started reading about responsive web design!

       

      If I have a rule declared in the main body of my CSS and add a media query what happens to the existing rule?

       

      It looks to me with my experimenting so far that if I take a style in the main section and duplicate that with some edits for a smaller width, I have to then remove it from the original and replicate it in another @media query.  Is that correct? 

       

      So if I have this:

       

      header {

          background: url("images/headerhand.png") no-repeat scroll left top transparent;

          height: 300px;

          margin: 40px auto 0;

          min-height: 300px;

          text-align: left;

          width: 100%;

      }

       

      I need to put this in a @media query for the below break point:

       

      header {

          background: none;

          height: 300px;

          margin: 40px auto 0;

          min-height: 300px;

          text-align: left;

          width: 100%;

      }

       

      I then take the rule out of the main section of my style sheet and put that in another media query for the above break point.

       

       

      So if I have a header element with background image and color, and border-radius and whatever but only want to lose the background image at a certain break point, I then need two @media queries one for below the break point and one for above and then remove the whole rule from the main section of the site?

       

      Oh my, that was so complicated, I am not sure I even understand my own question!

       

      Martin

       

      PS "Mobile First" is starting to make a lot of sense!

        • 1. Re: Responsive Design and @media queries
          gbotour

          The one thing I see people overlooking in this debate (not only here) is that reproducing a "full size" site onto a mobile device is a waste of time. An example from the UK is the Argos site. Try and view that on a phone - its a nightmare and not unexpecedly so. Same with Play .com and anything similar.

           

          The approach has to be to produce a cut down version of the site that fits in one column and can be read easily without constant pinching. It shouldn't contain large background images because they will create problems with download speed and , unless you are connected to your home wi-fi system, bandwidth. I've seen some recommendations to use display: none in the css but whilst that hides a graphic from view it doesn't stop it being downloaded.

           

          Using the restaurant example you could get away with displaying the menu with prices,  the location, directions, reservation procedure and take away ordering options.

           

          Yes, you would want to put some enticing text in and around the facts but basically its painless functionality that you want to provide results.

           

          There will be instances where 2 columns would be viewable on a tablet but again the text needs to be large enough to be read without viewers having to keep manipulating text size.

           

          My summary is :-

           

          Phones. Be prepared to create a completely different version of a site.

           

          Tablets. Pay attention to readability and images and you could get away with modifyying a desktop site.

           

          Either way, additional work is required.

          • 2. Re: Responsive Design and @media queries
            osgood_ Level 8

            gbotour wrote:

             

             

            My summary is :-

             

            Phones. Be prepared to create a completely different version of a site.

             

            That's my view too if I look into this deeper. I don't think media queries by themselves are enough and to be quite frank the design will need to change so radically to fit a smartphone UNLESS its the simplest of sites that there is much less confusion just starting over.

             

            And then what happens to CMS's (Content Management Systems) I mean the client will have 3 or 4 versions to update, no?

             

            Take an 'embedded' image which is say 980px wide for a standard desktop device. That's no good on a smart phone or ipod etc. So how do you navigate that one without producing a completely different site and sending the end user to it/them based on 'sniffing' out the device which is being used?

             

            Ok you can use manually scaled down background images in the media query css BUT that isn't going to be any use to a client who wants to update the site via a CMS. Plus if its a slideshow then its not possible to use background images anyway.

             

            Any views on the above?

            • 3. Re: Responsive Design and @media queries
              gbotour Level 1

              "the smartphone is more viewed as a convinience rather than a tool that you would choose to surf the web on"

               

              I think you'll find that applies to only a segment of the potential market. There are plenty of younger people who would say "losing my phone would be like losing my right arm". One of my sons aged 31 can't afford a tablet so he uses his phone on the internet to a large degree and he finds it especially useful whilst out and about. He's so used to using it that he can find stuff quicker on his phone than I can on a desltop.There are many more like him. Additionally many more businesses use tablets and phones as an essential part of their day to day work so that employees get used to working with those devices and carry on with that culture outside office hours.

               

              As you say there are probably many businesses that don't want anything other than a desktop version of a site (heck, a lot of businesses don't even need one of those anyway) but that leaves plenty that will want the additional options of allowing customers to surf their site "on the go". Only your own future experience will tell you which way to go. Refuse to get into phones and tablets and see how much business passes you by. If the answer is none then you've lost nothing. There's a  balance to be found between the cost of learning against the business need. It will be different for all of us.

              • 4. Re: Responsive Design and @media queries
                osgood_ Level 8

                gbotour wrote:

                 

                 

                As you say there are probably many businesses that don't want anything other than a desktop version of a site (heck, a lot of businesses don't even need one of those anyway) but that leaves plenty that will want the additional options of allowing customers to surf their site "on the go". Only your own future experience will tell you which way to go. Refuse to get into phones and tablets and see how much business passes you by. If the answer is none then you've lost nothing. There's a  balance to be found between the cost of learning against the business need. It will be different for all of us.

                 

                I totally accept that and agree. Even if its something that you 'think' you may not require you should at least investigate the solutions.

                 

                The problems faced are as has been already stated in this thread, numerous and enormous. Yes you can isolate the design, which seems a good idea and a simpler solution to me, (just as some created seperate sites when IE was a real PITA way back when and you 'sniffed' out what browser the end user was viewing the site in) You still have the issue of updating both version though, how does a CMS integrate with both or do you create independent CMS as well etc etc.

                 

                If this was the year 2000 when the web was basically very text orientated and most were on 56k dial up then it would be less of an issue to create variable designs. Show me a website these days which doesn't use some kind of 'intensive' slideshow, revolving images, dynamic content, etc etc. Are media queries really up to that? I don't know because its quite a new technique. The example tutorials as put up by David Powers shows a very very basic static site which most likely uses css background images to achieve the desired design results across all devices. This is ok IF you are soley in control of the website but CMS's are big these days and that isn't going to work. So we are heading back to either the client not being able to update their own site OR creating 2 or 3 sites for them to manage.

                 

                I still don't accept the argument that people, young or old, would prefer to view on a limited size screen if a large screen was available. That's like saying I prefer my 6 inch portable TV rather than my 42 inch TV screen. The viewing experience just isn't as good. That's why I said it was 'convenient'

                • 5. Re: Responsive Design and @media queries
                  osgood_ Level 8

                  I've been doing some digging around today and although media queries seem simple enough to handle they come with their downsides as has been mentioned already by PZ. Obviously one site really does NOT fit all. Images for the desktop site in my opinion would be too download intensive for mobile devices and they can't be interchanged easily, only scaled. I also couldn't really see myself creating half a dozen different media queries for every page in a 100 page site, it would be a nightmare to manage, background images seem to pose an issue as well, without jumping through hoops, Might be OK for small sites, probably is.

                   

                  Media queries look too cumbersome for my tastes. My view so far is to create a stand alone, simple cut-down website specifically for mobile devices and sniff out the screen width.