Examining some common mistakes

When creating sites, and in particular, those that are responsive, it is easy to make mistakes; after all, it's like learning any new technology; we're not perfect from the outset!

To help with your first few steps into the world of responsive construction and creating media queries, let's spend a little time exploring some of the more common mistakes, understand why they cause issues, and go through a few pointers to help avoid these problems:

  • Not including the viewport tag: This is one of the most common errors to make. When working on mobile devices, we have to include this tag if we want them to be displayed without zooming:
            <meta name="viewport" content="width=device-width, initial-scale=1″>

    If the tag is not included, then text will appear smaller, as mobile devices zoom pages by default.

  • Syntax errors: Yes, this old chestnut is another common cause of problems! Hard as it may seem, but mistyping a query can throw up errors, especially for those new to writing media queries. There is no right or wrong answer here. It's a matter of taking care when writing the code; copying and pasting. Take a look at the CSS Media Queries site (at http://cssmediaqueries.com/) for plenty of examples you can use.
  • Inclusive media queries: Take a look at these two queries for a moment. At first glance, they look perfectly reasonable, don't they? After all, both are set for screen display only and will only show when the screen size is above 767px:
            @media screen and (max-width: 767px) {
          h1 { 
          font-size: 30px; 
          }
        }
        @media screen and (min-width: 767px) {
          h1 { 
          font-size: 40px 
          } 
        }

    Trouble is, we still have an issue here. If we set both of these queries in our style sheet, then they will both kick in if our screen estate is 767px or greater. At best, we might end up with h1 being 40px (instead of 30px); at worst, we will get some odd effects! It pays to take care over what media queries you set. Make sure that your queries do not overlap.

  • Specificity and order of inheritance: Staying with the theme of duplicated selectors (in a sense), another trap that can trip us up is that of inheritance. Say, for example, we specify these two attributes:
            h3 {color: darkred;}
        h3 {color: #f00;}

    What color will we have? Well, if you said dark red, then get ready for a surprise; the answer is actually #f00 or green. Why would this cause us an issue? If we had written a couple of media queries, but didn't take care over the breakpoints or didn't plan the order of our queries properly, then we might end up adding one too many assignments. Remember, if two selectors apply to the same element, the one with higher specificity wins.

It's all too easy to overthink an issue when working with media queries. In many cases, it simply requires a little forethought and care, and we can produce some useful rules to manage our content on mobile devices without too much overlap.

Let's change tack and move on. Assuming any code we write is syntactically correct, now is a good opportunity to explore some guidelines we can follow when writing media queries. Although the next section is entitled Exploring best practices, I personally hate the phrase. It is one which is used and abused to death! Instead, consider them as some friendly tips to help improve your nascent skills when writing queries. It's all about exploring the art of possible, while balancing it with catering for more practical needs, such as our target market and supported devices.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset