What you need to know about responsive design and mobile engagement

by | Sep 8, 2020

If you’re not optimized for mobile, then you could be alienating the very life-blood of your business, your customers.

According to Google, more searches take place on mobile devices than on computers across 10 countries, including the U.S .and China. More than 5 billion people in the world now own mobile devices.

More people are searching, exploring, and buying with mobile devices and that number will continue to grow. Your customers want access to content when, where, and with whatever device they choose.

Which means you’ll need to adopt a mobile-first mindset. Google has recommended responsive design as the best option for engaging mobile users. Responsive design is an approach that allows a website to fluidly adjust to any size screen or device with one set of code.

Since the “Mobilegeddon” of April 21, 2015, when Google updated its algorithms, websites that are mobile-friendly will appear higher on Google search results. So if you’re not mobile-friendly, expect your rankings to plummet. And aside from search, if your mobile experience is poorly designed, calls to action (CTAs) and messaging can quickly become lost for mobile users, creating abandonment and conversion issues.

To get the most engagement from today’s mobile users, here are some best practices to follow:

1. Know your worlds

Until recently we have lived in a desktop + mouse + keyboard world. Today, you must think mobile-first which is an on-the-go + touch + small-screen world. By starting with the most constrained form factor, such as the relatively small screen of a smartphone, it quickly becomes clear that you will need to make choices about prioritizing content, messaging, and the CTAs that are of the most value to your users.

Making the decisions about what content stays and what goes can be difficult for organizations that are used to serving up all of their information instead of focusing on only the content their users want. As you begin to think mobile-first, you may have to reconsider what user engagement means for your business. This means getting to the core of what you want your users, especially those on mobile devices, to do.

2. Target your visuals

When using images, you must consider how they support your content and overall brand message. Are you using images to enhance the user experience and drive an action? Or are you simply decorating the experience? You must be deliberate with art direction and avoid images with text, or at least consider if the text will be readable when scaled down to a mobile device.

In some instances, images will need to be cropped as opposed to simply scaled down. This may be the case for images with proportions that don’t work best in a mobile context, such as images that are taller rather than wider. You have to ask yourself, “If this image is cropped, will it still retain its overall meaning?”

3. Mobilize content authoring and governance

When creating new content for your website, you must keep the constrained form of mobile devices top-of-mind at all times:

  • Think about the length of headlines
  • Think about instructional content
  • Think about duplicate or extraneous content

Headlines should be concise so they’re easy to scan and don’t push the core content out of view. Content that directs users to click or print will be perceived differently in a touch-and-tap mobile world. And finally, consider eliminating content that is not core to your user’s goals.

As with brand standards and writing guidelines, you’ll need to ensure that your content governance is also optimized for mobile. You should be able to answer how your brand message will be determined and prioritized for both mobile and desktop presentations (if different at all), and by whom? And what should your photo strategy be for mobile?

4. Forget the fold, move your CTAs

Because mobile devices have small, diverse screen sizes, it is simply not possible to define a “fold.” From way back in newspaper days, keeping content “above the fold” was believed to increase the likelihood of reader/user engagement.

While once true, the fold now has virtually no meaning, especially in mobile. Effective design techniques should encourage scrolling and ensure that CTAs are placed where users are prepared to act on them. By providing visual cues along the user path, you can move the user down their screen view, eliminating the need to specifically place high-value content in relationship to a fold.

5. Mind your interactions

As the world adopts more devices that use touch screen technology, traditional interactions, such as mouse-overs and tooltips, no longer make sense when there isn’t a mouse. Different usability and engagement strategies are needed. For instance, if you are using a hover event on desktop to reveal an additional level of detail to the user, you might also choose an alternative interaction. such as a swipe for touch-based users to access that same information for mobile.

6. Looking different is OK

With responsive design, your website doesn’t need to look the same in all browsers or devices. Avoid designs that force layout attributes, such as specific positioning or word wrapping, because doing so is futile.

As soon as you have an element positioned for one browser and device, it will be off in the next, requiring endless tweaks. Designed right, with mobile foremost in mind, things like button placement or column alignment will be fluid in relation to the other elements on the page.

7. Know what users want and test it

With the vast number of devices on the market, you can’t test for every possible device. Instead, you must strategically select a subset of devices that are representative of your users’ preferences. (You can determine what those are from your website’s analytics data.) When testing, focus on evaluating whether it’s possible for a user to complete a task, as opposed to looking for parity of layout across devices. It’s critically important to uncover any barriers to engagement.

8. Scale performance, it’s a killer

If you’re getting minimal traffic to your website, users are abandoning it, or you don’t have the conversion rates you hoped for, then you might have a performance issue. Often, page load times are the killer of user engagement and, on mobile, these issues are magnified.

According to industry research, 47% of consumers expect a web page to load in two seconds or less. Large images, web fonts, carousels, social tools, and third-party services can all affect page load times and overall website performance.

And while focusing on small technical performance improvements is important, real performance improvements come from removing unnecessary content so that visitors can complete the action they came to do.

9. Collaborate, collaborate, collaborate

Lastly, for a responsive design project to be successful, it will require the collaboration of many departments within your organization, not just your design and development teams. Solely relying on IT to implement a responsive design project is a mistake.

Content marketing, design, and UX will need to make the difficult decisions on messaging, content, and engagement strategies. Along with IT, these folks will be key stakeholders in your responsive and mobile engagement effort.

If you need help with your project or want to talk more, let us know.

About the author

Doug Scamahorn
Solution Director, UX Design

Related articles

Why choosing the right CMS matters

Why choosing the right CMS matters

The right CMS can have a big impact on your team’s efficiency. Learn about how to select and implement the right platform for your business.

Ready to talk?

Let us know how we can help you out, and one of our experts will be in touch right away.

Share This