Introduction to Responsive Web Design: Part 2

You are starting to understand response web design and are now wanting more details in how it works.

Media Queries


Media queries is where the magic happens in responsive design. To understand media queries lets look at a simple example of one first:

div {
    background: green;
}

@media screen and (min-width: 600px) {
 
    div {
        background: red;
    }

}

The first part will make sense, the <div> will have a background of “green.” The @media is how you start off your media queries. Next “screen” tells the browser to only apply this to “screens.” You can also use print, projection, tv, all , along with few others. You can see the full list on the W3’s website. After this you give the arguments. In the example this is telling the browsers if you viewport width is more then 600px do the following. You can use min-width, max-width, min-height, max-height, or even a combination of them. Say you wanted to use a min-width and min-height you would write it like this:

@media screen and (min-width: 540px) and (min-height: 400px) {

    //Some CSS Here     

}

Most of the time you will only use one property but every now and then you may need to use more then one.

Mobile First


Mobile first is the idea that you build a website from smallest viewport to largest viewport. It may seem weird at first but after you build a site or two like this it will become much easier.

One of the reasons to build mobile first is to ensure no matter what device you are viewing a website on it will be useable. For example if a phone doesn’t support media queries and you built your site “desktop first” (Large to small) the desktop version of your site would be rendered on that phone. With mobile first you ensure that this will not happen.

I already hear some of you saying “What about IE 8? It doesn’t support media queries.” Luckily someone has already solved this for us. Respond.js on Github will make media queries work in IE 6-8! Problem solved.

Another thing I have noticed about “Mobile First” is that you will overwrite less css then the other as you build out your site compared to “Desktop First”. So thats is another bonus to going the Mobile First route.

Some people feel it is easier to learn responsive web design Desktop First but I think it is best to just always have the Mobile First mindset from the beginning so you don’t have to reteach yourself how to think about media queries.

Mobile First Example

In your media queries you will use min-width to set up the styling of your site. Basically you build the “mobile” site first and build it up from there.

//CSS here for “mobile view”    

@media screen and (min-width: 540px) {
    //CSS here to modify layout as viewport size is increase
}

@media screen and (min-width: 700px) {
    //CSS here to modify layout as viewport size is increase
}

@media screen and (min-width: 1000px) {
    //CSS here to modify layout as viewport size is increase
}   

@media screen and (min-width: 1200px) {
    //CSS here to modify layout as viewport size is increase
}

The above code is a basic idea on how your css might look. You first build out the site for the smallest viewport and as you increase the viewport size change the css as needed to adjust the layout.

Box-Sizing: border-box;


If you haven’t heard of box-sizing: border-box you have been missing out. Basically by applying this css the box model is change and now border and padding are automatically included in the width.

For example if you set the width to 100% and give it padding of 5% the padding is included in the width. This is compared to without using box-sizing: border-box you would have to set the width to 90% to have padding of 5%;

Box-Sizing: border-box Example

div {
    width: 95%;
    padding: 0 2.5%;
    border: 2px solid #111;
    margin: 0 2.5%;
}

No Box-Sizing: border-box Example

div {
    width: 89.8%; // To account for the border...see why box-sizing: border-box is nice.
    padding: 0 2.5%;
    border: 2px solid #111; 
    margin: 0 2.5%;
}

Now you have to do less math which is quite good as who likes doing math. Don’t worry about browser support since it is rock solid. Even IE 8 supports it!

To use box-sizing: border-box put the following code in your css reset/normalize if it is not already there.

*, *:before, *:after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

Part 3 of this series I will go through a step by step example building out a simple responsive web site example.

Leave Your Feedback

Name is required.
Email is required.
URL is required.
Message is required.