What is Responsive Web Design – An Intro To the Basics

Are you a Web designer? A site developer? Perhaps a UX guru? As long as your work has something to do with creating Websites, Responsive Web Design is relevant to YOU. Why?

• Responsive is a better way to create Websites for really small screens.
• Responsive is a better way to create Websites for really big screens.
• Responsive is a better way to create Websites… period.

That’s a fairly forward statement… we know. But in this article we’ll demonstrate all the benefits Responsive Web Design has to offer and show you some practical examples to get you started.

• It makes your job easier.
• It improves your visitors’ online experiences.
• It allows your site to scale effortlessly to new technology.

The Problem

Let’s consider the following real life story:

You’ve got a client who wants a Website. Sure, no problem. Following a standard SDLC, you design the client’s Website for a minimum resolution of 1024×768 and get it to look great on Firefox, Safari, Chrome and even Internet Explorer. As you near the end the project, your client decides that she wants to be able to view the Website on her iPhone too. Ok, so that’s another SDLC to produce the Website for a display size of 320×480… or wait, should you consider both portrait and landscape orientation? Not only that, but Chrome can be installed on the iPhone in addition to Safari. And what about Android devices, which have small, normal, large and extra large screens? And of course, Windows phones, which are all running IE for the Windows mobile iOS? We won’t even get into tablets and readers … because you get the point, right? [/notification]

We thought about providing a list of device resolutions here, but decided against it. What good is a list that is constantly changing as a result of new technology? Instead, take a look at this great infographic.

All in all, the infographic points to one BIG idea: An increasing number of people are using their mobile devices to access the Web. If your Website isn’t mobile-friendly, you’re going to be left in the dust.

And it’s not just about being mobile-friendly either. Your Website needs to be adaptable to ever-changing, mobile technologies. You don’t want to be the one always running to catch up, right?

One more thing to consider before we move on from throwing wrenches in the engine. It’s not just smaller screens that you have to consider, but GIANT screens as well. The following chart shows the evolution in average computer screen sizes from 1999 to 2012.

This chart tells us that even though people are turning to smaller devices for surfing the Web, they’re also utilizing larger monitors when sitting at their desks.

So, the question is, how do you design a Website so that it not only looks incredible on small screens (e.g. smartphones and tablets), but also looks crisp and clean on large screens?

The Solution

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.

– Ethan Marcotte

Ethan Marcotte wrote the book on Responsive Web Design. Literally. So, what’s he trying to say, here?

You have one Website that is flexible enough to respond to any environment. The site is optimized for easy reading and navigation, so that visitors don’t need to resize, pan and scroll like crazy. Visitors have the same experience of visiting your site, regardless of if they are viewing it on a small screen, medium screen or large screen. [/notification]

Make sense?

Let’s look at About.com, for example, a content site for everyday solutions that reaches approximately 69 million unique visitors per month. About.com has been designed so that it responds and adapts to a viewer’s behavior and screen size. Based on our browser size, screen resolution and orientation (i.e. portrait vs landscape), About.com automatically resizes and re-orders the design; as well as adapts images, text and columns.

Monitor 1366 x 768

Tablet (iPad), Landscape, 1024 x 768

Mobile (Samsung Galaxy), 800 x 1280

If the benefits of Responsive Web Design aren’t clear to you yet, let’s put them in the context of this example. Because About.com was built with a Responsive Website Design approach…

• It takes a load off the backs of the designers, developers, UX specialists, product managers, project owners, etc. who would otherwise need to scramble every time a new device enters the market.
• It improves visitors’ online experiences because they can easily access and browse the same great site, regardless of the device that they’re using.
• When the latest and greatest gadget comes out, no matter how big or how small the screen, the company can be confident that their design will scale effortlessly.

The Nuts and Bolts

Now that we’ve made a case for Responsive Web Design, let’s delve into the machinery a bit. Note that we’ll get more specific in later chapters. Wikipedia’s article on Responsive Web Design does a solid job of breaking down the elements.

[notification style=”tip” font_size=”12px” closeable=”false”] A site designed with Responsive uses CSS3 media queries (an extension of the @media rule) to adapt the layout to the viewing environment, along with fluid proportion-based grids and flexible images. [/notification]

The key concepts in this description are:

• CSS3 media queries
• Fluid, proportion-based grids
• Flexible/fluid images

Now let’s discuss this in detail.

CSS3 Media Queries

We’re willing to bet that you’re no stranger to media types. In CSS 2.1, you were able to specify how your website should be presented on various media, including on screen and in print. For example:

[prettify]@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}[/prettify]

CSS3 supports the same media types as CSS 2.1, but has far extended the functionality. Your style sheets can now include media queries for features like device-width, height, orientation and color. Quite simply, media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on.

Now, what does a media query consist of? Per the World Wide Web Consortium (W3C):

[notification style=”tip” font_size=”12px” closeable=”false”] A CSS3 media query consists of a media type and zero or more expressions that check for the conditions of particular media features. [/notification]

So, a media query must contain:

• A media type (e.g. width, height, device-width, device-height, orientation, color, etc.)
• And one or more expressions that check for conditions. Think an IF statement (e.g. IF the screen width is at least this size, THEN do this…).

The media query page on the W3C website provides numerous examples on usage, but we’ll cover a few here as well.

The three queries above all indicate the same thing: apply XYZ styles to devices that have a display-area width between 320px and 480px. Can you figure out what the issue is with this CSS, though? Min-device-width and max-device-width are the widths of the actual device screen and are independent of orientation. So, what happens when a site visitor rotates his or her phone? Let’s look at how we can address that issue.

Max-width, on the other hand, is the width of the device’s viewport; thus, it can be used to target device orientation (e.g. landscape or portrait). Here’s a quick tip on the iOS viewport:

Safari on iOS adds controls above and below your web content, you don’t have access to the entire screen real estate. In portrait orientation, the visible area for web content on iPhone and iPod touch is 320 x 356 pixels as shown. In landscape orientation, the visible area is 480 x 208 pixels. [/notification]

Ok, so what will our CSS look like, now that we have that information? The example below demonstrates how to make your site viewable across several different devices and screen sizes. We borrowed it from fellow coder, Philip Tellis.

[prettify]/* Default widescreen styles */

@media all and (max-width: 1024px) {
/* styles for narrow desktop browsers and iPad landscape */
}

@media all and (max-width: 768px) {
/* styles for narrower desktop browsers and iPad portrait */
}

@media all and (max-width: 480px) {
/* styles for iPhone/Android landscape (and really narrow browser windows) */
}

@media all and (max-width: 320px) {
/* styles for iPhone/Android portrait */
}

@media all and (max-width: 240px) {
/* styles for smaller devices */
}[/prettify]

We’ll get into more detail on media queries in later articles, but for right now, that should give you a good idea of why they’re vital to a Responsive Web Design approach. Now, let’s look at the next concept in Responsive Web Design principals: fluid, proportion-based grids.

Understanding Fluid Grids

First, let’s discuss what a fluid layout actually is. A fluid layout uses relative units (e.g., em, percentages) to set a width, rather than absolute pixels. You’ll find an excellent example of a fluid design on this page.

The CSS for the example looks like this:

[prettify]#header {
width: 100%;
margin: 0;
padding: 0;
}
#content {
float: left;
width: 60%;
margin: 0 0 20px 0;
padding: 0;
}
#content .inner {
margin-right: 2%;
}
.sidebar{
float: left;
margin: 0 0 20px 1%;
padding: 0;
}

#bar1{
width:20%;
}
#bar2{
width:18%;
}
#footer {
clear: both;
width: 100%;
margin: 0;
padding: 0;
} [/prettify]

Ok, fluid… got it.

Now combine it with a grid, which provides structure and organization for your website. Sure, you know how to create a grid and place your elements on the grid lines. But how do you size your grid elements in relative units (percentages or EMs), rather than absolute units (pixels or points)?

Our friend, Ethan Marcotte, comes to the rescue. His brilliant article on fluid grids establishes the following core concept:

[notification style=”neutral” font_size=”12px” closeable=”false”] Every aspect of the grid—and the elements laid upon it—can be expressed as a proportion relative to its container…We’re looking not just at the desired size of the element, but also at the relationship of that size to the element’s container. [/notification]

Let’s put this into context. We have a page title and a conventional grid with pixel-based widths below.

The example shows:

• A 400 pixel wide page title
• A grid with four (4) columns, which are 150 pixels each.

They are separated by 20 pixel-wide gutters.  So, the total width is 680 pixels.

To turn this into a fluid grid, you need to convert those pixel-based widths into percentages. Once you do that, you can size your grid up or down (to any device size), while keeping the proportions intact.

Using Marcotte’s equation

element / container = proportional relationship

We can calculate the page title’s width as a flexible measurement. Thus:

400px / 680px = 0.5882

0.5882 translates to 58.82%… so, we know that the page title is roughly 59% of the container’s width. Conveniently, we can drop this percentage directly into our style sheet for the width of the h1 header.

[prettify]h1 {
width: 58.82%; /* 400px / 680px = 0.5882 */
}[/prettify]

That’s just the beginning of our fluid grid example, and we’re just scraping the surface. We will get into more details and examples in later articles. But it should give you a better understanding of why fluid grids are an important component of Responsive Web Design. Let’s move on to the final concept of RWD: flexible/fluid images.

Flexible or Fluid Images

The third concept of Responsive Design is most likely one that you’re familiar with. Similar to the fluid grid concept, flexible/fluid images scale to fit their containers. The syntax is pretty easy, too.

[prettify]img {
max-width: 100%;
}[/prettify]

With that single line of code, your images are prevented from being displayed outside their containing element. You can also extend this code to embedded and video objects.

But wait… there’s more.

What about browsers that don’t support max-width (IE6… anyone, anyone)? And what about background images?

We’ll cover those caveats in greater detail in later articles. For now, let’s do a quick recap.

What is Responsive Web Design Recap

Responsive Web Design basically says that:

You have one website that is flexible enough to respond to any environment. The site is optimized for easy reading and navigation, so that visitors don’t need to resize, pan and scroll like crazy. Visitors have the same experience of visiting your site, regardless of if they are viewing it on a small screen, medium screen or large screen.

• It makes your job easier.
• It improves your visitors’ online experiences.
• It allows your site to scale effortlessly to new technology.

The important concepts that you should master in order to take an Responsive approach are:

• CSS3 media queries
• Fluid, proportion-based grids
• Flexible/fluid images

Data-Driven Brand Development

Want a best-selling brand? SmashBrand is a brand development agency for FMCG and CPG companies. From brand strategy to packaging design testing, our Path To Performance™ process guarantees a retail performance lift. Book a time to discuss your project with our team.

Recommended Reading

https://www.abookapart.com/products/responsive-web-design
https://www.alistapart.com/articles/responsive-web-design/