Responsive web design basics: The essentials.

Responsive web design is the practice of creating websites that not only look good but also function well on a range of screen sizes — whether phone, tablet, or desktop. When done well, it often goes unnoticed, but this is a good thing as it means that everything is working well. However, when a website’s content appears easy to read on one screen, but the layout displays incorrectly on another, it’s a sign that it’s not been optimized for every platform and device. This 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 has effective cross-device optimization. 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.

This post will cover:

• What responsive web design is
• Benefits of responsive web development
• Responsive design techniques and methods
• Responsive web design examples
• Responsive web design best practices
• How to create your own responsive websites

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 and improves accessibility and navigation. It helps users find the information they’re looking for and encourages 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 more than 60% of all web traffic, a responsive website is crucial to remaining competitive and should be a top priority for every company.

How to use breakpoints.

A breakpoint in responsive web design marks the point at which a website’s content and design will shift to fit a new screen size and provide the best possible user experience. In other words, breakpoints determine how a website appears. They are typically based on browser width.

Content can become difficult to read at 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 to cover all your bases for greater device flexibility.

Consider creating multiple breakpoints to provide a smoother experience for users regardless of their screen size. This is done by arranging a page’s layout into grids broken into multiples of four. Designers will typically have two or three breakpoints per page. However, it’s recommended to account for the following sizes:

• Extra-small: Normally based on a 4-column grid, this range is for mobile users but goes up to 500 pixels.
• Small: Covers a range of tablet sizes from 500 pixels to 1200 pixels, typically within an 8-column grid.
• Medium: Designed for laptops, this 12-column grid goes from 1200 pixels to 1400 pixels.
• Large: This scales up to larger monitor sizes and goes from 1400 pixels and up. A 12-column grid is used for this size.

Responsive web development offers benefits across three key areas — user experience (UX), search engine optimization (SEO), and business impact. Explore each in more detail below:

User experience (UX)

Responsive web development ensures your webpages will adapt to any screen. Without responsive webpages, sites can be difficult or frustrating to use and can put users off from returning. Even if a user perseveres on a site that isn’t responsive, they could miss essential information if it’s hidden by an awkward layout. This can impact conversion rates and increase a user’s tendency to bounce.

SEO

One key ranking for the Google search engine is the mobile friendliness of a website, something responsive web design can help with. On top of this, a responsive site uses one codebase for all sites, reducing the risk of duplicate content penalties. What this means is that responsive websites are more likely to appear high within search engine results pages — above your competitors’. This increases traffic to your site.

Business impact

Simply put, the cost of running a single responsive site is cheaper, more efficient, and easier to maintain than running several versions for various devices. Combine this with the improved user interface (UI) and increased visibility on search results pages, and it’s likely that you’ll see a rise in conversions too.

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

• HTML and CSS: These two technologies can automatically resize, hide, shrink, or enlarge a website. While HTML controls structure and content, Cascading Style Sheets (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 overflowing.
• 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, leveraging caching, and improving the critical rendering path can help increase speed.

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

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 gave digital readers easy access across all 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. This realization led to the improvement of the web design for laptop and desktop readers, who now have an experience like that of a mobile app user or reader of a physical newspaper.

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 subtle changes in grid colors and fonts so that the page remains readable.

Etsy

Etsy’s website shows how the company adapts its size, fonts, and menu options to 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 a 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.

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 and 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.

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.

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 the hamburger menu.

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 on desktop may require less scrolling, viewing the same information on a mobile device can result in a poor user experience if the content is long and the font or imagery is not modified to fit the screen.

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

Reduce friction.

Start by identifying the main goal of the page and design with that purpose in mind. Avoid overwhelming users with too many calls to action. You’ll need to tailor each site version to the user’s needs. A mobile-first design approach helps designers understand and decide what’s necessary to include on the website so that the company’s main objective is achieved. An example of 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 secondary objectives. This can include adding prompts for signing up to a newsletter to encourage purchases later — and deciding which CTAs and micro-interactions will make that possible. The most important thing is to focus on the primary objectives of the user first, then 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 pushes for both design and development to 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 result will look like.

By designing and developing together, you can:

• Boost readability
• Increase time spent on the website
• Enhance interactions
• Improve ecommerce sales
• 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 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 focus on specific page content to complete the user experience.

Test repeatedly.

It’s vital to conduct usability testing across platforms 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 for the content on your website. However, these fonts may not be supported universally — causing them to appear as 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 used to visit your website. Finally, test the speed of your website, considering load time of different pieces of content, such as images and videos on different devices.

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, choose a part of your website that you would like to redesign. Decide what the primary focus of the page should be, then 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.