Web Design Blueprints

Chapter 1. Responsive Web Design

Welcome to Web Design Blueprints. This book is meant to introduce you to some really cool new web design patterns that have arisen in web development. In this book, you will learn how to create responsive websites, how to create websites using the principles of flat design, make deep-dive sites using parallax scrolling, and use Ajax in single-page apps. Finally, we'll combine all these together into an awesome choose-your-own-adventure-style game.

Getting familiar with the basics

Before we start, let's go over some basic stuff. There are some trivial and not-so-trivial things that you will need to do to get your responsive site working.

Using the inspector

The first foundational thing you should learn is using your browser's inspector to emulate different devices. There are a number of tools available in this toolset. Let's look at Chrome; first: click on the Chrome menu in the top-right corner of the browser window:

Next, select More Tools | Developer Tools. Then you can right-click on any element and select Inspect Element:

With this tool, you can inspect elements; use the JavaScript console; look at source code, network requests and responses, the timeline, and resources such as session and local storage; and even connect to a device and debug its Chrome browser.

Likewise, in Firefox, select Tools from the menu bar, and then select Developer Tools. You should see this:

Understanding the viewport meta tag

Now, on to our next task: creating the viewport meta tag. Every function of any responsive site you create will depend on this tag. Without it, your site won't be responsive at all!

The viewport meta tag was initially implemented only in Safari but was quickly adopted by other browsers. This clever little tag instructs your browser to render the webpage scale and size in specific ways.

Learning about the viewport meta tag by example

It may be easier to learn about the meta tag by demonstrating what the viewport will look like without it. Without the tag, your webpage will be rendered at full width in mobile viewports. The result will be the text being so small that you will have to pinch out to expand the text to a readable size.

For the sake of proving the point, let's start with a paragraph of text (you can go generate some ipsum text from http://www.lipsum.com/) styled to have a font size of 12px, using the following code:

<!DOCTYPE html>
<html>
<head>
<title>Viewport META Tag Test</title>
<style>
    p{
        font-size:12px;
    }
</style>
</head>
<body>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus feugiat tempor dui, ac volutpat lacus tempus id. Suspendisse feugiat est felis, vitae ultrices neque accumsan non. Curabitur lacus erat, suscipit eget sagittis eu, tincidunt eget urna.
    </p>
</body>
</html>

Viewing your work on the tag

Now, save the file and launch it in a browser with a good mobile emulator, such as Google Chrome, or use iOS Simulator. You will find that it is not very readable. All of the text is very tiny. This is what the world would look like without the viewport meta tag. See it illustrated in this screenshot:

Compare it to normal desktop browser rendering. There's a very big difference in the readability. The pixel density of mobile devices changes the way this is rendered, so you will need to account for this by defining the viewport's properties in the meta tag. Here's the desktop browser rendering:

Fixing the problem by adding the proper meta tag

Now let's see what a wonderful world it would be with the addition of the viewport meta tag. Add a very simple version of the tag to the same code in the header, as I have in the following code sample:

<head>
    <title>Viewport META Tag Test</title>
    <meta name="viewport">
</head>
<body>
…

There are a few options for the viewport meta tag; however, only use them if you know what you are doing. These can end up causing more damage than you might anticipate. If you are not sure what you are doing, just keep it simple, Slick.

Further explanation of the viewport meta tag

Let's look at the viewport options in detail, starting with setting the width. You can set the width to a specific number, but that's not recommended. So set the content attribute equal to the device width, as illustrated in the following sample code:

<meta name="viewport" content="width=device-width">

Next, we look at the scaling. This is when you squeeze your two fingers together and apart on the screen to zoom out and in. You can prevent this behavior in the viewport or limit it by setting the maximum-scale attribute equal to 1. You can also predetermine the scale of the webpage when it's rendered initially, by setting the initial-scale attribute. In most cases, I set both as 1; see it in this sample code:

<meta name="viewport" initial-scale=1 maximum-scale=1>

This meta tag will not affect the rendering in the viewport unless it is viewed on a mobile device or proper emulator or simulator. Now, relaunch the file, and you will see that the page behaves much better. See it in this screenshot:

Further explanation of the viewport meta tag

Understanding and changing the user agent string

Every time your audience's browser makes an HTTP request to your server to obtain a webpage, it identifies itself and reveals some things about itself to the server. This information can be used by your code to help create an optimized rendering of the site. The most important information revealed in the user agent string is the browser product name and version (such as Chrome/32.1), the layout engine and version (Gecko/1.1), and usually, the device system product name and version.

Using the user agent string for testing

When creating your responsive website, you will most likely be working directly on your computer, not on a mobile device, and either hosting locally or deploying to a server for production. No matter whether it's local or hosted, even if you're the Nikola Tesla (https://en.wikipedia.org/wiki/Nikola_Tesla) of CSS, you can't guess everything, so you will eventually want to do some visual testing on your site.

Manipulating the user agent string is a good way of simulating what your responsive website will look like in production. There are plenty of tools available to switch the user agent. The Chrome debugger includes a device mode you can toggle in order to simulate the mobile device. In addition to changing the viewport size to match the selected device, this wonderful little tool will switch the user agent string for you, re-rendering your website on the fly (usually, however, you may need to refresh).

How to change the user agent string in Chrome

You can access the toggle device mode from Chrome's developer tools. There are a few ways to get here. First, from the system menu, select View, then Developer, and then Developer Tools. Or you can right-click on an element in the viewport to launch the contextual menu and can then select Inspect Element. Finally, you can use keyboard shortcuts: on a Mac, use Cmd + Opt + I, and on Windows, use F12 or Ctrl + Shift + I.

Once you have the developer tools open, you'll see in the top-left corner of the developer tools section of the viewport an icon of a magnifying glass and, next to it, an icon of a mobile phone. When you click on it, it will toggle the device mode or change the user agent. See this in the following screenshot:

How to change the user agent string in Chrome

Once you activate this new interface, you will see some new options. First, you may be prompted to refresh the page. Otherwise, on the top, you will see a Device select option, where you can toggle through a list of common devices. Next to it is a Network select option element. With this tool, you can throttle the download speed in order to emulate different network types and speeds to see how slower downloads will affect the rendering of your responsive webpage.

What next?

Other cool features of the inspector are the rulers on the sides that let you get precise reads on the rendering and the touch emulation so that you can see how the user will truly interact with the user interface. Once it is launched, you can keep it running and toggle between different user agents and see how your page is rendered. There are even some views that emulate notebooks. This tool will prove to be one of the most useful tools in your toolbox. You will likely use it for many of the projects following this section.

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.

Working with responsive media

Media is a big deal in web design and development and is therefore a big deal in responsive web design and development. Our concern with preparing for media in our web development concerns optimization. We want to consider many factors, such as bandwidth use, but also, and perhaps more importantly, the size and pixel density of the device the media will be viewed on. This next section on responsive media will prepare you to handle these concerns.

Creating responsive images with srcset

Not too long ago, when developers wanted to make a truly responsive image, we had to construct server-side and client-side code to deliver a responsive image to the viewport. The client would detect and store the viewport size and send the data to the server when making requests for images. Much of the developers' discussion was centered on delivering the "right-sized" image to the device, and consideration of the user's bandwidth was a factor. This solution was burdensome enough that many developers opted to just send the large file anyway, instead of choosing among three (or more) versions of each picture, and let the CSS scale the image to fit in the viewport.

How things have changed

In recent history, the advent of high-density displays changed the focus of the discussion, and "right-sized" took on a new meaning. Now, high-density displays mean that you need to deliver a much larger file to the viewport—a game changer for sure. Now the larger file is more appropriate for mobile devices' high-density displays. This is a polar change from the original story, where the developer was considerate of the viewers' bandwidths.

The emerging technology of high-density displays is the driving force in this change in how we develop mobile apps. Now, responsive web design is liberated from the chains of developing for bandwidth limits, and we can now develop for more beautiful displays.

A brand-new solution

With that said, let's leave behind our cares about bandwidth for a moment and take a look at a new solution, srcset—a new attribute of the img element. It has only recently been implemented in select browsers. Not every browser has implemented this attribute, only the browsers that need it have it: the primary mobile browsers. If you want to know exactly which ones have it, take a look at Can I Use ____? (http://caniuse.com/#feat=srcset) for the most recent versions that have implemented this feature.

The srcset attribute allows the developer to define a list of sources for the image attribute, selected by the user agent based on the device's viewport pixel density ratio for each CSS pixel. Sounds convoluted, yes; it's sort of a pink unicorn hocus pocus, whatever that means.

Instead of me struggling to explain the hocus pocus, let's go through an example that demonstrates the property.

Enough theory, let's do something

Before we start with any code, let's get the content created. Get a hold of a large high-resolution image. If you don't have any, perform an advanced imaged search on Google; search for the subject, select Images, then Search Tools, and then set Size to Large. Then select an image you like, and save it to your hard drive.

Next, open it in your favorite image-editing software. If you don't have an image-editing software, or a favorite for that matter, you can download a free, open source image editing software from http://www.gimp.org/. GIMP has versions for Windows, Mac, and Linux. It's good enough for the purposes of resizing an image. In your new favorite photo-manipulating software, create the largest-sized image. I chose 1024 pixels and named it robot-large.png (because I think robots are really cool). Next, scale down the image to make two smaller images, one of 600 pixels, named robot-medium.png and the other of 300 pixels, named robot-low.png. Now that you have your images ready, place them into the img subdirectory of your project for later. From here, we can get on with the code.

Layout basics

You should already be familiar with the basics of layout, such as picking out your IDE and basic HTML tags. So launch your IDE and create an HTML page, as I have in the following code example. Remember your viewport; it's important:

<!DOCTYPE>
<html>
    <head>
    <title>Trying out SRCSET</title>
    <meta name="viewport" content="width=device-width" initial-scale=1 maximum-scale=1>
    </head>
    <body>
        //TODO add the content
    <body>
</html>

That was easy, wasn't it? I hope so. If not, go back to the beginning of the section and start over. Otherwise, your training has begun.

We are going to add the image soon, but first, let's get our CSS out of the way, as the bulk of the operation is a content issue, not a style issue. In your header, right before the closing header tag, add a style tag with CSS for the img element. Display it as block and with a width of 50%. You can add media queries later if you want to do some more involved work for the responsive design. These instructions are implemented in the following code:

<style>
img{
     display:block;
     width:50%;
}
</style>

That simple block of CSS is all we are going to do with CSS. Everything else will be handled within the img tag. The next sensible thing to do is add the img tag to our HTML. We will add an img tag with the src attribute set to robot-large.png. Don't forget your alt attribute for Section 508 compliance. See this demonstrated in the following code:

<img
    src='./img/robot-large.png'
    alt='a picture of a robot'
/>

The src attribute is the fallback called when the code is viewed on a browser that has not implemented srcset. This is an acceptable depreciation, as you will find this occurs only on some of the not-so-cool desktop browsers.

Making the img element responsive

Finally, let's get into the meat and potatoes of this subsection: the new attribute, srcset. We are going to list all three of the images we created, matched to the pixel density ratio we previously described. The attribute will take a comma-separated list of image name and pixel-density ratio pairs. For the very large pixel density screens, say those with three times as many pixels as a regular CSS pixel, we will use robot-large.png. Then, add the comma. For robot-medium.png, set it to be used with screens with twice the pixel density. Comma again. For the smallest version of your image, robot-low.png, attach it to the screens with comparable pixel density, such as normal monitors.

We use the x descriptor after the image name in srcset to determine the appropriate pixel density to match the image against. Look at this code sample:

<img
    srcset='./img/robot-high.png 3x,
    ./img/robot-medium.png 2x,
    ./img/robot-low.png 1x'
    src='./img/robot.png'
    alt='a picture of a robot'
/>

Viewing your responsive image

Next, launch the file in your browser. Open the Inspector (right-click, and select Inspect Element) and go to the Network tab. Refresh, and you will see that the browser has loaded robot-low.png, if you are working on a laptop with a normal pixel density.

Click on the mobile phone icon in the inspector window to start the mobile user agent emulator. Now, as you toggle between different types of device emulators, you will see that the appropriate image is loaded for devices with larger pixel densities. For example, the Samsung S4 loads the high-resolution file, while the iPhone 3 loads the medium-resolution image. If you do not see the change automatically, you may need to refresh the screen after you select a different device emulator. The following screenshots demonstrate the different renderings:

Beyond this cursory lesson, there are other features for images that are not yet implemented, so it's impractical to go beyond the x descriptor too much. There is another descriptor, the w descriptor, but it is not implemented in many browsers. In the future, this may be implemented, and then you can integrate with the sizes attribute.

The srcset attribute is a really big leap forward for interface development. It is difficult to conceptualize at first, but once you do, and match it to some clever media queries, such as ones we'll discuss soon, you can create some outstanding responsive UI work.

Creating responsive images with CSS

Images are a big deal in responsive design. Once we have the right image delivered to the viewport, we can use CSS to manage how the viewport renders the image. This is simple in theory. In practice, however, responsive design for images can be a little more complicated. It is important to have a good plan for how you want your design to handle images responsively.

In this section, we will go through some of the more complicated strategies; first, let's get started with the simple aspects of responsive design for images.

Getting started coding

The first part of this exercise is to create a simple webpage with an image in it. You can use the srcset example from the previous chapter if you already have it. If not, use the following example code. You should also place an image in a folder named img in your root directory:

<img
    srcset='./img/robot-high.png 3x,
            ./img/robot-medium.png 2x,
            ./img/robot-low.png 1x'
    src='./img/robot.png' alt='a picture of a robot'
/>

In your header, create a section for the CSS. You don't need a separate text file for your stylesheet; it won't be so complicated as to justify the extra complexity. Inside it, add a CSS style for the img element.

Responsive style

The img element is easy to make responsive. Simply give it a width of 100%, and set the height to auto so that the aspect ratio stays proportional. The 100% width will stretch the image to fill its wrapping element. Keep this in mind, as we will discuss it later. Look at the code in the following code sample:

<style>
    img{
        width: 100%;
        height: auto;
    }
</style>

Open your HTML document in your browser, and you will see the image stretched fully across your screen. Technically, this is responsive, but it does not respond in a good way. If the viewport area is wider than the image, then the image may become pixelated and blurry. This is certainly not optimal. So let's work on this some more.

Above and beyond

To prevent the image from exploding all over your viewport, you can add some more complexity to the CSS. Try limiting the width of the img element to the width of the actual image. To do so, you will need to change the width attribute to a max-width value of 100%. This small change allows the image to be responsive with the viewport changes limited to the maximum size of the image. This means that if the image is really only 300px, then that's as big as it will get. This starts to make sense if you can work out some good patterns along with the srcset attribute of the img element. You can see the additional CSS in the following code sample:

<style>
    img{
        max-width: 100%;
        height: auto;
    }
</style>

Often, you will not want your image to take up 100% of the viewport. Of course, there are a number of layouts where an image takes 100% of the viewport width. That aside, in your content area, your image may not be the most important piece of content in the viewport.

Responsive images can be difficult to manage, and you may want to have a more universal control over how the images look in a template. Additionally, you would probably never simply leave the image by itself on a page; you would likely have some wrapper around it for thoughtful layout control.

With that in mind, add a wrapping div element around your image and give it a class identifier. In this example, we can use foo:

<div class="foo">
<img
    srcset='./img/robot-high.png 3x,
            ./img/robot-medium.png 2x,
            ./img/robot-low.png 1x'
    src='./img/robot.png' alt='a picture of a robot' />
</div>

Now that the image is naturally resting inside of the layout element, you will change the CSS so that the image is maximized inside the wrapping div element, and the wrapping div element is used therefore for control of the layout. For this simple example, make the wrapping element to have a width of 30% of the viewport. Restyle the img to be a width of 100%.

<style>
    div.foo {
        width: 30%;
    }
    img{
        width: 100%;
        height: auto;
    }
</style>

Now we have better layout control of the image and how it is placed in the layout. Look at the example illustrated in the following screenshots:

Calculating the responsive image size

Speaking of layout, before we move on, let's briefly take a look at an example of how to determine the percentage width of an image for responsive design. Take a look at, or create a static layout (low-fidelity) version of, the page that is 1024px wide. Take an image and place it in the layout at 300px. To calculate the percentage of the image width, or the wrapping div, for our image, we simply need to divide the image width, 300 (px), by the layout width, 1024 (px). This gives us 0.2929, or roughly 29%. This is expressed as 300/1024 = 0.2929. And do not forget that if you are adding margins as padding, each must be doubled for both sides and added to the space it takes. Therefore, a 300px image with 2px horizontal padding and 2px horizontal margins will take up 308px of the horizontal width of the 1024px screen, which comes to 0.3001 or 30.01%. Keeping the vertical padding and margins as static pixels is recommended.

Adding responsive video to your site

This book would be incomplete without a section on how to create a responsive template for video. Video, as a medium, has become one of the most prolific forms of communication using the Internet. Hordes of people are seeking to become Internet-famous with their own YouTube channels, and these videos are posted all over blogs and shared with friends. Additionally, businesses want to include live-action shots of their products to demonstrate how they will help their customers. In fact, nearly every new site will likely have some video component.

Working with two use cases

This section will demonstrate how to create the template for embedding a video and controlling how it will display in your responsive site. There are different use cases to consider: first, you are hosting the video yourself, and second, you are embedding it hosted on another site using an iframe element. The second is more common as people often use a video-hosting service such as YouTube.

Use case #1 – self-hosted video

If you are hosting the video yourself, this is easy—just like a responsive image. Set up your video, and an example of the layout code is as follows:

<video width = "320" height = "240" controls = "controls">
    <source src = "movie.mp4" type = "video/mp4">
    <source src = "movie.ogg" type = "video/ogg">
    Your browser does not support the video tag.
</video>

Then, use CSS to give the video a percent width and an automatic height, as I have demonstrated here:

video {
    max-width: 100%;
    height: auto;
}

That was simple, but perhaps it is not the most pertinent of the use cases.

Use case #2 – embedded through the iframe element

Let's examine the use case of embedding the video through an iframe element. The typical method for embedding the video is as follows:

<iframe src = "http://player.vimeo.com/video/123456789" width = "800" height= "450" frameborder = "0">
</iframe>

The iframe element itself is not a responsive element, so we need to wrap it with an element that we can exert control over. Create a wrapping div with a video-wrap class, as I have in the following code:

<div class="video-wrap">
    <iframe src = "http://player.vimeo.com/video/52948373?badge=0" frameborder = "0">
    </iframe>
</div>

Responsive video CSS

This will allow us to use CSS to force the iframe element to behave responsively. For iframe itself, the CSS is simple: assign it an absolute position to the top at 0px and a 100% height and width. The wrapping div is where the magic happens. First, give it a relative position to the top at 0 also so that the iframe element is an absolute within a relative position. Then, assign it a 55% padding to the bottom and 30px to the top. Finally, hide the overflow. The code is shown here:

<style>
    .video-wrap {
    position:relative;
    padding-bottom: 55%;
    padding-top:30px
    height: 0;
    overflow:hidden;
    }
    .video-wrap iframe,
    .video-wrap object,
    .video-wrap embed {
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    }
</style>

Modifying the layout

We have laid a good foundation for controlling the video iframe element. Next, we can make it responsive. Like a responsive image, we control the width of the video by making it consume 100% of its parent element width, and then we make the parent width responsive.

The next step will be to add another wrapping div element to the video. Give it a video-outer-wrap class, as I have in this sample code:

<div class="video-outer-wrap">
    <div class="video-wrap">
        <iframe src = "http://player.vimeo.com/video/52948373?badge=0" frameborder = "0">
         </iframe>
    </div>
</div>

Then add to the CSS attributes for video-outer-wrap, like the following code demonstrates:

.video-outer-wrap {
    width: 50%;
}

Viewing the example

Now, launch the file in your browser. This is a big improvement: we can control the size of the video in the viewport now. Look at the example in the following screenshots:

The next step to do on your own is to add some media queries so that, for different devices, you can have a different-sized video.

Communicating with responsive typography

In your responsive project, you must consider your typography. Typography is probably the most important part of responsive design, as the Internet's primary purpose is to convey information. Sure, there are plenty of pictures and video, but type is what makes the Internet useful. Therefore, a certain level of attention to type should be expected.

A question would arise: is there more to it than just setting the font just a few pixels bigger or smaller for the mobile viewport? Yes, of course. Think about the fact that the devices for which you will be designing can be quite diverse and will have different factors that affect your content's usability.

A good solution for responsive typography

A shiny happy new font size was introduced in CSS3, rem. It is similar to em, which means relative to the font size of the element. rem means relative to the size of the root element. This means that you set the font size at the root or HTML identifier in your CSS and then, for an element, set the size relative to the root with rem.

Working with an example

To try a bold experiment, create a new HTML document and add three paragraphs of text. Give them each a different class identifier. See how I have done it in the following code:

<p class="foo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget finibus dolor. Cum sociis natoque penatibus et magnis dis parturient montes
</p>
<p class="bar">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget finibus dolor. Cum sociis natoque penatibus et magnis dis parturient montes
</p>
<p class="gup">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget finibus dolor. Cum sociis natoque penatibus et magnis dis parturient montes
</p>

Create the typography's CSS

Next, create the CSS for the root HTML element and the three p elements. The root needs to have the font size defined. Give it a font-size value of 60% of its default size. Then, for each paragraph, assign a font-size attribute of 1rem, 2rem, and 3rem. This is demonstrated in the following code:

<style>
    html{font-size:60%;}
    p.foo{font-size:1rem;}
    p.bar{font-size:2rem;}
    p.gup{font-size:3rem;}
</style>

Different rem font sizes will appear differently in the viewport. Now that we've illustrated a point, let's change the demonstration to be a responsive demonstration of rem font sizes. Next, we will add media queries to our CSS to demonstrate responsive typography. Add new media queries for breakpoints at 320px, 768px, and 1024px. Look at the following code sample:

<style>
    @media screen and (max-width:320px)
    {
    }
    @media screen and (min-width:320px) and (max-width:768px)
    {
    }
    @media screen (min-width:768px) and (max-width:1024px)
    {
    }
    @media screen (min-width:1024px)
    {
    }
</style>

Next, add the font size by rem CSS to each of the series of media queries, like this:

<style>
    @media screen and (max-width:320px)
    {
        html{font-size:60%;}
        p.foo{font-size:3rem;}
        p.bar{font-size:3rem;}
        p.gup{font-size:3rem;}
    }
    @media screen and (min-width:320px) and (max-width:768px)
    {
        html{font-size:60%;}
        p.foo{font-size:2rem;}
        p.bar{font-size:2rem;}
        p.gup{font-size:2rem;}
    }
    @media screen and (min-width:768px) and (max-width:1024px)
    {
        html{font-size:100%;}
        p.foo{font-size:1rem;}
        p.bar{font-size:1rem;}
        p.gup{font-size:1rem;}
    }
    @media screen and (min-width:1024px)
    {
        html{font-size:60%;}
        p.foo{font-size:1rem;}
        p.bar{font-size:1rem;}
        p.gup{font-size:1rem;}
    }
</style>

Finished!

Now, save you progress and refresh your screen. Launch your mobile device emulator and you will be able to run a battery of tests to see how this typography is effected on different devices. Look at these sample screenshots:

Building responsive layouts

This penultimate section in responsive design will be about creating layouts for your responsive design. Creating the layout is the exciting and challenging part of creating a responsive web design. There are a number of ways to go about this. We'll go through them, starting with some very simple methods of creating a responsive layout for your project.

Creating responsive padding with the box model property

The first aspect of responsive layout we will cover is the use of padding and margins to control your responsive layout. This is indeed a low-level form of responsive design. First, let's review some of the mathematic principles you should keep in mind when using padding in your responsive layout. These are referred to as the box model properties. The total offset width of your object should include the actual width plus its left and right padding, its left and right border, and its left and right margin, or 2 x (margin + border + padding) + Element = total width. Next, divide one side of the padding by the total width of the box model property.

To make the padding responsive, a static width will not be a useful attribute. A 10px width may look first right for your desktop design, but on a mobile device, it is preferable to make the padding a percentage of the viewport. We can use the box model property to calculate the padding percentage. The percentage is easily calculated by one side of the padding divided by the total with of the page viewed in standard desktop format, or 1024px. Let's look at a real-world example.

A real-world example

Start by creating a new HTML document, and include an image followed by a paragraph of text. Next, we'll work on creating the responsive padding in CSS. I have shown the setup below:

<html>
    <head>
        <meta name="viewport" content="width=device-width initial-scale=1 maximum-scale=1">
        <style>
        </style>
    </head>
    <body>
        <img src="img/robot-med.png"/>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </p>
    </body>
</html>

Within the style tag, add a style for the img and p tags. And add a 4px padding, 4px margin, and 1px border around the img tag. This is a standard non-responsive design for layout padding. Look at the following code example:

<style>
    img{
        padding:4px 4px;
        border:1px solid #ccc;
        margin:4px;
    }
    p{}
</style>

Let's take this simple example of a static design and turn it into a responsive design. In this example, we want to convert the static padding width in pixels into a width measured by a percentage of the viewport.

Applying the box model property

To calculate a percentage that will be proportional to the desktop design, apply the box model properties formula to this example, as follows:

4px / [2 x (4px + 1px + 4px) + 300px] = 0.0126

Take the fraction and convert it to a percentage, and then apply it to your padding of the img element. You can also apply it to the margin. To apply it to the margin, I would recommend you only apply it to the left and right margins, not the top and bottom. Otherwise, your vertical alignment could become distorted and produce some unintended consequences. See it done in the following code sample:

<style>
    img{
        padding:1.26%;
        border:1px solid #ccc;
        margin:1.26%;
    }
</style>

Finished!

Upon launching the HTML in your browser and in the mobile device emulator, you will see that this makes a good layout control for the image that looks good on both desktop and mobile viewports.

Going further

A useful variation of this will be to add a media query to keep the padding static for desktop viewports. This will prevent the padding and margins from blowing up on larger desktops. I have done this in the following sample code:

<style>
    @media screen and (max-width: 620px){
        img{
            padding:1.26%;
            border:1px solid #ccc;
            margin:1.26%;
        }
    }
    @media screen and (min-width:620px){
        img{
            padding:4px;
            border:1px solid #ccc;
            margin:4px;
        }
        p{
        }
    }
</style>

This is a good start; however, it does not really utilize the space very well. There are some problems to fix in order to make this a good responsive design. The first problem I see is that the paragraph of text clears the image on mobile and desktop. We need to better utilize the space if this is going to be a good responsive design. Start by cleaning up the CSS. There are some redundant attributes, such as the border attribute. To clean this up, we should have only the attributes that change inside the media queries. See it illustrated in the following sample code:

<style>
    @media screen and (max-width:620px){
        img{
            padding:1.26%;
            margin:1.26% 4px;
        }
    }
    @media screen and (min-width:620px){
        img{
            padding:4px;
            margin:4px;
        }
    }
    img{
        border:1px solid #ccc;
    }
</style>

Now, in your min-width media query, add a left and right float to the img and p selectors, adding a paragraph selector. In the same media query, add a percentage width to each element. You will need to account for the box model properties you calculated previously. In our example, our margin and padding were 1.26%, and the 1px border would altogether make it about 2.53%. To be safe, you can round the percentage width of the img down to 47%, as I have in this sample code:

<style>
    @media screen and (max-width:620px){
        img{
            padding:1.26%;
            margin:1.26%;
            width:95%;
        }
    }
    @media screen and (min-width: 620px){
        img{
            padding:4px;
            margin:4px;
            width:47%;
            float:left;
        }
        p{
            float:right;
            width:50%;
        }
    }
        img{
            border:1px solid #ccc;
        }
</style>

Viewing your example

Launch the new version of your HTML document and you will see how, on viewports larger than 620px, both elements are floating left and right. When viewed on a mobile viewport, you will see they are aligned horizontally. This is a basic responsive layout.

Adding more complexity

You can add more complexity through additional media queries. Let's add another media query for additional practice. We want to add a media query for all viewports over 1024px. This also means that we need to prevent conflicts with the min-width:620px media query. Add to it another query parameter that limits the style to a max-width value of 1024px, like in the following sample code:

@media screen and (min-width:620px) and (max-width:1024px)

You will also need to add the new media query for viewports over 1024px, like in the following sample code snippet:

@media screen and (min-width:1024px)

In this media query, add the same selectors as for the 620px to 1024px viewports; only change the width to make the image take up a smaller proportion of the screen than before. In my example here, I make them 17% and 80%:

@media screen and (min-width:1024px){
    img{
        padding:4px;
        margin:4px;
        width:17%;
        float:left;
    }
    p{
        float:right;
        width:80%;
    }
}

Finished! Now view your work

Launch this in your viewport, and you will see your responsive layout optimizing itself for these three differently sized viewports. Look at the example illustrated here:

Next, it will be up to you to use the same principles to make more creative and exciting layouts.

Creating responsive navigation with CSS and JavaScript

A usable navigation element is vital to your audience being able to find what they want on your site. A top-horizontal navigation layout may work on a desktop-only site, but it will be difficult to see on a mobile device. Due to the differences in the viewports of desktops and mobile devices, the navigation design should be different and optimized for each.

Jump into an example

This subsection builds on top of the previous one on responsive layouts. If you have not been following along by section, you can just as easily start with a new file.

In this example, we will add a navigation element to the work we did in the previous chapter on responsive layouts. Inside the body tag at the top, insert a nav element. Next, inside the nav element, add a list of links. This is demonstrated in the following code snippet:

<nav>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>
</nav>

Your navigation HTML is complete, so let's double our efforts and add the CSS to make it responsive.

Creating the responsive CSS with media queries

In a media query for viewports under 480px, add a selector for the nav with the display:block style and a selector for nav LI with the display:inline-block style. Also, let's add some style to this menu so that it does not look so plain Jane. Add a section in the CSS outside of any media queries, and in it, add the html, li, and li a selectors.

In the non-responsive area of the CSS, give the HTML a font-size value of 100%, the li a 1px solid green border with a 4px border-radius value, and the li a a block display, Helvetica font, bold font-weight value, font-size value of 1.5 rem, green color, and none for text-decoration. You can also invert it on hover by adding a hover pseudo-element to the li element with a green background color, and to the li a with a white font color. Look at the non-responsive CSS in the following sample code:

html{
    font-size:100%;
}
li{
    border-radius:4px;
    border:1px solid green;
}
li a{
    font-family:Helvetica;
    font-weight:bold;
    font-size:1.5REM;
    color:green;
    text-decoration:none;
    display:block;
}
li:hover{
    background-color:green;
}
li a:hover{
    color:white;
}

Next, inside the smaller media query, one with the max-width value of 480px, add an LI and an li a selector. Inside the li selector, add a block display attribute and a top and bottom margin of 2px. Give the li a selector a padding of 1.26%. This is done in the following code:

@media screen and (max-width: 480px){
    li{
        display:block;
        margin:2px 0px;
    }
    li a {
        padding:1.26%;
    }
    img{
        padding:1.26%;
        margin:3px 0;
        width:98%;
    }
}

Conversely, inside the larger of the media queries, the one with a min-width value of 480px, add the li and li a selectors. Then, give the li selector an inline-block display. And add a 4px padding to the li a selector. Cue a corresponding code snippet:

@media screen and (min-width:480px){
    li{
        display:inline-block;
    }
    li a {
        padding:4px;
    }
}

Your first version is complete

Congratulations, you have created a simple responsive menu! Open it on your desktop and mobile browsers and see whether it looks like these examples:

It is optimized for each of our defined viewport sizes. Even though it works, it can still be better, so let's keep working on this responsive menu.

Going further

The problem with our current responsive menu is that on the mobile display, the menu takes up too much vertical space on the viewport. Imagine the frustration of a viewer having to scroll down on every page just to be able to view your content. So, this menu is incomplete. To make it more complete, let's convert it into a hidden menu that is revealed by the user clicking on a button.

Adding interaction

To begin, add a button element with a parent div element with a navbutton class to the top of the page directly beneath the body opening tag. Also, add an ID called menu to the nav element. We will be using an ID because we will be writing some simple JavaScript to the UI. This JavaScript is so simple we won't be using any libraries such as jQuery. Inside the button body, add an inline onclick JavaScript code block that activates a function called menuButton(). Take a look at the new HTML code example:

<body>
    <div class="navButton">
        <button onclick="menuButton()">=</button>
    </div>
    <nav id="menu">
     …

Before writing out the interaction function, let's finish our style in the CSS. Add to the max-width: 480px media query selectors for the navButton class and the button. Give the navButton selector a block display. Next, give the button a 30px width value, a padding of 4px, a 4px border-radius value, and match the color scheme to the navigation buttons. Then, add a selector for the nav element, and add the nav element with a class of show. The nav selector should have a hidden display, while the nav.show selector should be displayed as a block. Take a look at the following CSS code example:

@media screen and (max-width: 480px){
    .navButton{
        display:block;
    }
    button{
        background-color:green;
        color:white;
         width:30px;
       padding:4px;
        border-radius:4px;
    }
    nav{
        display:none;
    }
    nav.show{
        display:block;
    }
    …

We do not want this element to be displayed on the larger viewports at all. Add a selector for the navButton class to the media query for viewports larger than 480px. Look at this example code:

@media screen and (min-width:480px){
    .navButton{
        display:none;
    }
    …

Finally, the interaction function

Finally, let's build that interaction JavaScript function. Immediately following the closing style tag, add an opening and closing script element. Inside it, define your menuButton() function. Its function starts by defining the theMenu variable as the element with the menu ID. Next, add the conditional test to check whether theMenu does not have the class with the property className of show. If this is true, add the string show to the className property. Otherwise, if the condition is false, and the element does in fact have the show class, set the className property to be a blank string. This will make the button click activate the function to add the show class, show the element if it is not already showing, and if it is visible, to remove the show class, hiding it again. Take a look at this example script:

<script>
    function menuButton(){
        var theMenu = document.getElementById("menu");
        if(theMenu.className!="show"){
            theMenu.className = theMenu.className + "show";
        } else {
            theMenu.className = "";
        }
    }
</script>

Viewing your interactive responsive navigation

Now, launch your completed page and test it on a mobile device or emulator, and compare it to a desktop view. You will see the menu completely changed, or optimized, for the different views. See the example screenshots here:

There are still a number of further customizations you can add to this to make it look even better, such as adding transition animations, changing the position of the menu, and, of course, adding more style to the menu. I will leave these improvements to your creative mind.

Kryštof May 13, 2016

Hi all!I must recommend this book and there are some reasons:1. I was the technical reviewer on this book so I read the book months ago and I must say, the book is great. Very professional and also fun to read!2. The book contains simple instructions and step by step you will learn cool tricks how to make modern web applications using the latest technologies. It is definitely the book you can use for your work to be a star of your web team.3. You will learn how to use modern Flat User Interface design patterns for responsive websites, build deep-scrolling websites with parallax 3D effects, and roll-your-own single-page applications with AJAX.Must-have book!

Amazon Verified review

Web Design Blueprints: Build websites and applications using the latest techniques in modern web development

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Learning about the viewport meta tag by example

Viewing your work on the tag

Fixing the problem by adding the proper meta tag

Further explanation of the viewport meta tag

Using the user agent string for testing

How to change the user agent string in Chrome

What next?

Adding style

Viewing your example

Adding complexity to your stylesheet

Adding more media queries

More complicated examples

How things have changed

A brand-new solution

Enough theory, let's do something

Layout basics

Making the img element responsive

Viewing your responsive image

Getting started coding

Responsive style

Above and beyond

Working with two use cases

Use case #1 – self-hosted video

Use case #2 – embedded through the iframe element

Responsive video CSS

Modifying the layout

Viewing the example

A good solution for responsive typography

Working with an example

Create the typography's CSS

Finished!

A real-world example

Applying the box model property

Finished!

Going further

Viewing your example

Adding more complexity

Finished! Now view your work

Jump into an example

Creating the responsive CSS with media queries

Your first version is complete

Going further

Adding interaction

Finally, the interaction function

Viewing your interactive responsive navigation

Key benefits

Description

Who is this book for?

What you will learn

Product Details

What do you get with Print?

Contact Details

Shipping Address

Billing Address

Product Details

Packt Subscriptions

Frequently bought together

Table of Contents

Recommendations for you

Customer reviews

People who bought this also bought

About the author

FAQs