Responsive web design techniques

To get started, let's take a deeper look at RWD and why it is important. By using a RWD approach in your applications and websites, you'll be able to ensure that, when users come to your site with their 55-inch, 1,080-pixel Internet-enabled television, they'll have the same experience as if they were visiting it from their iPad or Galaxy S5 phone.

You may be asking yourself why you should care if they're able to have the same experience on all the devices, or how likely will they be using their television to surf the Internet. The answer is, you should care as it's extremely likely as these days that users have a number of Internet-powered devices in their possession. They may be watching their favorite television program and then realize they need to check something on your website or access your web application, and they want that instant gratification. That is just the nature of our society now. We are always connected and we always want our information now, at this very moment, and for it to be useable and respond well to our television, tablet, and handheld gaming device, whatever it may be.

Are you scared yet? It may seem like you have a lot of work to do to ensure your next big project behaves and looks good on everything that accesses it but, to be honest, it is not as hard as you might think, especially if you take this approach at the beginning of your project's lifecycle.

RWD is made up of a series of methods that are not overly difficult to execute. These methods include flexible grids and layouts, careful image use, and CSS media queries. By using these principles, you'll see in no time that your website can handle any screen size, resolution, orientation, and device, no matter what the user throws at it.

Flexible layouts

Flexible layout or flexible grids (whatever you prefer to call it) are one of the critical pieces of RWD. What do we mean by flexible layouts? With flexible layouts, CSS completely drives the positioning of items on the page, your margins, and spacing. This CSS is of course used in conjunction with media queries to make sure the page reacts properly to the device it is being viewed on.

You may be saying to yourself that of course CSS is used for all that, but as always in life there is a caveat. You can no longer use pixels for your CSS values. With today's devices, not all pixels are equal; it is no longer a 1 for 1 pixel. On device A, 1 pixel may truly be 1 pixel. However on device B, 1 pixel could actually equal 5 pixels on device A. Still with me? To overcome this, in RWD we use percentages or em. If you're not sure what an em is, it is a unit of measurement based on a font's point size. Percentages and em allow you to do relative sizes instead of absolute size with pixels.

Images

Image handling can play a huge role in your RWD implementation. Unfortunately, it is something of a wildcard with RWD. There are several ways you can handle images. One of the most popular uses is with CSS and its max-width property. For example:

img { max-width: 100%; }

This will then keep the image at 100 percent of the browser screen width and will scale down with the screen width. With this method, you scale the image with CSS rather than declaring the height and width via HTML. Of course there is a catch with this. Some versions of Internet Explorer do not fully support the max-width property of CSS, so in your IE-specific stylesheets, you will need to use width: 100% instead.

There are also some JavaScript tricks you can use to make your images responsive, however one thing you must consider is that image resolution and their download times are crucial. If you load a 960-pixel-wide image onto a mobile site where the resolution of the website is 320 pixels, the initial 960 pixel image is going to be loaded and then scaled down. There will be a performance hit, not to mention that there is a chance the image could be horribly messed up from the scaling. Later in this chapter, we will look at another method you can use to effectively handle images.

Media queries

Media queries were introduced in CSS 2.1. These media types were screen, print, and handheld. CSS3 drastically expanded on these by introducing types such as max-width, device-width, orientation, and color. Any device introduced after the introduction of CSS3 will support these types. This is a good thing for you as you can definitely use media queries to target CSS stylesheets to these devices and, if the browser does not support them, they will be ignored.

Media queries in action

Let's take a quick look at an example use of media queries:

1. Open up Aptana Studio and create a new project by clicking on Web Project.
2. Add two files to the project, one named mobile.css and the other one named desktop.css.
3. Open up mobile.css and add the following code:

   #content {
   width: 95%;
   margin: 0em 0em 1em 0em;
   background-color: red;
   color: white;
   }

4. Now open up desktop.css and type this code:

   #content {
   width: 95%;
   margin: 0em 0em 1em 0em;
   background-color: black;
   color:white;
   }

The code that we just typed is standard CSS code. What we are doing is setting the content area of our page to be 95% of the screen with a 1-em bottom margin. We are then setting the background color of our content area to be either red (for mobile devices) or black (for desktop devices) with white text.

Now that we have our CSS and seen what it does, it's time to put it into action with a media query:

1. Open up index.html, which was created by Aptana Studio, and type in the following code:

   <!DOCTYPE html>
   <html>
     <head>
       <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scrolable=no">
       <title>RWD Media Query Test</title>
         <link type="text/css" rel="stylesheet" media="all and (min-width: 320px)" href="mobile.css" />
         <link type="text/css" rel="stylesheet" media="all and (min-width: 1024px)" href="desktop.css" />
     </head>
     <body>
       <p id="content">
             I just did a media query!
         </p>
     </body>
   </html>

2. Now load up this page in your favorite browser and you should see the following image:
   
3. You should see I just did a media query! with a black bar behind it. Now if you resize your browser to a smaller size resembling a mobile device, you should see something similar to the following screenshot:
   
4. Again you should see I just did a media query! with a red background this time. Now that we've seen the code in action, let's break it down and see what we just did.

The following code snippet is just your standard opening code on an HTML page:

<!DOCTYPE html>
<html>
<head>

The next part—the meta tag is of the utmost importance in mobile web development. Proper use of this tag ensures that the web page is displayed perfectly on your mobile browser:

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scrolable=no">

Here, width=device-width helps set the width of the viewport to the pixel width of the device in use. This prevents the user from resizing and dragging the page around. To disable the user from zooming into the web page, we make use of the user-scalable property. Also, minimum-scale=1.0 and maximum-scale=1.0 make sure that the web page is displayed at 100 percent size on the device screen.

Next up is the most important part of this exercise, the CSS media query. For the first line, we are saying for any device with a minimum device width of 320 pixels, load our mobile.css stylesheet. The next line tells the browser that, if the device has a minimum device width of 1,024 pixels, load our desktop.css file:

<link type="text/css" rel="stylesheet" media="all and (min-width: 320px)" href="mobile.css" />
      <link type="text/css" rel="stylesheet" media="all and (min-width: 1024px)" href="desktop.css" />

Note

In the preceding statements, you will notice the use of the keywords all and min-width. Let's talk a bit about these. When we use the keyword all and min-width, the media query will work on a desktop as well, just by resizing the browser window. This helps when the application is still in development and we need to test how the media queries behave. However, if you wish that the media query code should be restricted for mobile devices alone, you need to replace the keywords all by only screen and min-width by min-device-width. We encourage you to discover other properties that the media queries can take and how they behave differently.

The next bit of code is our page body, wrapped in the content CSS p we specified in our CSS stylesheets:

<body>
    <p id="content">
        I just did a media query!
    </p>
</body>

That wasn't so bad, was it? You can see how deep you can go with these media queries by loading specific CSS stylesheets for a wide variety of device screen sizes.

Of course, as always with great power comes great responsibility. Each media query can add a good bit of overhead to your application or website. Remember CSS is executed on the client side, so that means the page loads and then begins executing the media queries until a match is found. This can seriously impact the loading speed of your project, especially if someone is accessing your application from a slower cell connection (remember in some parts of the United States and the world, cell users still have pre-3G speeds) so while it would be tempting to do a media query for every min-width and max-width combination out there, your users might suffer for it.

Note

We just touched briefly on the media query types out there. There is a lot more you can use media queries to test orientation, aspect ratios, and so much more. For the complete list of media query types, check out the W3 website at http://www.w3.org/TR/css3-mediaqueries/.

There is a variety of device widths out there thanks to the vast number of mobile devices. You can find a great comprehensive list of device widths at http://viewportsizes.com/.