What is responsive design?

Responsive design has radically changed how we consume content online. This is your introduction to everything you need to know about designing responsively

It was Ethan Marcotte, author of Responsive Web Design, who first coined the term when he identified three fundamental techniques for responsive design.

Those techniques are fluid grids for flexible layouts, media queries to help your content adapt to different screen sizes and flexible imagery and media that also respond to the size of the screen and browser.

Since then the internet has gone through an enormous change. Responsive design is now standard practice and essential knowledge for any designer in the field. In this article, Justinmind will help you learn all you need to know about responsive design. Let’s begin.

What you will learn in this article:

• An in-depth look at responsive design
• The main components which comprise responsive design
• Tools you can use to design responsively

What is responsive design?

Responsive design is an approach where the content and layout of web and mobile applications changes according to the user’s behavior and environment.

In essence, the design responds to how the user interacts with it. That means regardless of the size of the screen, the type of device used or platform to read the content, the experience will render well across all media.

If you open the same website on a desktop computer and a mobile device, the user should have the same viewing experience.

Previously, before the dawn of responsive design, if you resized your internet browser you would be unable to view the content properly whereas with responsive design, the content will adapt according to the size and dimension of the browser.

“There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web.” Stephen Hay

Responsive vs adaptive design: what’s the best UI design? Find out more.

Why do we need responsive design?

Since users will generally access content in a variety of different ways on a multitude of different devices, the need for responsive design is greater than ever.

Before the widespread adoption of responsive design, a UI designer might create a mockup of a website and it would be put into production and put out into the world for everyone to use.

There were standard dimensions, like 800 x 600 or 1024 x 786, which designers would adhere to. If you used a larger screen to view the content or a small screen, the design would stay at the same size. Designers would slowly increase the width of their designs as screen sizes became larger.

“The web’s moved beyond the desktop, and it’s not looking back. The number of devices we’re designing for is growing just as quickly as mobile traffic.” – Ethan Marcotte

The problem with this approach is that it assume one design fits all. Rarely, if ever, does one design fit all.

Exploring responsive design

In the above image, you see the same website as it would be viewed on 4 different devices. All of these devices have their own dimensions but the viewing experience is the same on all devices.

Let’s focus on the desktop version of the website for An Event Apart.

On a desktop computer, there is plenty of real estate for a UI design to take advantage off. As you can see above, the content is centered in the middle of the page with the bold headline. The headline is set in REM, which is a way of setting font-sizes based on the font-size of the root HTML element. It just makes it easier to scale in relation to the screen width.

The navigation bar is spacious and readable and there is a large hero image which takes up the width of the top half of the website.

An Event Apart makes good use of white space and the content is displayed in a clear, sensible way.

Now, if we resize our browser you will see how the website changes as the dimensions get smaller. On a smaller device, like a tablet, we begin to see some interesting UI elements.

Instead of our text based navigation menu at the top of the website, we have a hamburger menu. Because the real estate is limited on smaller devices, there is a need to change how the content is presented. An Event Apart’s website would look too crowded and busy if there were 5 navigation pages at the top.

Aside from that, however, the experience stays the same. You will notice when you resize the browser that the heading text and hero image also change slightly in size, as if they were responding to the size of the browser. That is because they are changing because of the the width property being set at 100% in the HTML and CSS.

As you resize the browser to the smallest that it will go, you will see that aside the text resizing and the layout of the gridded imagery accommodating the new dimension, the same experience is maintained.

Discover how to get your responsive design right the first time around.

Elements that make up responsive design

There are many elements which make up a responsive website, aside from simply changing the dimensions of your browser. Other elements to consider when it comes to responsive design are:

• Typography
• Navigation and header
• Performance

What is responsive typography?

Content makes up the majority of the internet. What you’re reading right now is content. Every single website (or, at least 99% of them) will have content on it in some way or another.

“Web design is 95% typography” – Oliver Reichenstein

That content will be set in a particular typeface, such as Helvetica or Montserrat. Since typography plays such an important role in the design of web and mobile applications, it makes sense that you would want your typography to be responsive too.

When you resize your browser, instead of the browser cutting off the text making it unreadable, the type should also adjust. This is where viewports come in.

A viewport represent an area that is currently being viewed. Content outside of the viewport is not seen (so when you make your browser smaller and the content is cut off, it means it is outside of the viewport). Responsive typography will change in size relative to the size of the viewport. This rule will be written into the website’s CSS.

Responsive navigation and header design

In our An Event Apart exploration above, we saw that the experience is maintained and consistent across various devices. The main changes are the addition of a hamburger menu where the navigation menu links were and the header’s imagery and text changing slightly.

It is difficult to include a full navigation menu on a website that has to be viewed on a mobile. Mobile devices aren’t very wide and therefore other means of displaying information have to be used to ensure a good user experience.

Responsive design, performance and the user experience

While many of the elements which make up responsive design are visual, there are back-end elements which enhance the performance of responsive design.

For example, if you created 4 separate HTML and CSS files for each of your devices, you’re going to run into performance issues. The number HTTP requests from the device to the server would drastically reduce loading times. And a slow loading time can result in fewer people staying on your website.

To prevent this from happening, put all of your external style sheets and scripts into a single document and use @media queries.

It’s better to have a large style sheet with fewer HTTP requests than separate sheets that necessitate multiple requests.

In addition, if you’re creating a desktop website it’s worth noting that not everybody is going to be accessing the desktop version. This means taking into account the bandwidth that your users have available to them.

Using clean code that meets industry standards is one way to boost the performance of your website. By keeping your code clutter-free, you will minimize any rogue code and this will keep your styles efficient and lean. And this will result in faster loading times and, hopefully, happy users.

Likewise, if you’re using multiple icons you can combine them into sprites so that the same image is being used for multiple icons, further reducing the number of HTTP requests.

Need examples of responsive design to get started? Here’s 7 examples to inspire you

Common responsive design concepts

Mobile viewport

A mobile viewport is the user’s visible area of a webpage. The viewport will depend on the device being used. An iPhone X will have a more generous viewport than an iPhone 5, for example. This is because the iPhone X is bigger.

The viewport is important because it is used within the HTML and CSS to render the website to the right size, using a <meta> tag:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

As you can see from width=device-width, the code sets the width of the page to follow the width of the device.

Media queries

A media query is a technique found in CSS. It is a line of code which allows the content of a webpage to adapt to different conditions, such as screen size.

It is a cornerstone of responsive web design as it can be used to change media features such as device height, width, aspect ratio as well as resolution and color.

Responsive images

When it comes to images, they account for more than half of the bytes needed to load a website.

If you have to design a website and use a large image for your hero banner, will this translate well to mobile? This is where art direction in responsive images comes in with the picture element.

The picture element means that you can use different versions of an image for different display device scenarios.

Users will access your content from a variety of devices, from really small to very large. To accommodate these changes in dimension, a good practice when it comes to images in responsive design is to use SVG files. SVGs are scalable vector graphics and they maintain their high quality no matter what size they’re at.

Responsive content

As responsive design uses one source of content across multiple viewports, it makes sense that content comes first in responsive design. Think about when a book is made. You don’t create the design and print it out without first having the content.

Designing responsively is the same. You need to put content first. Putting content first means giving designers the constraints they need to be able to create user experiences.

Starting with the content first means that you can see how it will be presented across all devices from the smallest screen to the widest.

In doing so you’re able to progressively design upward to the largest dimensions instead of doing it backwards, which could result in a less than pleasurable user experience. Now let’s take a look at some tools that you can use when designing responsive.

Responsive design tools

To get responsive design right, you have a myriad of tools available to you. Here are a few which are worth looking into.

Justinmind. Justinmind is a prototyping tool which has responsive design capabilities built right into it. With drag and drop widgets and multi-device prototyping, responsive design has never been so simple.

Responsive design in a click? No problem. The best responsive design tool awaits you.

UI Patterns. A compendium of the most popular and common UI patterns that govern the websites and applications we use every day.

Gridset. Gridset is a tool which allows you to create responsive grids for your website.

Bootstrap. Bootstrap is a framework for mobile-first, responsive website design and one of the world’s most popular front-end component libraries.

Style Tiles. Style tiles are for when a mood board is too vague and a comp is too literal. Style tiles establish a direct connection with actual interface elements without defining layout.

Responsinator. Responsinator is a tool designed to test responsive websites on different device resolutions.

Now put the theory into practice and design your own responsive website in less than 10 minutes.

Conclusion

Designers cannot ignore responsive design. It is necessary in a world where our devices and needs are ever changing.

By implementing responsive design, you’re giving the user a consistent user experience across all platforms and this will reduce learning by the user and prevent needless confusion.