The Complete Beginner’s Guide to Responsive Web Design

The landscape of the Internet drastically changed a few years back. Before, web designers only had to worry about a few different viewing platforms, primarily desktop views. This changed with the growing popularity of mobile devices, with their various sized screens, and created a new set of challenges for web designers and developers.

The idea behind Responsive Web Design is that a website should adapt to any device that is being used to display it. Not only mobile devices but also on desktop computers and tablets.

According to the mastermind behind responsive web design, Ethan Marcotte, there are three parts to this type of approach: a flexible grid, flexible images and media queries.

Grid Systems

A grid system, like those used in magazine layouts, is critical to responsive web design. In order for the layout to be flexible, the measurements must be a percentage, not pixels. This means that a website with a 50% width will always take up half of the screen the website is viewed on, regardless of its size. This is where flexible and responsive web design begins.

When deciding on the background for a website that is going to be responsive, the best option is to use a simple background or simple texture that can either be tiled seamlessly, is a vertical gradient, or is just a plain solid color. Static images, backgrounds that don’t seamlessly tile, and horizontal gradients will not degrade gracefully for screen sizes that are smaller or larger than the screen you designed for.

Scale Everything Down

When designing a responsive site, every aspect of the needs to be scaled down. The fixed width approach, like the 960.gs or the Blueprint CSS Framework, are not the best way to design a website.

You have to design the various elements in such a way that if the browser width is changed, the site will still display all of the important information on your website.

This can be achieved by setting your element sizes in percentages rather than pixels.

Working in percent is the same as in pixels, there is not much of a difference, and you don’t need to learn other properties or CSS selectors. Working in percent is also simpler, because it is quite clear what width: 100% means.

Regardless of the dimensions of the screen, the mentioned div will always be at maximum width. If you were to use 100 pixels instead of 100% then regardless of how big the viewing screen is, the respective div would always be 100 pixels wide.

On a desktop with a 1600×900 resolution, this isn’t much, on an iPhone, however, it is far too much space. See the difference? It is just more logical to work in percentages rather than pixels.

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. The media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, web layouts can be tailored to a specific range of output devices without having to change the content.

This means that you have to consider the way your layout is going to look, by thinking about the platform you design for.

The challenge for web designers is designing for a very limited range of screen sizes. As websites are being regularly browsed on the screens of the smallest devices and the largest of monitors, web designers have to consider how their websites will look at very small and very large sizes.

These modules need to be resized and moved when viewed on a mobile device. Therefore the design has to be flexible. By using media queries properly, this is all made possible. The main idea behind this concept is that the modules change their position and size based on the screen size that the website is being viewed on.

Getting Started with RWD

Since we now have an understanding of what Responsive Web Design is, it’s as good time as any to head straight into learning about how to create a mobile-friendly site. As with anything in web design, it is important to start off with the basics and create a solid foundation.

Media Queries

It is impossible to get started with Responsive Web Design, without first talking about media queries. Media Queries are the magic CSS settings that tell the web browser what sections on your website will load when a certain screen size has been identified for the viewing device.

There are three different media queries that make up the majority of the what Responsive Web Design is all about. These three different settings, of course, belong to the screen resolutions of phones, desktops, and tablets.

To accommodate for these screen resolutions, there will be four screen width settings we’ll be taking advantage of. These being 320px, 600px, 768px, and 1280px. A slightly less important screen width setting is 1824px, this is used for large screen sizes that exceed the standard desktop/laptop screen size and using CSS to create specifications for each device width would look something like this:

/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ }

The device width parameters set above will allow for declaring parts of a website’s sections visibility, this is also how your website’s grid is set for different devices.

Responsive Grid Systems

Once you understand the different media queries and how their related width settings may affect how they’re displayed on different devices, the next thing we need to do is set up a flexible grid system.

Setting up a flexible grid is relatively easy if you’ve ever used a grid system in the past. There are only a couple of different settings that really need to be changed. First, we need to switch sizing from pixels to percent, then next thing we need to do, and this is an important one, is set a max-width for the container of your website. Once the max-width has been set, you’ll be able to use a formula to figure out how to best display elements on different devices.

The formula, from Ethan Marcotte, is target ÷ context = result. The max-width setting is the target, the context is the desired screen size for a particular section. Continue the process until every section of your site has an appropriate grid width in percentages, with respect to your max-width.

Responsive Web Frameworks

Creating your own media queries when you are first starting to work with Responsive Web Design may be overwhelming to some. Another rationale for not creating your own responsive grid is to use one of the many responsive grids that are available online.

ZURB’s Foundation and Bootstrap are just some of the most popular responsive frameworks you could consider using.

Responsive Background Images

Since it would defeat the purpose of the ideal flexibility found in responsive design to use media queries to call different background images for specific screen sizes, the most practical and less time-consuming way is to just work with one universal image. What is now filling the air of confusion is becoming curiosity, a curiosity leading to one question: how do you make background images responsive?

CSS3 opened the door to a whole world of fun possibilities. One of the fun things that we can do with CSS3 is set the background-size property.

background-size gives the option for setting a specific size for the background image being used. It can be set by using lengths and percentages, or by using two keywords contain and cover.

Contain

What is the first thought that pops up when the word contain is mentioned? If it is something similar to keeping the entirety of something within a container, then that is a great assumption.

contain refers to a background image being fully displayed within its parent container to the closest of its aspect ratios. Take a look at the example below:

body{ background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-color: #000; background-size:contain; }

By using the contain property, this ensures that the background image, bg.jpg, will maintain a ratio of 300x200px, regardless of the size of the viewing area.

Cover

When background-size is set to cover, as you can imagine, the background image will expand to cover the entire space that is being displayed. If the viewing window is smaller than the background image, the image will be cropped to fit the viewing window.

Here is another code example:

body{ background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-color: #000; background-size:cover; }

All of the above CSS code is the same as is it was for contain with the only difference being that the background-size setting is now set to cover. This setting will now allow the background image to ignore its aspect ratios and cover the entire browser window to the best of its abilities. Whether this be by the image being cropped at a certain point, or stretched to a miserable blur.

Exact Measurements (Lengths and Percentages)

This setting for background-size does exactly what it implies it will do. With this setting, the background will be set at a specific size and will remain as such. It might seem odd to be discussing setting the background image to a specific size when aiming for adaptability and flexibility with responsive design, but don’t overlook the percentagesoption.

To use this setting, set the background-size to an ideal percentage. This is done by placing the width first, then height. If only one setting is specified, it will be recognized, and the width and the height will be automatically set to auto. Let’s take a look at another code example:

body{ background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-color: #000; background-size:40% 60%; }

What th example CSS above shows is that the body background image, bg.jpg, will always have an approximate pixel ratio of 40% by 60% with respect to the viewing device.

Responsive Navigation

One quick way of creating a responsive menu is to convert your navigation to a select menu, but it is not always practical, especially if you have a large menu with many sub-levels. There are many better techniques you should consider before using this one.

We’ve previously published a collection of responsive menu code snippets that offer a quick solution to the many responsive navigation issues you will no doubt encounter. Here they are: 10 Code Snippets for Quickly Creating Responsive Navigation Menus.

Responsive Typography

Some people will argue that it is a better practice to use pixels for the CSS property font-size, and others say that it is better to use ems. For responsive design, both parties are right. This is so because to have a properly planned and flexible type setting, there needs to be a setting that is adaptable to device screen widths and has a fallback for when the browser doesn’t support that font-size setting.

REM Units

We mentioned that the best practice for dealing with font-size in responsive web design is to use both ems and pixels as the declaration. Well, this is because both are fallback settings for browsers that don’t support the use of REM units.

What are REM units? REM stands for root em and is a relative unit, meaning the actual font size of every REM declaration is based off the setting for the main parent element.

A good place to set the parent size is in the <html> tag, but the <body> tag will work as well. To get a better understanding, take a look at the code example below.

html {
font-size: 62.5%; } body { font-size: 2.2rem; } /* Setting 2.2rem = 22px */ h1 { font-size: 3.2rem; } /*Setting 3.2rem = 32px */

Above, the parent tag of <html> has been set at a font-size, and all type within that parent element will have a REM declaration based off of what is set for <html>.

In the CSS of the <html> tag, the font-size has been set to 62.5%. This is so that the REM settings can be written similar to what would be written if you were using pixel approximations.

Pixel Fallback

REM units are great, but like any other feature of CSS3, they are not fully cross browser compatible. Luckily, there is a simple solution, and that solution is using pixel approximation as a fallback option for browsers that don’t support REM.

The CSS below will add a pixel approximation before the REM unit:

html { font-size: 62.5% } body { font-size: 22px; font-size: 2.2rem; } h1 { font-size: 32px; font-size: 3.2rem; }

The pixel fallback is put before the REM unit so that the REM unit loads first, and then the pixel declaration will load if REM units are not supported.

Responsive Images

Probably the most concerning issue to those new to RWD, once they start to understand the concept, is how images are handled. It is an honest concern because many have used image to balance their layout or strengthen and support their content.

In responsive design, the images move and scale according to their size and position on the grid being used. Fortunately, there are many options for how to handle this.

Setting Max Width

The max-width CSS property is important to understand because it is the foundation for what can be done with images in Responsive Web Design. This CSS setting states that an image cannot be wider than its containing element when set to 100%. Here’s a code example below:

#right-hero {
width:30%;
height: 200px; float: right;
margin: 0 0 5% 5%;
} #right-hero img {
max-width: 100%;
height: auto;
padding: 5px;
}

The sample code above shows that no matter what the actual size of the image is, it can’t be rendered as wider than 30% of the parent container #right-hero. Height set to auto is important because it makes sure that the image will maintain their aspect ratio.

There is only one setting that will cause problems however, padding. I guess a quick review of the CSS box model may be a little necessary here.

Setting padding or margin can achieve similar results, but there are major differences between the two. What margins do is add the desired space on the outside, while padding is added to the inside. So whatever padding is set to, that will need to be added to the overall size. Margins, however, have no connection to size.

The problem here is that when the image reaches the maximum width of its parent container, the padding setting will make it expand. Luckily CSS3 has a property to fix all of this, box-sizing.

Box-Sizing

There are two settings for box-sizing that are important: border-box and padding-box. These two properties are very similar, border-box sets the image to a specific height and width (including the border-width), and padding-box only takes into account the padding.

Setting border-box and padding-box while using the settings we’ve already discussed will make your images responsive. There are some other alternatives, though they aren’t as flexible.

• You can have multiple versions and sizes of the same image that are called depending on the user.
• Cropping. The CSS overflow property (e.g. overflow: hidden) gives the ability to crop images dynamically as the containers around them shift to fit new display environments.
• Hide images altogether. Media queries that serve up a stylesheet which sets the display: none property for images takes care of this function.
• Unstoppable Robot Ninja has a simple script that automatically resizes your images.
• Zomigi allows you to selectively hide parts of your image dynamically.

Conclusion

By reaching the end of this guide, what and how to implement Responsive Web Design should no longer be a mystery to you. From what you have read, you should have a good understanding of the concepts. However, there is always more that can be learned.

Here are a list of resources you’ll find very useful when you start to develop your very first responsive website: