Responsive Web Design Best Practices

Responsive Web Design: Tips, Tricks, and Best Practices for 2022

Mobile devices have taken over — as of December 2021, 54.46% of Internet users access websites on mobile devices in one form or another. If your website isn’t accessible on mobile devices, you’re way behind curve. It seems impossible in this day and age, but I still encounter non-responsive sites almost daily.

With the wide array of screen sizes, resolutions, and displays available for people to access your website and the role mobile responsiveness plays in Google’s search engine ranking algorithm, it’s imperative your site looks displays and functions properly on any screen.

By following these responsive web design best practices in 2022, you’ll ensure that all your website visitors have a great experience no matter what device they use.

A Quick Refresher — What Is Responsive Web Design?

If you have a multi-column layout on the desktop version of your site, it usually will not display correctly on smaller screens. Your site should be able to adapt to a single-column mobile layout when it’s viewed on a phone.

Responsive web design is the method of designing a website interface that responds or adapts to different screen sizes. With a responsive design, your website content will adapt based on the screen size or viewport it’s viewed on.

As an example of well-executed responsive web design (humble brag), if you’re reading this article on your desktop computer, make your browser width smaller or larger and watch how this page adapts to your adjustments. If you’re on a mobile device, turn it sideways and view it in landscape mode to see how the page instantly adapts to the changing viewport. This is responsive web design in action.

If you pulled up a website on your phone and got the desktop version, chances are you’re going to have a tough time navigating the website to find the information you want and you’re going to leave or “bounce” to another site that offers a better mobile website experience.

Responsive design was created to improve the user experience of today’s multitude of devices.

Responsive Web Design vs Adaptive Web Design

It’s important to not confuse responsive website design with adaptive web design. There’s a difference between having a mobile version of your site and having a truly responsive experience for mobile users. The adaptive design model offers mobile-friendliness, but not responsiveness.

Though responsive web design sounds similar to adaptive web design, it has a few key differences that make it the superior choice for web design in 2022.

With adaptive web design, when someone accesses your website, the browser detects the max-width of your device and sends a specific layout to suit. These different layouts are typically designed for six different screen widths:

• 320 px
• 480 px
• 760 px
• 960 px
• 1200 px
• 1600 px

The problem with this approach is that it requires multiple static layouts. When a user goes to your website, they are served a different version depending on the type of device they use.

And if you aren’t familiar with web development, let me explain why this is an absolute nightmare; having separate layouts means you have to maintain separate HTML and CSS code for every design. This means that adjustments made to the website must be made in multiple locations.

As you can imagine, this scenario gets quite time-consuming for even the smallest of changes. Responsive web design solves this by having a fluid design that adjusts according to screen size. It does this using media queries, flexible grids, responsive imagery and scalable vector graphics to respond to different screen dimensions no matter if the viewer is using a desktop browser or mobile device.

Responsive website designs are much easier to update and maintain as you can update the site once and it will adjust for all screen sizes. There is no separation between the mobile site and the desktop website. The only difference between the smaller and larger versions of your site is found in the CSS stylesheet.

Why Responsive Web Design Is Important

75% of users judge the credibility of your business based on your website design. First impressions are key — so you need to make it a good one, whether it is on a small screen, giant desktop computer, or anything in between. The key is to focus on creating seamless user experiences across all screen resolutions.

Approximately 25% of Internet users in North America exclusively use their phones to access the Internet. This means the mobile version of your website is the only chance you have to make a good impression of your business.

85% of adults think that the mobile version of a business website should be at least as good, if not better than the desktop version (known as mobile-first design). If these people are potential customers, you better not disappoint.

94% of people say websites with good designs are more trustworthy. Professional web designers build the “know, like, and trust” factor that leads to sales with an intelligently designed website on all screen sizes.

The numbers don’t lie — responsive web development is a must in 2022. Providing users with a great experience on mobile devices and desktop computers alike will result in sales growth and improve your search engine rankings.

SEO and Responsive Web Design in 2022

Beyond just giving the people what they want, there’s another reason you should pay attention to responsive web design in 2022: to give Google what Google wants. And in 2022, Google wants your site to be mobile-friendly.

Google gives preference to sites that are mobile-friendly because the core of the ranking algorithm focuses on content and user experience.

Google’s mission statement is to “organize the world’s information and make it universally accessible and useful.” There is nothing useful about a site that is unreadable because of poor design or web layout on mobile devices.

As the benchmark for SEO best practices, Google’s algorithm changes tell web designers what aspects of design and development are important to users. To rank well in organic search results and grow your web traffic, responsive web design must be a priority.

Responsive Design Simplifies Website Maintenance

Another reason to prioritize a responsive website design is that it makes website maintenance much simpler and more cost-effective.

Designing and maintaining multiple sites makes website maintenance a costly hassle. Responsive web design makes maintenance simple as you can make a content change in one location, adjust any necessary styling, and you’re set.

Elements of Responsive Web Design

Responsive web design involves a few different elements, including HTML and CSS, media queries, flexible layouts, responsive images and other media, and responsive font sizes.

HTML/CSS

The foundation of responsive websites is consistent of all websites in general. HTML and CSS are the building blocks of any responsive website design.

HTML is a markup language that is used to provide the structure and content of a webpage. It uses different tags to indicate different types of data (like distinguishing paragraph text from heading text). Within these tags, you can include class and id selectors to target and adjust content with CSS.

CSS is used to control the appearance of HTML content. You can adjust layouts, sizing, colours, font styles, and anything else that you want to change. You can think of HTML as the bones of a website and CSS as the skin.

Media Queries

CSS is also used for writing media queries, which first gave life to the concept of responsive web design. The invention of the CSS media query is perhaps the most important feature of responsive websites as the queries are used to provide different CSS settings based on each device’s maximum width.

With a media query, you set breakpoints where you will adjust the style settings for the same layout across the desktop site, tablet version and mobile screens alike. These breakpoints specify a width at which the new rules should be applied in addition to or in place of existing CSS rules. Using media queries, you can adapt the appearance of your site and control interactive elements specific to screen resolutions.

Flexible Layouts

While media queries are powerful for adjusting style settings, there are also other ways of building layouts using a flexible grid. These are helpful in reducing the number of media queries needed as they are somewhat responsive to multiple screen sizes on their own.

Three common flexible layouts are fluid design layouts, grids, and flexbox.

1. Fluid Layout

With a fluid layout, web designers use relative values that adjust based on factors like viewport width. Instead of using set measurements, such as 600px, you would use measurement units that are flexible. These include:

• VH, VW — percent of the viewport’s height or width
• % — percent of the parent element

When you layout elements with percentage values rather than static values, it allows for some flexibility for mobile users. For example, you may have a two-column layout and want each column to take up 50% of the screen width (50vw). By setting these dynamic values, it will take up half of the screen regardless of the screen size.

This is a great starting point for modern responsive design, but it does have its limitations. For a large desktop computer or tablet, 50% of the screen may be too much space for the content.

Fluid values are a useful and common tool for responsive web design, especially combined with other responsive design layouts.

2. Flexbox

CSS developers saw the limitations of fluid layouts and developed flexbox as a more advanced and flexible solution. Introduced in 2009, flexbox allows you to lay elements out dynamically.

To use flexbox, you wrap items in a container with the “display: flex” attribute in CSS. The container will then dynamically adjust the size of the elements based on available space which is incredibly useful on mobile websites. If you have three items in a container, they will expand or contract to fit the available space.

There are, of course, many modifications you can make to the way items are laid out in a flexbox. You can lay them out in rows or columns and adjust the spacing, alignment, and sizes (among other things).

If you want to dig deeper into the topic, here is a great guide to using flexbox for building flexible layouts for different devices.

3. Grid

Grid layouts are useful for creating flexible layouts. Grids act pretty much how you’d imagine them to. You define your grid size and place content inside it.

Grids aren’t inherently responsive to screen sizing but combined with media queries they are very powerful for complex layouts and even mobile apps. Using a media query, you can adjust the grid size and layout with just a few lines of code. This is much simpler than trying to adjust the layout exclusively using CSS.

You can learn more about using CSS grid layouts here.

When choosing between grid and flexbox layouts, a good rule of thumb is to use flexbox for items you want to layout in a single direction (vertically or horizontally), while grids are more appropriate for larger, more complex layouts.

When laying out interface elements like navigation bars and more complex photo galleries with grids it’s best to consider using flexbox layouts.

Responsive Images and Media

No website is complete without content. Images, media, and typography should also be responsive to different device sizes as well.

Failing to take screen size into account with images is problematic on many levels and will fill your inbox with mobile usability alerts from Google Search Console as well. With smaller screens, it’s not necessary to have a super-high-resolution photo. Forcing mobile visitors to download the full-size desktop image means the same page will load very slowly on mobile devices.

The solution for responsive web design is to use the “srcset” attribute in your <img> or <picture> tag. This attribute allows you to provide multiple photos and define which version should be displayed on various screen sizes.

You can use this attribute for two purposes:

1. to deliver a lower resolution image when higher resolution photos aren’t necessary (for mobile devices); and
2. to deliver images that are cropped for different mobile and desktop designs (called art direction)

Using the srcset attribute ensures that users will still see high-quality images across your site without compromising page loading speeds.

To test this responsive design function out, you can use Google’s Mobile-Friendly test or Page Speed Insights.

SVGs or scalable vector graphics are also useful for responsive web design. For graphics, logos, and animations, using SVGs allow you to easily scale these high-resolution, light-weight graphics up and down to best suit the viewing environment across different devices.

Responsive Text

Last but certainly not least is your text. Your website copy seals the deal when it comes to turning website visitors into customers. While a lot of information is communicated visually, you should never ignore written content as a valuable communication tool.

A general rule of thumb is that 16px is the smallest font size you should use on a website for readability purposes. But you shouldn’t stop there — your text should adapt to different screen sizes to ensure mobile users are afforded the same calibre viewing experience as desktop users.

The best way to do achieve a consistent mobile experience is to use relative units for your fonts. There are two relative units that are specifically used with text: EM and REM.

EM units are relative units based on the font size of the parent element. So 1EM is equivalent to the parent element’s font size. Using this unit, you can scale the font up or down according to your needs between the desktop layout and small screens alike.

REM units are similar to EM, but instead of being based on the parent element, they are based on the HTML. Deciding between EM and REM is really a matter of preference as both are responsive.

The advantage of these relative units is that they adapt based on a user’s desktop settings. People can change the font size that they want to see in their browsers, and with EM and REM units your website text will adapt to these changes.

This is important for accessibility purposes since some website visitors may have visual impairments making it difficult to read content on the mobile version of your site. Using responsive text sizing (as opposed to setting font sizes with px unit), your audience will have control over font size and readability.

This concept, applied to responsive design as a whole is becoming known more affectionately as component-driven design. This new design theory relies on the core responsive design best practices to push accessibility and personalization forward as our responsive website capabilities evolve.

Responsive Web Design Best Practices for 2022

In an ever-changing digital space, it’s important to stay up to date on contemporary best practices. With the basic building blocks of responsive design theory in your toolbox, putting the following best practices in action will ensure you address usability concerns for all users.

A Mobile-First Approach or Mobile Mindset

Lately, everyone is talking about a mobile-first approach to design. But why? And what does it have to do with responsive web design?

The answer is pretty simple. Because mobile screens are smaller, designing for mobile-first means that you will prioritize the most important elements. It helps you approach design with a minimalist mindset, which means you won’t water down your most essential information by adding unnecessary content.

Personally, I still prefer working from the desktop environment down to mobile. It may just be the way I’m wired, but simplifying the desktop view for mobile is much simpler than working up from the smaller viewport and having loads of empty space to deal with.

I think working in the desktop environment first limits the opportunity for oversight that can lead to unnecessary design revisions later on in the creative process.

Whether you prefer the mobile-first approach or are able to work with a mobile mindset it’s important to understand how the website and content will scale between environments as you work throughout the design process.

The best way to sandbox ideas and develop a responsive design strategy is with a wireframing exercise to establish UX design before considering high fidelity mockups.

Responsive Websites Prioritize Function

The reality is that your responsive website is not going to look exactly the same across all devices. And while you should make your site look as cohesive as possible across devices, don’t do so at the expense of website function.

What do I mean by this? Well, your multiple-column layout probably looks great on a desktop, but on a mobile device, it will need to stack the columns on top of each other in a single-column layout to make the content accessible and readable. There isn’t always enough screen real estate to deliver the same design between larger screens and mobile viewports.

This means sacrificing a bit of cohesion because website visitors will experience a slightly different design across devices. In return, you offer a superior user experience for mobile traffic and still achieve a consistent experience across devices by using consistent branding.

Your design for smaller devices should focus on the user experience. Consider the small details, like making buttons big enough to touch, which can make a big difference in the impact of your responsive site.

Use Three or More Breakpoints

Another responsive design best practice for 2022 is to use at least three breakpoints to ensure that your website loads reasonably well across the basic device spectrum — desktop, tablet and mobile.

Many web developers will look to standard device sizes and use those for their breakpoints. We always recommend choosing breakpoints based on your design and devices your audience regularly uses. Doing some analytics research prior to designing a new responsive website is important to understand the technology and devices your target audience is using to consume content. This allows you to tailor your website specifically to your audience — not just general breakpoints.

Devices are constantly changing and evolving. The “standard” phone screen size now will likely not be standard in a year or two and you want your responsive website to have enough longevity to cash in on your initial investment.

Even within one device type, there is a wide spectrum of screen sizes and resolutions available today. It is important to think of responsive design on a sliding scale of device sizes, not set points.

Optimize Images for Different Breakpoints

People expect to see crisp, clear images on a responsive website no matter which device they use, but they also expect your website to load quickly. To meet both of these expectations we must provide the smallest resolution image that still looks sharp and crisp at each breakpoint.

We touched on the srcset attribute to add images earlier, but it in some cases it may be unnecessary to create so many different image sizes. Fortunately, there are tools like Responsive Breakpoints that will generate the optimal responsive sizes for you if you’re not a Photoshop wizard.

Formatting images to look great on every viewport can sometimes create challenging situations where what you see on desktop, may not work so well on mobile. A creative way to solve this challenge is to crop your images in a different way, or even use a different image altogether that best suits the environment it’s designed for. For example, you may zoom in to the primary focus of an image on mobile, while on the desktop viewport you can show the entire image.

Make Navigation Scalable

Your navigation is one of the most important parts of your site. If visitors don’t find what they are looking for quickly, they will look elsewhere. This can lead to a high bounce rate and low conversion rate, neither of which is ideal.

To avoid this, prioritize simple, scalable navigation in your design in such a way that it will function well on all device types. Make it easy to find, easy to access, and easy to click or tap on the buttons (meaning they need to be large enough for someone to touch on mobile).

For more help on designing a frictionless navigation system, check out our article on navigation design best practices, so check it out if you need help designing responsive navigation.

Pay Attention to Page Speed

Perhaps the best responsive web design advice I can give you is to pay attention to page speed. When designing and developing websites for an array of devices, it’s important to ensure that the code is optimized, content and imagery is all well-optimized.

Why is page speed so important?

• A study of the effect of page load time on bounce rate showed that when a page took 2 seconds to load, visitors viewed 9.6 web pages, compared to only 3.3 pages viewed for an 8-second page load.
• 75% of users won’t return to a page that takes more than 4 seconds to load.
• A faster website loading time leads to a higher conversion rate.
• 53% of users will leave a page if a responsive website takes more than 3 seconds to load.

Additionally, page load speed has an impact on SEO performance as well. Page speed impacts user experience and bounce rate, which Google pays close attention to. If people are only spending a few seconds on your site, Google will notice and stop sending visitors your way.

All of this is to say that you should pay close attention to speed on the mobile and desktop versions of your site (as well as all of the screen sizes in between). A great way to optimize your site for speed is to use Google Pagespeed insights or more neutral tools like GT Metrix and Web Page Test.

Test for Responsiveness

You should test the responsiveness of your site periodically to ensure it looks and functions great on all device types. You can use the developer tools in your browser to choose different device types and check how your site appears on each if you don’t have physical devices to test your website with.

You can also use tools like the Google Mobile-Friendly Test to test the mobile-friendliness of your site according to Google’s parameters. By testing your design, you can ensure that it works well no matter the screen size it’s loaded on.

Minimize Text

People don’t want to see long pages of text when they land on your website, and these instances are especially problematic on mobile. Refine your content to clearly convey your messaging and only focus on what is necessary to optimize conversions.

For articles or long-form content pages that are necessary, design your page layouts to break up large passages of text into shorter sections and paragraphs. An effective way to do this is to break up information with relevant images, callouts like testimonials or calls to action. You can also design your user interface to allow for greater white space around text blocks to make the information on your site feel less overwhelming to visitors, especially those viewing on cell phones.

Hire a Web Designer for Responsive Web Design

The best way to get a truly responsive site is to hire a professional web designer or developer. The top-performing websites out there are definitely not do-it-yourself projects. They’ve been carefully planned, designed and developed for responsiveness and speed.

There are many nuances that you have to think about when designing a responsive website (ever heard of designing for the thumb zone?), especially if you want it to wow your visitors across all of today’s devices.

Professional website designers have the experience and creativity to handle all of the challenges that responsive or adaptive design can throw at you. Passing the work off to an expert, you can ensure that your site is fast, responsive, and effective at converting website traffic into profits.

And if you need help designing and developing a responsive site, we can help. We build hand-crafted sites that are tailored to your unique needs and have been doing just that since 2003. Contact us for a quote, and let’s discuss how we can help grow your business!