3 fundamentals of responsive design you have to master

Default avatar.
October 17, 2014
3 fundamentals of responsive design you have to master.
thumbnail

A few years ago, it was relatively easy to design and build websites. Websites were simpler, and were viewed on desktops and laptops with little variation in screen sizes. Today with mobile devices taking over viewers’ browsing time, a website can be viewed on a 4.8” smartphone screen, a 5” phablet, a 7” tablet or any size in between. So how do you ensure your website displays correctly across device types and screen sizes? The solution was first proposed by Ethan Marcotte, when he explored ways to make website designs responsive, i.e. have them change according to the screen size. A responsive website design is one which makes clever use of CSS to ensure that web pages render well across a wide range of screen sizes – without resorting to URL redirection or dynamically serving different HTML and CSS code, depending on the UserAgent. It’s not really a technology or a standard, but rather a set of design principles that help achieve the result. Over the last few years, many responsive templates, CSS frameworks and WordPress themes have sprung up. It is, for example, possible to create a responsive website in WordPress without writing a single line of code. But a real web designer isn’t satisfied with just using the templates. She’ll make the effort to understand the elements of responsive web design, in order to use them effectively. So today, we’re going to look at the 3 fundamental techniques you need to master, you be an effective responsive designer.

1. Media queries

Media queries let you design different layouts for different media types like screen, print, TV, handheld devices etc. Depending on the media type, you can configure the style, the font and other elements of the page. Introduced in CSS3, media queries let a designer customize the presentation of the content to suit a specific range of output device types. They consist of a media type declaration and one or more media feature expressions that evaluate to true or false. The range of media types include handheld, screen, tv, print and projection. Media features include, but are not limited to device height, width, aspect ratio, resolution, color index as well as height, width of the browser window. Let’s take a basic example; imagine you want your text size to shrink on smaller devices, like phones. The query for that would look something like:

p {
 font-size:1em;
}

@media all and (max-width:400px) {
 p {
 font-size:0.8em;
 }
}

Now, the font size of your paragraphs will be set to 1em, unless the browser width is less than 400px, in which case it will shrink to 0.8em. In my experience, the best way to design a responsive layout is to first create a default master style sheet with the main structural elements. Then you can add in media queries to customize elements based on the layout or other device elements. If it’s more than a handful of rules, it might be better to move them out to a separate child sheet — which you can selectively load later. Here’s how that would work:

<link rel="stylesheet" type="text/css" media="handheld and (orientation:landscape) and (max-device-width: 720px)" href="tablet_layout.css" />

This piece of code checks whether the device is a handheld in landscape mode with device width less than 720px, and if so, it loads the tablet_layout.css stylesheet. Note that the features width, height, min/max-width, min/max-height all refer to the browser window’s width and height. The device width and height are controlled by the device-width, device-height, min/max- device-width, min/max- device-height. If you’d like to look up more examples using media queries MDN has a good round up.

2. Fluid grids

Fluid grid” is a term used to describe a layout that is coded in relative proportions of the various elements, rather than with fixed pixel values. Traditional CSS layouts used fixed width grids to position the elements. The fixed-width approach no longer works today now that we have device screens ranging from 3 inches to a few feet. In a fluid grid design, everything is coded in terms of its relative proportion to the base element i.e. instead of specifying the height and width of each element; it is given a percentage or relative size. Imagine you have four columns. To make this fluid, instead of specifying each as 200 pixel wide, you’d have to specify them 0.2083 % (ie as 200960). At least, that’s the principle. Creating an entirely fluid grid requires much care. It’s one of those rare cases I’d rather recommend using custom tools. Tiny Fluid Grid, Variable Grid System and Fluid Baseline Grid are some great alternatives to writing your own fluid grid from scratch.

3. Flexible images

Images are deemed flexible when the image renders in native size, as long as the HTML container supports it, but when the browser window shrinks, the image scales to fit it. Even if the rest of the design is fluid and responsive, it’s not going to render well, if all components don’t scale. This can get tricky with images and videos. A 700 pixel wide image will look great on a desktop, but get chopped off when viewed on a 320 pixel tablet. Most modern responsive designs use the CSS max-width property to make images scale. (This method was first proposed by Richard Butler.)

img {
 max-width: 100%;
}

These few lines will ensure that the image doesn’t get chopped off, by setting the max image width to 100% of the container. If the browser window or screen becomes smaller, this piece of CSS code will shrink the image proportionately. The height is automatically adjusted, while keeping the aspect ratio locked. You can instead, lock the image to occupy a certain vertical screen proportion like this

img {
 max-height: 75%;
}

(Make sure not to use both max-height and max-width properties together. ) The image size can also be linked to the text size instead of the parent element using em, like this:

img {
 width: 30em;
}

If the image contains text, you may want to limit the minimum/​maximum size, to ensure that the text is readable. You can specify it like this:

img {
 width: 30em;
 max-width: 500px;
 min-width: 100px;
}

The same techniques can be used to scale videos, for example:

.video embed, .video object, .video iframe { width: 100%; height: auto; }

Final thoughts

Responsive design is the future of our industry, but with so many different techniques flying around, it’s often hard to keep up. Master these 3 simple techniques, and you’ll be 90% of the way to being a responsive designer. Featured image/​thumbnail, elastic image via Shutterstock.

Richa Jain

Read Next

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…