Subscribe to THE LATEST

7 Responsive Design Best Practices You Need To Know in 2017

Danny Lopez

  • Connect:
7 Responsive Design Best Practices You Need To Know in 2017 Blog Feature

Published on February 3rd, 2017

Print this Page/Save it as a PDF

It’s 2017 and the dependency on our phones has been growing at a steady pace, and no one can ignore it.

95% of Americans now own a cellphone of some kind, with 77% of those cell phones being smartphones. What’s the result of all this increase?

More and more people are now 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.

As of October 2016, 42% of Americans primarily use their mobile and tablet to access the internet with that number trending to surpass desktop internet usage within the year. This is HUGE.

Mobile user experience can no longer be ignored, and the responsive design paradigm is what’s going to get you there.

These must-know responsive design best practices will help you make sure that your websites have top-level experiences across all devices in 2017.

1. Minimize and Mobilize

Constrained by the device sizes, mobile doesn’t always offer the most real estate to work with when it comes to content.  So, don’t be afraid to remove things on mobile experiences that exist on your desktop big brother.

You could just shrink down what you have, cramming, everything from the desktop site into the mobile version, but then you’d have a super long page that just goes on, and on, and on…bleh; no thanks. That’s a bounce waiting to happen right there.

What you need to do is consider the mobile version of your site as it’s own stand-alone website.

You should cater the content that appears on the mobile experience, for the mobile experience, which can mean dropping things from the desktop that don’t make sense.

Pay attention to your audience’s mobile behaviors and make enabling those the focus of your mobile design. This can literally mean entirely rewording or deleting chunks of the page’s content for the mobile version.

That may sound scary, but with tools like HubSpot, Google Analytics, and Hotjar, you can really get a definitive handle on what your mobile viewer is doing and adjust accordingly.

Example: Etsy

Minimize-and-mobilize.png

How they do it well: Being in the eCommerce world, Etsy is a very large site, and has a ton of information to offer right off the bat on the homepage.

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

As they move down to mobile, only the key information for the user experience to remain intact stays, and unnecessary text and images get the cut. This results in a lean mobile experience that still provides the user everything they need. 

2. Prioritize and Hide Content Appropriately

There are times where removing content on the mobile experience is just not possible.

Say you’ve determined that all of the information you have is absolutely pertinent to your viewer regardless of device. What now?

You still want to keep the site pleasant to use, without making it seem super long and drab, so prioritize and hide some of the content that people won’t be looking for on mobile.

Pull the most important things to mobile users to the top. That way, they’ll have likely seen the most important thing you are trying to show or tell them.

You can also hide content behind tappable areas.

For example, instead of showing an entire section with its body text, you can show just the title, with a little supporting graphic that we can them make interactive/clickable.

When this is clicked the full body text can appear, in either an overlay or with some sort of interesting animation. This can help shorten what would otherwise be an intensely long page, and with proper visual design be a very engaging experience for the viewer.

Example: HubSpot

Prioritize-And-Hide.png

How they do it well: HubSpot’s main navigation has a lot of information for the user. Navigational links, search bars, contact links, calls-to-action, and more.

If we were to just bring all of this content onto a mobile site as-is, it would take up the entire screen on any phone.

Fortunately, HubSpot brilliantly designed their mobile menu to contain all of the information from the desktop site without creating clutter. It’s well organized and hidden behind the button known as the “hamburger.”

This results in the sleek and user-friendly experience that most come to expect from interactions on their smartphones in 2017. 

3. Use Scalable Vector Graphics (SVGs)

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

What this means is that you can rest easy knowing that any icon or graphic will remain ultra-sharp across all experiences without having to ever worry about resolution.

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

Furthermore, SVGs are often a far smaller file size than their image cousins, so they can save your site some load time, which on a mobile experience can mean the difference between someone sticking around or leaving.

Image Source: Stack Overflow

Use-SVGs.png


4. Standardize Clickable Areas/Buttons

On mobile, buttons and links will be tapped by a human finger, not by a precise mouse click.

That being said, we have to take into consideration that buttons and links need to have larger interactive areas to accommodate this difference.

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

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

Example: Easymeeting

Standard-Clickable-Areas.png

How they do it well: Easymeeting's (A client of ours here at IMPACT) homepage features both a bottom of the funnel CTA and a help button that follows the user down the page.

Both of these follow this best practice making them very easy to accurately click, no matter what finger you choose to tap them with. No finicky double-clicking here.

5. Responsive Imagery

Different devices have different needs.

A desktop page may need an image at 1200px wide for 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 will be shrunk down to 400px once loaded.

Compound this on a page 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.

Source: My Awesome Photoshop Skills

Responsive-Image-Graphic.png

6. Think Typography

It’s important to consider the legibility of a site across all platforms and devices, but on mobile, it’s especially important.

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

You want to make sure the content is easy to read and truly optimized for the device size so readers can actually read and digest your message.

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.

Balance the headings and body font sizes for the size of the device.

A good rule of thumb on mobile is to strive for around 60-75 characters per line of body copy for optimal legibility, to maintain visual hierarchy when determining your headers.

Example: The IMPACT Blog

Think-Typography.png

How they do it well: I know, I know...a little unorthodox to include ourselves in here as an example, but I appreciate how well of a job our design team did on the blog when considering typography.

The headings create great hierarchy on pages where text reigns. You never feel any confusion when reading the blog main page, or even inside an article.

The body font size is also perfect, falling right inside the 50-60 character window on modern device screen sizes. All this adds up to a very engaging experience.

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 so 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 and auto-fill that email as the recipient, when clicked.

Social media icons can also be coded in such a way that when clicked if installed on that person’s phone, it will open directly in the app as opposed to a mobile browser.

All of this can add tremendous depth to your website on mobile, and ultimately make it easier for your visitors to connect and communicate with you.

Example: United Methodist Homes

Take-Advantage-Of-Device-Features.png

How they do it well: Sometimes it just feels good to call and speak to someone right off the bat when you want to get information. UMH (also 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 prompt you to ask if it’s ok to call that number. Accept, and the device starts a call automatically. No fiddling with a pen and paper, or trying to remember the number to dial it in. Awesome.

Wrapping Things Up

I know this is a lot to take in, and it sounds like a bunch of technical mumbo jumbo, but in 2017 and going forward, all of this is more mandatory if you want to compete.

There are a lot of other responsive design best practices beyond the ones I’ve shared here, but these are some of the biggest hot-button topics for the year.

By auditing based on these responsive design best practices, you’ll be able to determine if your site is truly fit for the modern 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.

Know other responsive design best practices that are must-haves for 2017? Let me know in the comments!

Optimize Your Entire Mobile Experience Free Webinar
Recent articles

Want to Contribute Content to impactbnd.com? Click Here.