What is responsive design?

This is an image of multiple device screens, displaying the need for responsive design and why you need it.

You have probably heard of responsive design, but do you really know what it is?

The term “responsive design” is everywhere. It’s in all the ads for the popular web builders, it’s a major selling point for every designer I know (including me), and it’s one of the most common questions clients as me. So it’s likely that you know you need a responsive design, but you still may not fully understand what it is.

In its surface, a mobile design seems simple enough. There are many different ranges of devices and screen sizes and a website needs to adapt based on the width of the screen being used. In other words, the “design” has to “respond” to its viewing port. Structurally, we achieve this by creating fluid designs.

What are Fluid Designs?

Have you ever noticed that when you pour glass into a container that the water fills into any area that it will fit into? It never matters what size or shape the glass is in, the water just goes where it fits as the water rises. If you’ve ever seen an automatic dog feeder, you can see how manipulating the shape of a container can be used to move water in useful ways, such as keeping a dog’s water bowl full.

Fluid web designs do the same thing; you pour the content onto the screen and the data just sort of goes where it can fit automatically. Web designers can direct the flow of the content by manipulating the data containers. Over the years, developers have come up with ways to keep designs visually consistent by adjusting content using styles based on relative indicators, such as %, em, or rem.

These styles take their sized based on their containing parent, and are amazing for keeping a design functional and consistent. Sometimes you need to make changes when a screen element loses some degree of its functionality.

Fun Fact:

In the initial stages of design, you can design with specific pixel settings, and then later convert your elements into percentages.  A man named Ethan Marcotte (https://ethanmarcotte.com/), who is attributed as a pioneer of responsive design, came up with a simple formula for making responsive conversions.

THE CONVERSION FORMULA IS:  TARGET ÷ CONTEXT=RESULT

So, if you’re trying to determine the em’s for a 55px font size, and assuming you’re using a default 16px font size then you’d calculate as such:

55px ÷ 16px=3.4375ems

This works for %s too. If you’re trying to determine the width for a 480px div inside a 580px container you’d calculate as such:

480px ÷580px= 0.8275862068965517  When converting for percentage, we move the decimal 2 places to the right which means you need a setting of 82.75%.

-Jason’s Notes

If you’re thinking ahead, you might be wondering what happens when an element converts across screen sizes, and even with a relative value, the design doesn’t look good or functional on different screen sizes? If you were wondering this, then congratulations, you already understand why we use breakpoints!

What are breakpoints?

Breakpoints are a tool that we create in a style sheet that “breaks” style rules out of their routine when the screen-width reaches a certain “point”. Designers use a type of styling rule called a media query to achieve this.

A media query instructs the web browser to adopt all the style rules for a website until the screen-width meets the requirements of the style. The real challenge in building breakpoints is deciding how to apply them, and what sizes are the most optimal. Aside from font-sizes, through media queries, you can control how much screen size a containing element takes up, what order to stack columns in on a small screen, and how margins need to change.

The trick in building breakpoints is to get the most consistent design with as few breakpoints as possible. For this reason, truly dynamic styles with precise requirements are harder to obtain and require careful planning.

Beyond the way, a website looks responsive design matters to the mobility of your website

Making your site content fit on the screen is the obvious result of responsive design, but it is only the first step. You now need to consider your site’s content and how it relates to user experience. Sometimes content makes sense on a 27-inch monitor but loses its impact on a 4-inch screen. Designers sometimes have to reposition content to be effective. Other times, the content may be more supplemental than functional for your target goals and need to be removed.

The most important question you can ask yourself when presenting a website on mobile is “how does this give the user what they need in a way that isn’t too complicated?” Most designers take a mobile-first approach to design in order to streamline the user experience.

How your content affects your overall outcome is a major consideration that is often overlooked.

Load times are a major consideration when working towards responsive design goals.  The stats don’t lie; web traffic tends to fall for sites that can’t load quick enough to avoid their viewers from getting impatient. Speed is important. There is also the caveat of limited monthly bandwidth and slower download speeds for mobile phone users. In order to better serve a site’s audience, the size of a website needs to be taken into consideration. Streaming video, large hi-definition images, sloppy code…anything that slows a site down unnecessarily will prevent your site from being successfully responsive.

Serve up a website too slow, and your audience will leave. Eat up your audience’s bandwidth and they will avoid you. Responsive design isn’t just about how things look on the screen; it’s about taking a long view and making sure your audience’s user experience is good.

Being non-responsive with your design will affect your Google ranking.

A few years ago, Google posted a notification on its AdWords blog letting developers know that responsive design is a big deal! If you Google April 21, 2015 (the date the announcement set for using mobile as a search factor), you’ll find all sorts of reactions to the announcement.

Many designers and SEO experts called it “Mobilegeddon”. Most of the reactions indicated a need to scramble and get website’s up to date, but most of us already knew the day would come and had already prepared our websites.

And so it came to pass that on April 21, 2015, Google began penalizing sites that weren’t responsive. As a result, a lot of legacy sites began losing their ranking in favor of sites that were fully responsive. Google argues that since the largest percentage of internet users access the net from their smartphones that it was time to act on that information and give people information in a format they could use.

It would be hard to disagree with Google on this point.

So, what is Responsive Design?

I would advise that responsive web design is a collection of every consideration that you need to make in order to serve your users a good experience no matter how they choose to view your website.

Visually your website must be able to adapt and respond to the user’s viewport. It must be fluid and maintain a high degree of consistency across various viewports. Functionally, your website must run clean and fast in order to prevent excessive load times and excessive data usage. For the user, you need to make sure you are serving up your most valuable content and that optional content takes secondary consideration to our primary content.

Responsive design is everything that affects the user where they browse your website. And now you know what responsive design is.

Jason Usher

Jason has been studying design and web programming for over 10 years. He's a big fan of brand-oriented design with an emphasis on value for value growth. When he is not neck-deep in market research, he enjoys photography, time with his wife and kids, and a good movie.

Leave a Comment