Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Let’s Get Responsive!
234
single,single-post,postid-234,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive

Let’s Get Responsive!

A Brief Overview

One of the current trends in web design and development today is, what everyone is calling, Responsive Design. Responsive design is basically taking a website and changing how it is displayed depending on the size and/or orientation of the browser, using media queries.

There are two methods you can use to implement media queries. One is to have multiple stylesheets for different situations, like so:

<link rel="stylesheet" type="text/css" href="global.css" media="screen" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="mobile.css" />

The second method is to define your media queries inside your CSS files, like so:

@media screen and (max-device-width: 600px) {

}

Both of these methods have the same effect. For this example I am going to be using the second method. I personally think this is a better method, simply because it generates less HTTP requests. If you are using LESS you could also include the css file as an @import, which makes it possible to have multiple files, but only load one file on the actual website.

Default Styles & Internet Explorer

I have set up an example that is using most of what I’m talking about in this post. You can download the files for it here: Responsive Design Files

If you look in the main.css file, you will find all of the CSS that makes up the website. I start out with some default styles that will be applied across the board. These default styles will be used when the browser doesn’t match any of the media queries or on older browsers (IE6/7/8), with which the media query sections will be ignored and shouldn’t generate any errors. This tends to work perfectly, since the website will still be able to render in IE, but will also have special styles for browsers that support it. Majority of the time media queries are used to change the styling for tablets and phones, which both support them.

If you would like to add media query support to your website for IE6/7/8, there is a jQuery work around for this. I have not tested this personally, as I have not needed this functionality in IE, but it should work well: http://plugins.jquery.com/project/MediaQueries

Order Matters

When laying out a CSS file with media queries, you should be sure to lay it out in the correct order. Ideally it should be set up as follows:

Default Styles > Smaller Screens > Tablet > Mobile

If you don’t lay it out in this order, you will likely run into some problems. For Instance, let’s say you laid your css out like this:

/* Mobile */
@media (max-width: 685px) {
     body {
          background: black;
     }
}

/* Tablet */
@media (max-width: 810px) {
     body {
          background: blue;
     }
}

/* Default Style */
body {
     background: pink;
}

If you were to apply that CSS to a page, no matter the size of the browser, the background would be pink. This is because, like regular css, the background of pink gets applied after the blue and/or the black, therefore it overrides the other colors. This is why you want to be sure to set up your CSS in a way that makes sense and doesn’t cause unwanted overwriting.

Who’s Your Target?

The way I have set up the CSS in the example allows it to work in every browser, and not just targeting other devices. That means that you can resize your browser to the size of a tablet or phone and the CSS will still respond. You can do this with the following:

/* Default Styles */

/* Smaller Screens */
@media (max-width: 960px) {

}

/* Tablet Size */
@media (max-width: 810px) {

}

/* Phone Size */
@media (max-width: 685px) {

}

All of the queries in that example will take effect in the browser. But what if you want to target an phone or tablet specifically?

/* Tablets Only */
@media (min-device-width: 768px) and (max-device-width: 1024px) {

}

/* Phones Only */
@media (max-device-width: 600px) {

}

By using max-device-width instead of max-device-width, we are actually checking the width of the device itself. Since a browser on a computer can be the size of your screen, it will not be targeted by these properties (unless for some reason your screen is the size of a tablet or a phone).

By specifying min-device-width and max-device width for tablets, we are setting a range for the tablet, which should allow either orientation (landscape or portrait).

Orientation

If you would like to specify separate styles for different orientations of devices, you can do that as well.

/* Tablet - Portrait */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {

}

/* Tablet - Landscape */
@media (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {

}

/* Phone - Portrait */
@media (max-device-width: 600px) and (orientation: portrait) {

}

/* Phone - Landscape */
@media (max-device-width: 600px) and (orientation: landscape) {

}

These styles will only take effect if you are on the correctly sized device with the correct orientation. In this case you probably don’t actually need to order your media queries correctly (as long as they all come after the global styles), but I would suggest doing so to keep everything consistent and flexible.

Solution to the Fold

I recently read an article by Paul Boag titled Are Media Queries the answer to the Fold? I found it to be a good idea and included it in my example. The basic idea is that you can use media queries to detect the height of the browser, not the width, and change the layout to make sure content gets cut of, that way a user will know they need to scroll. This makes it so you don’t need to shove everything above the fold out of fear that the user won’t see it.

In my example I used the following code to determine the height. If the height was at a point where it wouldn’t be obvious that the user needed to scroll, I changed the layout to make things smaller and move things up to make sure the content was cut off.

@media (max-height: 700px) {

}

I think this is a great solution, and hope to see it in more websites in the future.

That’s All Folks

Using media queries and responsive design can drastically improve the usability of your website without the need for multiple versions of the site. Instead you just need to create some additional CSS to manipulate the same old HTML you have for your regular site. I hope to see it used on more of our websites here at 14Four, and maybe even for some sites at Seven2 as well.