Responsive web design

Quick definition

Responsive web design means creating web pages that are consistent in quality across a variety of devices and screen sizes.

Key takeaways

● A responsive website is visually appealing, functional, and usable no matter what device the consumer is accessing it from.

● Users switch between different devices multiple times a day. If your site becomes slow, hard to navigate, or visually unappealing when accessed from a different device, consumers will quickly lose interest.

● Web designers should focus on responsive design and functionality at a component level. Responsiveness must be built into your processes and your systems.

Josh Souter is an executive creative director at Adobe with over 16 years of experience in art direction and creative leadership. In his current role at Adobe, Josh leads a talented team of UX, design, and copywriting professionals.

What is responsive web design?

Why is responsive web design important?

How can I make my websites more responsive?

What is the difference between responsive web design and adaptive web design?

What are the key components of responsive web design?

What are the benefits of responsive web design?

What tools can I use for responsive web design?

How will responsive web design evolve in the future?

Q: What is responsive web design?

A: Responsive web design means creating web pages that render well on a variety of devices, windows, and screen sizes. When a website is designed responsively, it will stay consistent no matter how or where you view it. Great responsive web design recognizes that it’s not just the screen size that changes from desktop to mobile. The consumer mindset changes, too.

Q: Why is responsive web design important?

A: If web designers don’t take their audience, audience mindset, and platform into account, their website will lack usability and functionality. If your site is slow, hard to navigate, or visually unappealing when accessed from a different device, consumers will quickly lose interest. For example, your developer designs an experience that is beautiful on large desktops, but when viewed on mobile devices, the text becomes jumbled, and the photos require annoying amounts of scrolling. In today’s world, users view content on different devices all day long, sometimes simultaneously. If you haven’t planned your web content for that behavior and mindset, your website won’t succeed.

Q: How can I make my websites more responsive?

A: Responsiveness must be built into your processes and your systems, not just a web page here and there, or a specific marketing campaign. If you think about responsiveness only in terms of one-off projects, you will end up duplicating efforts among web designers, engineers, and content creators and could create three times as much work for your team. In the past, web designers would start by designing a website for a desktop computer. Then they would think about how to make it work on mobile devices and tablets. But that amount of work isn’t sustainable for an agile organization.

Instead, web designers should focus on responsiveness and functionality at a component level. Instead of thinking about an entire product page, think through how the marquee on a product page works responsively. Think about the cards, carousels, and the calls to action (CTA). Consider what it takes for each component to shine in different viewport widths and screen resolutions. Then, when design teams receive page development requests, they already have the components ready to go. They can hone in on specific page content to complete the user experience.

At the content level, you can optimize your design to match the audience mindset across different devices. The purchasing CTA for mobile users could link directly to your downloadable app, while the desktop computer version would link to the desktop app download, and then offer options for mobile or tablet as a secondary CTA.

Q: What is the difference between responsive web design and adaptive web design?

A: Responsive web design fluidly adapts to different screen sizes across devices. It responds to whatever dimensions the user has chosen in their viewport and uses CSS media queries to adjust for different styles.

On the other hand, adaptive design uses static layouts based on breakpoints — the point at which a website’s content and design adapt to provide the best possible experience, typically determined by window or screen dimensions. It detects the current screen size of the user's device and loads a layout pre-designed for the most common screen widths. But it doesn’t adapt if the user makes a change, like deciding to resize their browser window.

Responsive web design takes into account all the in-between sizes that adaptive web design does not. It is more flexible, but it can be more difficult to implement, too. Adaptive design is like building three different versions of a website, and those versions might not be correct depending on certain user choices.

Q: What are the key components of responsive web design?

A: The first component to consider is your different responsive designs. Then, determine what technologies you’ll use to create them. You’ll probably need to tap into tools like a Flexbox container or a CSS grid container. Designers are finding that users are breaking out of the industry standard breakpoints, so it’s time to adapt.

The second component is data. Invest in collecting both quantitative and qualitative data. Quantitative data can help you make decisions based on how many people are visiting your site and how much money they are spending on your products and services. Qualitative data gathered by talking to your customers can help you understand their behaviors and expectations.

The third component is the creative content on each web page. Mature companies are instituting responsive content into their designs. For example, when you view a web page on a mobile device, the words on the page might change. There may be less written content to make it easier to scroll through the page.

Q: What are the benefits of responsive web design?

A: Responsive websites give marketers another place to optimize for customer experience. They also increase your site performance. When your responsiveness goes up, your bounce rates go down. Your engagement increases as you optimize for different viewpoints and customer mindsets.

Customers benefit when a brand considers where they are and what they need. When they are at work using a desktop computer, they enjoy rich, interactive experiences. On their mobile devices, they experience fast page loads and touch-friendly interfaces for smaller screens.

Q: What tools can I use for responsive web design?

A: Adobe Experience Manager has state-of-the-art tools for building a responsive web system. Designers can build experience fragments that are responsive, allowing marketers and content creators to simply select the fragments they want to publish without ever thinking about responsive design. It also offers image optimization.

Adobe XD is a great tool for prototyping and building responsive web experiences, and for demonstrating the benefits of those experiences to stakeholders. Adobe XD’s application programming interface (API) allows designers to view prototypes on their phone and interact with them like customers would. Users can export assets directly from Adobe XD to Experience Manager.

Adobe Target also gives marketers the tools to test and optimize software for different devices.

Q: How will responsive web design evolve in the future?

A: Expect to see innovations around headless content management systems (CMS). New technology could make it possible for marketers to pull content directly from creators, apply responsive styles, and output responsive websites without needing the middlemen of front engineers and publishers.

People also view