Book Image

Web Design Blueprints

Book Image

Web Design Blueprints

Overview of this book

The book delivers simple instructions on how to design and build modern Web using the latest trends in web development. You will learn how to design responsive websites, created with modern Flat User Interface design patterns, build deep-scrolling websites with parallax 3D effects, and roll-your-own single-page applications. Finally, you'll work through an awesome chapter that combines them all. Each chapter features actual lines of code that you can apply right away.
Table of Contents (12 chapters)
Web Design Blueprints
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Using media queries for responsive design


The media query is the philosopher's stone of responsive design. With its logical expression, you can create a webpage that responds and transforms to fit different viewports. A media query contains a media type and one or more expressions that, if true, can invoke new CSS attributes for that expression.

Some background information

There are possibly hundreds of permutations of these expressions; for a moment, take a look at the W3C website for the possible attributes. All of these are available for you to browse through over at http://www.w3.org/TR/css3-mediaqueries/. Here's that list for easy reference:

  • width: This describes the width of the targeted viewport of the device. It can accept min/max prefixes.

  • height: This describes the height of the targeted viewport of the device. This can accept min/max prefixes.

  • device-width: This describes the width of the rendering surface of the device. It can accept min/max prefixes.

  • device-height: This describes the height of the rendering surface of the device. It can accept min/max prefixes.

  • orientation: This describes the height being larger or smaller than the width. When larger, the value is portrait; when smaller, the value is landscape.

  • aspect-ratio: This is defined as the ratio of the value of width to the value of height. It can accept min/max prefixes.

  • device-aspect-ratio: This is defined as the ratio of the value of device-width to the value of device-height. It can accept min/max prefixes.

  • color: This describes the number of bits per color component on the output device. It can accept min/max prefixes.

  • color-index: This describes the number of entries in the color lookup table. It can accept min/max prefixes.

  • monochrome: This describes the number of bits per pixel in a monochrome frame buffer. It can accept min/max prefixes.

  • resolution: This describes the resolution of the output device. It can accept min/max prefixes.

  • scan: This describes the scanning process of TV output devices.

  • grid: This can be used to query whether the output device is a grid or bitmap.

A small example

A media query can be executed as a condition in a link reference to a stylesheet or within a stylesheet itself. First, let's look at an example of the stylesheet link:

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="screen and (max-width:720px)" href="example.css" />

In the example, the stylesheet will be applied to viewports on devices with widths of 400px or lower. The CSS stylesheet link element lives in the <head> tag, before the <body> tag.

The media attribute is the actual query. Here, you can set the conditions that, if true, will load the linked stylesheet. You can add more logic to this media query conditional expression in the media attribute by including and, not, or only to the query expression. You can also specify the media type; however, there are not too many universally useful options here beyond screen and print.

Media queries are most useful when included in the CSS. Here is the place you can make them really work for you and make a fully responsive website.

A better example

Enough explaining; let's jump into some learning by doing. Open up your favorite IDE and create a new HTML file. It should look something like the following code sample. Remember to include your viewport meta tag!

<!doctype html>
<html lang='en'>
    <head>
        <title>Responsive Web Design</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    </head>
    <body>
        …
    </body>
</html>

That was easy, I hope. We need to add some content and markup to that skeletal HTML. Next, within the body, insert a paragraph element with some ipsum text to fill it up, as I have in the following code sample:

<body>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget finibus dolor. Cum sociis natoque penatibuset magnis dis parturient montes
    </p>
</body>

Adding style

You've created a simple webpage; next, let's create a stylesheet and try some media queries. Back in the header of the HTML page, add a CSS stylesheet link. This time, include screen and max-width as a feature of the inline media query. See this in the following code sample:

<head>
    <link rel="stylesheet" media="screen and (max-width: 720px)" href="style.css" />
</head>

In the same directory, create a new file, style.css. Open it in your text editor or IDE and add some style for the <p> element. Give it a font-size value of 12px. This is illustrated in the following code:

p {
    font-size: 12px;
}

Next, we will add a media query to the CSS. The media query will begin with @media and then the operator in parentheses. A bracket {...} will follow, containing the style attributes you want applied for that media query. Let's go through the media queries listed previously. I'll show this in the following code sample:

@media (width:360px) {
    p {
        font-size:20px;
    }
}

This media query will apply only when the viewport width is 360px. The result is that the font of the paragraph will render at 20px. That's great, but honestly, it is not very useful, because it will apply only when this condition is true. If the viewport is 361px or 359px, then it is false. This is too laborious to test. Instead, recall that this feature can accept min/max prefixes. So, you can probably guess that I'm going to tell you to prefix the width feature with min or max and show it in a code sample, like this:

@media (max-width:360px) {
    p {
        font-size:20px;
    }
}

Viewing your example

Demonstrating this feature will be a snap. Launch the HTML file in your browser and compare the desktop version to what you see when you toggle the display mode in the inspector to a viewport size that is less than 360px. You should be seeing a larger font size when the page is viewed on a mobile device. Try out some of the other media queries mentioned in the previous list to see how they apply; at least try the ones you can test.

Adding complexity to your stylesheet

Next, let's work on some combinations of features to demonstrate how they work together. We will combine two media query features using the conjunction and. Our purpose will be to have a specific style attribute apply only to viewports between two size values. To make a combined media query that applies style attributes only to tablets, we might want the style to apply to all viewports between 360px and 600px. So, let's create a media query for viewport sizes greater than 360px and less than 600px, as I have in the following code:

@media (min-width:360px) and (max-width:600px) {
    p {
        font-size:16px;
    }
}

Refresh your browser and you will see that there are now three distinct font sizes rendered in the viewport. Look at this set of screenshots for an example:

Adding more media queries

Let's add just one more media query to get a more complete picture. This next media query should apply to tablets only, so create a new media query for viewports greater than 600px. Take a look at the following code example:

@media (min-width:600px) {
    p {
        font-size:14px;
    }
}

See how the sample media queries work:

It is typical to combine many media queries in a stylesheet in order to create a fully responsive web application. I often even create media queries to apply style attributes for larger screens. This is W3C often an overlooked aspect of responsive design, as most discussion is centered on mobile. But just as screens have gotten smaller, they have also gotten larger. Your specific project may need to consider the audience using a viewport larger than 1400px.

Tip

In this sample project, if you need to create a media query for anything over 720px, you will need to remove the inline media query.

More complicated examples

The following sample code is an example of a series of media queries to cover a broad spectrum of viewport sizes:

@media (max-width:600px) {
    p {
        font-size:12px;
    }
}
@media (min-width:600px) and (max-width:900px) {
    p {
        font-size:14px;
    }
}
@media (min-width:900px) and (max-width:1280px) {
    p {
        font-size:16px;
    }
}
@media (min-width:1280px) and (max-width:1440px) {
    p {
        font-size:18px;
    }
}
@media (min-width:1440px) {
    p {
        font-size:15px;
    }
}

This series of media queries would combine to make a starter template for a responsive design that covers a broad spectrum of most device viewports. There are some other media queries that could be useful, such as orientation; here, you can make media queries that apply styles depending on whether the orientation is portrait or landscape. See this code for an example:

@media (orientation: landscape) {
    p {
        font-size:16px;
    }
}
@media (orientation: portrait) {
    p {
        font-size:20px;
    }
}

Armed with these media queries, you should be able to create a framework that works pretty well for most responsive design scenarios. Now, let's move on to working with some media. You will be using media queries in the upcoming sections to apply responsive styles to your webpage.