7 responsive design best practices you need to know in 2020

In 2020, the number of global smartphone users is projected to total 3.5 billion, marking a 9.3% increase from 2019.

96% of Americans now own a cellphone of some kind, with 81% of those cell phones being smartphones. 

More and more, people are browsing the web on their phones out of convenience as opposed to sitting down at their desktop or laptop computer — and there’s data to back it up.

In the third quarter of 2019, mobile devices (excluding tablets) generated 51.5% of global website traffic. This is huge.

Most of us are already mobile-optimizing our websites, but that doesn't necessarily mean what you have is meeting your users' needs. 

To make sure your website is up to standards, here are the seven must-know responsive design best practices that will help you make sure your websites offer top-level experiences across all devices in 2020!

1. Minimize and prioritize

Constrained by size, mobile devices simply don’t offer the most real estate to work with when it comes to content and imagery. 

When you think of a desktop website page, there is a natural desire to break down the information we need to display into ‘sections’. Think of these sections as paragraphs in a news article. This way you're easily able to break down and read each part of the page without confusion. 

Using Slack as an example, I outlined the different sections of their homepage they have to illustrate what this looks like.

These sections really allow the content to breath nicely on desktop, but on mobile, you need to make sure these sections are re-organized in a way that doesn’t overly increase the length of the page. 

In situations where you have smaller sections next to one another, like in Wistia’s homepage down below, you can shift the four blocks stacked on top of one another.

 Source: Wista

This technique works well for less interactive or detailed sections like this. But what if this section has 15 blocks, or specific interactions that only happen when you hover?

If you tried to scale it down like the previous example, the page will be significantly longer and those ‘hover’ effects won’t work anymore (since you’re not exactly using a mouse to navigate on your phone). 

It’s situations like these that have pushed people to approach their website with a mobile-first mindset. This means that you put your mobile users’ needs first and foremost.

You're not creating a desktop website and removing functionality that makes the site less intuitive on mobile. You first strategize what the best experience is on mobile, then adapt it to a desktop layout where you can figure out if you want to enhance the experience because you have advantages with space.

Although this is the ideal scenario, you may not be in a position to do a full website redesign and follow this approach. In the meantime, try to offer the best experience you can by optimizing what desktop to mobile is like. 

Review some of your most important or top-performing pages — this could be your home page, service pages, or product pages. Then, compare their performance on mobile and desktop (using tools like Google Analytics); look at time on page, heatmaps for scrolling and tapping, conversion rates, etc. This will help give some benchmark data to how they currently perform.

Then, take some time to review the pages you selected and try answering yes or no to help evaluate whether or not there may be a little TLC needed: 

• Are certain sections taking up more than four times the space they did on desktop?
• Do certain interactions not work as well on mobile as they do on desktop?
• Are font sizes hard to read on mobile? Do you find yourself squinting?
• According to your heatmaps, are users scrolling the same or similar distances when compared to desktop? 
• Are users getting stuck somewhere, causing their time on page to be significantly lower?

Once you identify your problem areas, you can then begin to come up with solutions. Should you hide certain sections? Do sections need to be shortened to fit better on mobile screens? Are there other ways you can arrange sections so they still accomplish the same goal? 

To brainstorm specific solutions, work with your designer to dig into these questions to help set you onto the right path to revamping your site's mobile layout. 

Once you strategize what you need to do, you can develop these solutions on some of the most popular sections of your site. This gives you the opportunity to test whether or not they improve your metrics.

Once you feel you have sufficient data, you can implement those solutions across as many areas of your site as you can.

Who’s doing this well: ESPN

Since ESPN is a sports news website, the site has a ton of information to offer on the homepage. 

On the desktop site, there’s room for this embellishment, but on the mobile site, not so much.

On mobile (on the right, above), you’ll notice the center desktop section is the first thing you’ll see. The four videos below the main headline are now a part of a slider, rather than being stacked on top of one another.

Those ‘quick links’ to other parts of the site that are on the left column are no longer visible. And they’ve chosen to consolidate certain sections to make the page shorter.  

As you scroll down, you’ll notice they start to arrange information in a more specific order based on what users are likely to want. For example, below the videos they insert the list of top stories, rather than going right into the larger blocks of featured articles.

It’s tactics like this that will help you organize your mobile hierarchy strategically so you give your users the most valuable information first.   

2. Make your bottom of the funnel call-to-action (CTA) easy to find

Your business website likely has a particular main call-to-action you want your users to complete. Maybe it’s to purchase a piece of software, schedule a consultation, or sign up for your app. 

To drive people to complete this goal, you likely have a main call-to-action featured in your navigation and throughout your site, especially on desktop. 

If you're tracking your CTAs, you’ll probably notice your navigation button is one of the primary ways people make it to that gateway page where they would convert. So naturally, it’s pretty critical to have that button there at all times.

One of the opportunities people overlook is making sure that their main CTA is clear and easy to find on mobile. Let’s take a look at Brightedge for example.

Brightedge has a really awesome website that very clearly articulates what their product does and the value it offers to its users. On closer inspection of their website on mobile, though, notice how their large ‘request demo’ CTA is no longer in the navigation. 

I’d recommend being careful about removing your navigation CTA on mobile. Doing this naturally makes it that much harder for your mobile visitors to find that page.

I recommend keeping it consistent on mobile and making room for it. If you absolutely can’t, then you should at least try to get that button into the hamburger navigation and get it as visible within the screen as possible without the need to scroll.

That way, the button is still a frequently visited area of your site.

Who’s doing this well: Salesforce

Salesforce keeps its ‘try for free’ button in the navigation bar throughout all devices, but only changes its position and color. 

They also have two additional CTAs at the bottom of the screen to either call them or chat with them. 

But if you're a business who doesn't need those ‘chat’ and ‘call’ CTAs, but needs a way to promote your site's main CTA (because you can’t fit it in the navigation area), you could implement a similar bottom bar layout where you instead place that main CTA.

I also have to give Salesforce bonus points for the CTA’s interaction. Rather than taking visitors to a separate page with a form (which it does on desktop), the form slides out from the right side of the screen on mobile, similar to a hello bar, keeping visitors on the page. 

This is beneficial because the user isn't forced to wait for an entirely separate page to load, which on mobile, can be problematic due to bandwidth or internet speed. It simply helps the user complete the desired action faster. 

3. Use scalable vector graphics (SVGs)

SVGs or Scalable Vector Graphics are a must-have for any responsive design that is utilizing illustrations or icons. Unlike image files (JPG/PNG), SVGs are infinitely scalable.

You can rest easy knowing that any icon or graphic will remain ultra-sharp across all experiences without having to ever worry about resolution or pixelation.

This results in a consistently polished look no matter how the site is being viewed.

Furthermore, SVGs often have a smaller file size, which helps your site load faster. Nobody wants to sit on their phone and watch an image buffer because of how large it is. 

(SVG on the left, PNG on the right)

To clarify, this file type is not an option for normal photography, it's only available for computer-generated graphics.

Who’s doing this well: HubSpot

HubSpot’s site relies on intricate illustrations on almost every page. 

If these were saved as PNGs, they could easily be five times the size due to the amount of detail, the number of colors being used, and the large dimensions necessary. 

Best of all, these images look crisp, regardless if you are viewing them on desktop or mobile.

4. Standardize clickable areas and buttons

On mobile, buttons and links will be tapped by a human finger, not by a precise mouse click — so interactive areas need to have larger area to accommodate this difference.

How large do they need to be? Well, that’s dependent on the user, but on average, it’s recommended that any clickable element on a mobile device be at least 48 pixels in height.

This means you need to optimize for buttons, form inputs, inline links on blogs, card layouts, navigation links and more. 

You’ll probably find that its hardest to abide by this rule on inline links, such as ones in blog articles. If you find your users struggling to tap on links, you could try this technique that increases the clickable area surrounding them (Note: This solution does need a developer to help out).

This will help ensure that there are fewer errors in navigation through your website, in turn minimizing potential frustration, and keeping the viewer engaged.

Who’s doing this well: Vidyard

Vidyard does an excellent job keeping any important clickable areas large enough so your thumbs aren’t fumbling around. 

In the images, you’ll notice Vidyard actually increases the size of its two buttons in the hero section, rather than keeping them the same size. The three blocks right below the hero are also fully clickable, as opposed to only making the different color text with the arrow clickable. 

Similar purposeful elements like this are applied throughout most of the site, making it easy to navigate around.

5. Responsive imagery

Different devices have different image size needs.

A desktop page may need an image 1200px wide at full resolution, while the mobile version of that page may only need that image at 400px wide.

That’s effectively a third of the physical size, which roughly translates to a third of the file size as well. That’s an important thing to keep in mind.

The old way of doing things was to load the large resolution (1200px) image, and then just use that same file across all device platforms — but these large files can slow your site load time down dramatically.

For an optimal responsive experience, it’s best to use two different versions of the same image for mobile and desktop.

For example, on mobile, we’re only using (or “calling up”) the 400px image we need, rather than the large 1200px image, which would be shrunk down to 400px once loaded.

Compound this on a page with several images and you can end up with a noticeably faster loading experience, especially if the mobile site is being loaded on cell service and not wifi.

There are some pretty in-depth articles that go over how to accomplish this so you can designate the image you want to show at particular screen sizes.

If you’re using website pages with HubSpot to build your site, you’re in luck! HubSpot actually enables automatic image resizing on content by default. 

Who’s doing this well: Adobe

Unlike other examples, the visual for this one is going to be a little more code-focused so you can see an example of what this technique looks like. 

Below is the code used to produce an image on Adobe’s website. You’ll notice there are several ‘.jpg’ files separated onto different lines.

Each of these JPGs represents an image two show at different screen sizes; you can tell by the ‘media’ tag that's associated with each ‘source’ object. 

The result is that different size images will show at different specified device dimensions. Depending on your web page, you may find you need more or fewer image variations.

6. Think typography

It’s important to consider the legibility of your site across all platforms and devices, but on mobile, you need to be much more attentive to your users' readability needs. 

If people can’t read your value proposition or any of your content, for that matter, they most likely won’t stick around.

You want to make sure the content is easy to read and truly optimized for the device size so visitors aren’t left squinting. 

This also means taking note of the typefaces you’d like to use on your site, and whether they’d make for good or bad legibility on small screens.

Remember to balance the headings and body font sizes for the size of the device too. You don’t want your font sizes to feel drastically different from one another to the point where it feels awkward and unnatural to read.

I’ve also written a whole blog article on how to discover the right font sizes for desktop and mobile that I recommend diving into to help get more specific to font sizing rules.

Who’s doing this well: IMPACT

I know, I know...a little unorthodox to include ourselves in here as an example, but we’re constantly testing and tweaking our font sizes based on what we’re hearing from our visitors, so I simply couldn’t help it! 

The headings create a great hierarchy on pages where text reigns. On the blog listing page, the top level hierarchy is given to the blog titles so visitors are able to quickly skim them as they look for what to read.  

The inner articles also have font sizes that are large enough to fit a decent amount of content in view while still being readable.

While we could have made the font size 14px to fit more content in view, a large portion of readers simply won’t be able to read the articles that clearly. The larger font and spacious line height also mean you aren’t struggling to find what line is next.

7. Take advantage of device features

On smartphones, you have the ability to do a variety of diverse tasks. You can make calls, send messages, and open apps — all directly from the browser.

Take advantage of these capabilities on your website to not only enhance your mobile experience for users but even increase conversions and encourage action.

For example, while on a desktop site, you may list the phone number. On the mobile version of that site, you may want to list the phone number inside a button or clickable area that it will automatically prompt a call when clicked.

This idea can also be applied to email addresses, opening a new message in an email app with an auto-filled recipient when clicked.

Social media icons can also be coded in such a way that, when clicked, they will open directly in the app as opposed to a mobile browser.

All of this can make it tremendously easier for your visitors to connect and communicate with you.

Who’s doing this well: United Methodist Homes

Sometimes it just feels good to call and speak to someone right off the bat when you want to get information. UMH (a client of ours) recognized this, and utilized mobile device features to bring this convenience to their mobile site.  

What they did was take their phone number, put it inside a clickable button, and placed it right under their navigation on mobile.

With the addition of a small amount of simple code, now when it's tapped on a mobile device, it will ask the user if it’s okay to call that number. Once accepted, the device starts a call automatically. No fiddling with a pen and paper, or trying to remember the number to dial it in.

Responsive design today

In 2020, all of this is mandatory if you want to have a well-optimized website for your users. It's possible that half of your website traffic is coming from mobile; it is not an option to alienate them by giving them a sub-par mobile experience.

By auditing your site with these responsive design best practices in mind, you’ll be able to determine if your site is truly fit for the modern, mobile-first age we live in, or if you need to make some changes.

Maybe a full redesign is in order to make your site a responsive superstar. Still not sure? Let’s talk! We’re happy to help you figure things out for this year and beyond.