Book Image

Responsive Web Design with HTML5 and CSS3 Essentials

By : Alex Libby, Gaurav Gupta, Asoj Talesra
Book Image

Responsive Web Design with HTML5 and CSS3 Essentials

By: Alex Libby, Gaurav Gupta, Asoj Talesra

Overview of this book

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing and interaction experience—providing easy reading and navigation with minimum resizing, panning, and scrolling—and all of this across a wide range of devices from desktop computer monitors to mobile phones. Responsive web design is becoming more important as the amount of mobile traffic now accounts for more than half of the Internet’s total traffic. This book will give you in depth knowledge about the basics of responsive web design. You will embark on a journey of building effective responsive web pages that work across a range of devices, from mobile phones to smart TVs, with nothing more than standard markup and styling techniques. You'll begin by getting an understanding of what RWD is and its significance to the modern web. Building on the basics, you'll learn about layouts and media queries. Following this, we’ll dive into creating layouts using grid based templates. We’ll also cover the important topic of performance management, and discover how to tackle cross-browser challenges.
Table of Contents (11 chapters)
Responsive Web Design with HTML5 and CSS3 Essentials
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Preface

Exploring how RWD works


For some, the creation of what we now know as RWD is often associated with Ethan Marcotte, although its true origins date from earlier when the site Audi.com was first created, which had an adaptive viewport area as a result of limitations within IE at the time.

If one had to describe what RWD is, then Ethan sums it up perfectly:

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.

In a nutshell, RWD is about presenting an experience for customers on different devices that allows them to interact with your business. It is important to note though that the experience does not have to use the same process; it is more important that the customer can achieve the same result, even though they may arrive using a different route. So, how does RWD work?

RWD is a set of principles we should follow, but the overriding philosophy is about making content fluid. Gone are fixed values, at least for elements on the page; in their place, we use percentage values or em/rem units. Our page layout will use a fluid grid, which resizes automatically depending on the available viewport space.

One key concept that will help determine the success of our site is not one we might automatically associate with responsive design, but nevertheless will help: divine proportion.

Divine proportion, or the Golden Ratio as it is often known, is a way of defining proportions that are aesthetically pleasing—it is perfect for setting the right proportions for a responsive layout. The trick behind it is to use this formula:

Imagine we have a layout that is 960px wide, which we want to split into two parts, called a and b. Divine proportion states that the size of a must be 1.618 times the size of b.

To arrive at our column widths, we must complete the following calculations:

  1. Divide the width of our site (960px) by 1.618. This gives 593px (rounded to the nearest integer).

  2. Subtract 593px from 960px. This gives 367px.

It's a simple formula, but one that will help improve the communication of content for your site—we're not forced to have to use it though; sites are available on the Internet that don't follow this principle. It does mean that they must ensure that the content is still equally balanced, to give that pleasing effect—this isn't so easy!

The important point here though is that we shouldn't be using fixed pixel values for a responsive site; instead, we can use rem units (which resize better) or ideally percentage values.

To translate this into something more meaningful, we can simply work out the resulting column widths as percentages of the original size. In this instance, 593px equates to 62% and 367px is 38%. That would give us something like this:

#wrapper { width: 60rem;}
#sidebar { width: 32%; }
#main { width: 68%; }

Okay, a little theoretical, but hopefully you get the idea! It's a simple formula, but a great way to ensure that we arrive at a layout which is properly balanced; using percentage values (or at the very least rem units), will help make our site responsive at the same time.