Responsive Design

In Graphic Design and Web Design studies you'll hear much about responsive design.

Responsive Design refers to the ability of a web page to change and adapt to viewing conditions while being viewed without breaking the viewing process (such as with a reload or refresh).

This concept is particularly important to web sites and web resources as the author of a web page typically has no clue through what device their page is going to be seen.

At this point web pages are view through computers with desktop monitors, phones, televisions large and small, watches, even car dashboards. Not only do these viewing devices come in different sizes but often times will come in different aspect ratios as well. Some might be rectangular, some might be more square, some might be more vertical than horizontal. The web author has no clue how their page will be seen by any given user.

Because of this web developers need a way to accommodate different user devices. We could go so far as to redesign an entire web site for individual devices, and this actually used to be the required route, but luckily these days there are somewhat simple ways to change only the styling of the page and leave the content to be the same across all devices.

The most common approach to this problem is the "media query".

CSS Media Queries

Luckily we don't have to go so far as to use JavaScript just resize some elements of our pages. We can use "Media queries". These are essentially akin to pseudo selectors that check for certain conditions, and if those conditions are met, define styling properties for the page.

To see the effect of media queries in action for an entire page let's look at a more professional example. Take for example the BBC website.

If you were to follow the link (we are presuming you're viewing the net on a desktop computer) and try resizing the page you'll see the effect of multiple definitions of media queries. If your window is not maximized then click the maximize button in the corner of your window to make it so. While the window is maximized you'll see one design. click the "restore" button, typically between the slash and the "X" icon on a windows system, and you'll be able to size the window manually by clicking and dragging on the edges of it. As you do this you should see the layout of the BBC website change automatically. Elements will either appear, reappear, or move aroudn depending on the viewport size.

This is the effect of a basic viewport query.

Basic viewoprt check

Let's look at a basic example of one. We'll start by making the most common of queries, checking for the width of the current viewport, and if that view falls under a threshold.


#box {
	position:relative;
	width:300px;
	height:300px;
	background-color:pink;
	outline:1px solid black;
}
@media screen and (min-width: 1000px) {
    #box {
        background-color: lightgreen;
    }
}

The effect of this code can be seen on the colored box below.

So how do you go about seeing the affect that the above code will have on the above box?

Simple. Make the window you're looking at right now smaller. If it is currently maximized you'll have to click the middle "restore" button between the line and the "X" symbols. The square should change colors once you've done so. If it still does not grab the edge of the window and make it smaller until it does. (And if your window wasn't maximized to begin with then maximize it to see the difference)

As dictated by our styling code, the color of the box to the side should be light green when the screen is maximized and pink if the width of your browser viewport drops below 1000 pixels.

As you can see the format of a media query follows a few simple rules.

  • A media query is defiend by "@media" at the beginning of the class.
  • Keywords checking for particular conditions are placed on the same line (discussed below).
  • Actual style class entries are nested within this media query class.
  • Actual properties within the style class follow the same format they usually would.

At first the nesting of the classes to change *inside* the media query class may seeem a little weird as we've never seen anything like it in CSS before but it's actually quite logical. If we were to include a media check as aprt of each CSS style entry then we would be needlessly repeating the same query over and over. This in itself defeats the very point of CSS.

So to prevent redundancy we simply define the media query conditions for a particular media condition once and and place styling for everything that should be changed during that viewing condition within that single query.

If you use media queries don't think that you have to duplicate all of your properties for each query. It's find to have a set of "default" styles within no queries that will apply to all possible

Let's look at the syntax more in-depth.

Media Query Syntax

Let's look at that key line of code again. The query line that acted as a kind of pseudo selector.


@media screen and (min-width: 1000px) {
    #my_element_reference {
        property: value;
    }
}

As stated a media query will always start with the keyword "@media". This is required.

The second word in the line, which is "screen" in the above example, can change but must come from a predefined set of device properties. They will almost always be one of the following: "all" , "print", "screen", or "speech".

Each has a specific use. The "all" keyword will apply the style properties within the query to all media devices. "print" will apply to printing devices. "screen" will apply to displays like monitors and phones and will thus be the most widely used keyword. And "speech" will apply to code reasers which vocalize content for the hearing impaired.

The third word in the line, which is "and" in the above example, again must come from a predefined list. In this case it must be from a short list of logical operators: "and" , "not", and "only".

These three keywords will be much more varied than the first two possible paramters. This third position is where you'll really be deciding what kind of comparison to make to decide if the given properties will be applied.

While not an operator "keyword" you can also modify this part of the query by using multiple keywords together. Each must be seperated by a comma.

Lastly will come the property/value check. In the example above this is the inclusion of the "min-width" property and the numerical value after it. This is the actual value that must be surpassed for the query to take effect.

There's a lot to keep track of but luckily it's an easy system to test out and the limited number of keywrods makes it hard to use the wrong one. Try to re-read the original example code.


@media screen and (min-width: 1000px){}

...can also be read as "if the device is a screen and the screen width is below 1000 pixels then apply the styles". Not too bad right?

Let's look at another example using the other keywords.


@media (min-width: 700px) and (orientation: landscape){}

Here we drop the "screen" keyword since it is implied on most eletric devices but add "orientation" which queries the internal orientation of phones and tablets for either landscape or portrait mode. It would still read much the same as before. One more example...


@media not all and (min-width: 1000px) {
    #my_element_reference {
        property: value;
    }
}

This last example makes use of the "not" operator to create the opposite behabior from before - the style will be applied when the viewport width falls below the minimum amount instead of above it. Current implementations require it to be applied to "all".

As you've probably guessed you don't actually need most of the keywords and the default values for each are the most common. This means the following code is perfectly valid and probably all you'd need if you wanted to retarget your web page for use on mobile devices...


@media (min-width: 700px){}

A full list of what can be checked for can be found at the w3schools website under the "Media Features" section. As you can see there are quite a few "features" that can checked against to use in your query.

Browser preview modes

While it's not unreasonable to have a browser window open during development that is sized similarly to another device, such as a tablet or phone, such an approach is not "exact". You'll have trouble sizing your window to the exact dimensions you may be looking for to test your page on a particular model of mobile device. Thankfully we don't have to do things that way to test our design responsiveness.

Most modern desktop browsers have the ability to mimic other devices. This means that you can simulate the use of a tablet or phone to see what a web page would look like when viewed on such a device. This is helpful when developing a web page because it allows you to test your site on other devices without having to actual use one.

To view device emulation in Google Chrome follow these steps.

  1. While viewing a page in the browser press the F12 key.
  2. In the upper left corner of the developer console that appears Left-Click the small phone icon (it will have a tool tip that reads "Toggle Device Mode").
  3. In the upper left of the main window you will see options to change the emulated screen. If you have a particular device you'd like to emulate then simply select it from the "device" drop down.

To view a web page in a different resolution within Mozilla Firefox follow these steps.

  1. While viewing a page in the browser press the F12 key.
  2. In the upper right corner of the developer console that appears Left-Click the small square icon with another square inside of it (it will have a tool tip that reads "Responsive Design Mode").
  3. In the upper left of the main window you will see options to change the emulated screen. If you have a particular device you'd like to emulate then simply select it from the "device" drop down.

In both of these cases you can use custom settings to define a resolution if one of the default device emulation settings is not sufficient.

Query Types

TBA