Responsive web design basics

There are times when a website’s content appears easy to read and navigate on a computer screen, but if you open the same site on your phone, the layout changes or the content displays incorrectly. This is a sign that a website may not be optimized for every platform and device, which can lead to user frustration and an inconsistent — or poor — digital experience.

A website that doesn’t display properly on a variety of devices creates a negative experience for users. Understanding the importance of how your site displays across platforms will help you create a better user experience.

Whether you’re a designer, developer, marketer, or business leader, you want to ensure your website content is effective across platforms. You need to have a basic understanding of the fundamentals of responsive web design before you can begin to think about implementing it on your site.

In this article, you’ll learn about what responsive web design is, see some examples of how to make your website more responsive, and explore a few best practices.

Specifically, we’ll cover:

• What is responsive web design?
• Responsive design methods
• Responsive web design examples
• Responsive web design best practices
• How to create your own responsive websites

What is responsive web design?

Responsive web design considers the user’s platform, screen size, and orientation to make dynamic changes to how content is displayed. Responsive web pages are consistent in quality across a variety of devices and screen sizes. A responsive site is visually appealing, functional, and usable no matter what device the consumer is accessing it from.

When creating a website with responsive design, designers make sure the experience accommodates the many different types of users who will access and interact with it. Responsive web design makes sites faster, more accessible, and easier to navigate, helping users find the information they are looking for and encouraging them to stay on the site — which can improve engagement and sales.

There are also internal advantages. Because a responsive website is dynamic and can use the same codebase for every device, development and maintenance are easier and faster too.

Since mobile devices, which can include everything from phones to tablets, account for 60% of all web traffic, a responsive website is crucial to remaining competitive and should be a top priority for every company.

What are breakpoints?

A breakpoint in responsive web design is the point at which a website’s content and design will adapt in a certain way to provide the best possible user experience. In other words, breakpoints determine how a website appears. They are typically based on browser width.

There are times when the content of a website becomes hard to read because of different screen sizes. Adding responsive breakpoints helps make it easier. There are usually breakpoints for mobile devices, tablets, and laptop or desktop computers, although they can be customized so that you’re covering all your bases for greater device flexibility.

Responsive web design methods

Now that you have a basic definition of responsive web design, let’s look at some of the most common methods to make websites responsive.

• HTML and CSS. These two technologies can automatically resize, hide, shrink, or enlarge a website. While HTML controls structure and content, CSS controls design and layout.
• Media queries. Media query is a CSS technique that modifies websites and apps based on the device type or a specific characteristic — for example, the screen size and resolution.
• Layout. A fluid layout uses percentage-based values, like the size of the screen. On the other hand, a flexbox layout expands items to fill free space or shrinks them to prevent item overflow.
• Responsive images. With responsive web design, you can use dynamic variables to control image width and height.
• Speed. Pages that load more quickly have a lower bounce rate. Optimizing images for efficient loading, utilizing caching, and improving the critical rendering path can help increase speed.

Responsive web design examples

Many companies with a major online presence have updated their websites to be more responsive for different users and devices. Let’s take a look at some examples of responsive web design.

1. The****New York Times

In 2018, the New York Times improved the speed and user experience of its site with responsive web design. The update made the website more consistent and allowed for digital readers to have access across all of the newspaper’s digital platforms.

After initially making its mobile app easier to use and more visually pleasing, mimicking the paper format, the Times found that its desktop design was lagging behind. This realization led to the improvement of the web design for laptop and desktop readers, who now have an experience similar to that of a mobile app user’s or even a reader of the physical newspaper.

2. Dropbox

The popular file hosting and cloud storage service has also modified and adapted its website to better serve mobile devices. Comparing the two layouts, you can see that the desktop version on the left is very similar to the mobile version on the right. However, there are some grid colors and fonts that change so that the page remains readable.

3. Etsy

Etsy’s website shows how the company adapts its size, fonts, and menu options to various different types and sizes of screens. The tablet and desktop versions are laid out similarly — the header options and a slight design tweak are the only differences, which indicate device-based change in user intent. But if you compare these versions to the way Etsy’s website displays on a mobile device, you can see how the navigation bar disappears completely to reduce clutter.

On mobile devices, it’s clear that Etsy prioritizes personalization while also helping customers get to what they want quickly — the products.

4. GitHub

This website shows what’s important when it comes to a company’s business and conversion goals. One of the first things a visitor sees when landing on the desktop version is product offers, as well as a form where the user can sign up for GitHub.

On the mobile display, the main sign-in or sign-up page is even more prominently displayed, without the extra content and elements shown in larger resolutions.

5. Slack

Slack groups its website options into a hamburger menu for mobile and tablets, compared to the navigation bar across the top on the desktop version. There are also fewer CTAs on mobile. The two CTAs above the fold on the desktop display are replaced by one large button that takes up almost the full screen in the mobile and tablet views.

In addition, for mobile, the web page content is compressed vertically into one column, with text paragraphs running above and below images.

6. Starbucks

Starbucks shows what simple, eye-catching responsive web design looks like when it’s done right. There’s no fancy parallax scrolling effect, but the colorful static imagery of seasonal products works well.

One issue, however, is that the menu option, which is a product “menu” on desktop, is bundled into a general hamburger menu when the design is scaled down. This could be confusing for users who don’t expect to see food options when they open up the hamburger menu.

Responsive web design best practices

Now that you’ve learned what responsive web design is and seen examples of what it looks like, let’s explore some best practices.

Prioritize content

Make sure users can find the content they’re looking for with minimal scrolling or browsing. While viewing website information using a desktop may take less scrolling, viewing the same information on a mobile device can result in a poor user experience if the content is long or the font or imagery is not modified to fit the screen.

Remember to create content that fits within the specified viewport so that consumers can locate the information they are looking for easily.

Reduce friction

Think about the primary purpose of the page and design around it, rather than, say, trying to include numerous CTAs. You will need to tailor your page to each version of the website. A mobile-first approach helps designers understand and decide what’s really necessary to include on the website so that the company’s main objective is achieved. A main objective could be the purchase of a product or a service.

When it’s time to build the tablet and desktop versions of the website, you can start thinking about other secondary objectives, such as signing up for a newsletter that could lead to a purchase later on — and which CTAs and micro-interactions will make that possible. The most important thing is to focus on the primary objectives of the user first, and eliminate any unnecessary friction that doesn’t aid the primary or secondary goals.

Think about thumbs

Make sure the important parts of the page are easily reachable for a person using their thumb on a mobile phone. The main difference between desktop and mobile users is that the former typically have their computers on a surface, whereas the latter hold their devices in their hands.

This significantly changes the way web designers create tap targets and other elements that users interact with. For example, people typically expect the main desktop navigation to be at the top. But on mobile, it should be in the middle or at the bottom since people can’t reach the top comfortably with their thumbs.

Design and develop together

Remember that responsive web design is an approach that suggests both design and development should respond to the user’s behavior and environment, so it’s important that they work together effectively. Designers and developers collaborate to determine how content should be shuffled and what the end result will look like.

By designing and developing together, you can boost readability, increase time spent on the website, enhance interaction, improve ecommerce sales, and make the overall user experience better.

To put responsive web design into practice, you’ll need to start by gathering information, organizing the structure, and designing what the website will look like. Then you can test and launch a beta version of your site.

Make it structural

Responsiveness must be built into your processes and your systems, not just for a web page here and there or a specific marketing campaign. 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 calls to action. 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 and can hone in on specific page content to complete the user experience.

Test, test, test

It’s vital to conduct usability testing across platforms and on a regular basis. Test for navigation on the website — as the device changes, the navigation bar should change with it. It’s necessary to test the navigation designs on different screens and verify that it’s not leading to a poor user experience.

You can also test fonts on multiple devices. You may want to use different fonts and design methods to write the content on your website. However, these fonts may or may not be supported universally, which could lead to them transforming into random characters or codes on a consumer’s device. Remember to test the fonts on multiple devices before launching the update on your website.

Be sure to test device-browser combinations. You can analyze the web and mobile traffic from Google Analytics and include the browsers that are most commonly used to visit your website. Finally, test the speed of your website, taking into account load time of different pieces of content, such as images and videos on different devices.

Create your own responsive websites

Making sure your website displays effectively across devices and platforms is a key part of providing a great experience for your visitors.

When you’re ready to get started with implementing responsive web design, take a look at a part of your website that you would like to redesign. Decide what the primary point of the page should be, and start thinking about how you can design around it to achieve your desired goal.

Adobe Experience Manager Sites makes it easy for you to create web pages that adjust to almost every device, ensuring your users always get the best experience.

To find out how Experience Manager Sites can help you create responsive websites, watch the overview video or sign up for a product tour.