By now I’m sure you’ve heard it a million times: your business must be mobile-friendly or risk losing out on half of your revenue potential.

In fact, for an increasing number of people, mobile is the only screen and often the ‘go-to’ device for the Web. According to Gartner, “By 2018, more than 50% of users will use a tablet or smartphone first for all online activities.”

So we want to state out loud:

Today, if your business is not mobile, it simply does not exist. Period.

With today’s consumers constantly-connected on a wide array of devices and screen sizes, savvy businesses know that it’s absolutely essential to have a mobile-friendly or, more precisely, a multi-screen website if they want to reach consumers in all the moments that matter.

Like we explained in greater details in our previous posts, responsive websites are sites that have been carefully designed and coded to automatically adapt to fit the screen that they are being viewed on, be it a desktop, laptop, tablet or smartphone.

To help you in your strategic thinking, mOOnshot digital compiled below the 5 essential best practices to build a successful responsive website for the multi-screen consumer.

Building a website for multiple devices starts with understanding your audience and mapping your customers’ journey.

Using web analytics (like Google Analytics), identify your website goals, your source of traffic, your visitors’ actions on the site and their various behaviors. This insightful information will enable you to define the most needed functionalities for your website. For example, retailers may need to emphasize on their store locators and product search.

Your multi-screen strategy should answer the needs of both your customers and your business.

2. Responsive Content

When designing a responsive website, it’s important to think about your content before your design, this way you are more likely to give your audience what they need and desire. It’s about telling your story in a way that’s valuable to your visitors in the multi-screen context in which they are interacting with your website.

They want to easily get to the information or functionality they need, on whatever device they happen to be. Don’t expect your visitors to scroll endlessly to discover the content of interest.
Simple structure and content prioritisation are thus key aspects to a successful responsive website.

• Be concise and clear; hint and hook. Make your content easily scannable and “snackable” by using short sentences, clear sub-headings and bullet points.
• If you want your message to be heard, you need to successfully craft key messages that answer their informational needs at the top level, but allows further details to be found as they navigate down the page or onto additional pages.
• Remember, mobile users expect the same core functionalities you offer desktop users.
• Ensure your calls to action aren’t lost at the bottom of the page by adding some logical breaks further up the page to reinforce and encourage these actions.

3. Mobile First Design

With mobile fast becoming the primary mode of Internet access, mobile users should no longer be considered as a secondary audience. Businesses need to think mobile-first and plan the website layout with mobile users in mind.

Simplicity and focal point are key for mobile first design. We have highlighted below the core features to designing responsively:

• Touch-friendly buttons: Make sure buttons and links are large enough to tap with a thumb and placed far enough apart so that the correct button can be easily tapped.
• Thumb-friendly navigation: The site should be easy to navigate vertically with the swipe of a thumb. Make sure users are not forced to scroll horizontally to see the entire content as it makes for a bad user experience. Opting for a sticky menu (meaning the navigation bar stays at the top of the page when people scroll down) is also worth considering. If your website has a complex, multi-level navigation, take some time to think of the best way to prioritise and structure your menu for your visitors to intuitively reach their destination. We recommend that you use the data from the Users Flow report in Google Analytics to reveal your most popular pages and understand how traffic flows around your site.
• Clean typeface and viewer-friendly font size: Make your text easy to read without needing to pinch and zoom-in on the screen.
• Click-to-call button: Make contact easily accessible, especially at drop-off points on the customer conversion journey.
• Avoid mouse-overs: On a desktop screen, mouse-overs might be a great way to uncover hidden content but hover effects do not work on mobile devices. Instead, opt for buttons that users can tap to display deeper menus.
• Descriptive buttons: Label your buttons clearly so that customers know exactly where a click will take them.
• No pop-ups: Pop-ups can be very irritating, especially on mobile sites.
• Finger-friendly forms: Keep forms simple; break forms down into simple steps and use a minimum number of input fields that customers can easily fill out without having to pinch and zoom.

4. Need for Speed

Smartphone users are impatient. They want and expect information to load quickly. No matter how cool your website is, if it doesn’t load fast enough, visitors (and thus potential customers) will leave without a second thought. According to a research by Google, 61% of mobile users will quickly move onto another site if they have a bad mobile experience. And a slow loading page sure is a major frustration!
With Google striving to always offer the best user experience on all devices, page speed is also an important ranking factor on mobile search queries. Plus, optimised speed typically boosts visitors’ engagement, retention and conversion.

We recommend that you run your website through the Google PageSpeed Insights Tool to get some recommendations on how to optimise your site’s speed.

You can also visit Google’s “Make the Web Faster” page for more resources to help you improve your site’s performance.

One of the easiest ways to decrease the size of your web pages and minimize loading times is to avoid using heavy images.

2 Tips to Properly Optimise your Images:

• When exporting your images from Photoshop or Illustrator, choose the option “Save for Web”;
• Then run your images through an image optimiser such as Shrink O’Matic, which is great for reducing the file size even further.

5. Test, Refine, Repeat

Last but not least, keep testing, analyzing and optimising your site to debug any issues that might occur and best meet the ever evolving user viewing habits.

Multi-screen consumers call for a new approach to designing websites. That requires a shift in mindset, from barely implementing a website that also works on mobiles to an essential element of your marketing strategies which fundamentally encompasses the unique needs of mobile users.

If you haven’t done it yet, now is the time to plan your multi-screen strategy and build a responsive website that not only offers a seamless user experience across all screens but also enables you to connect with your audience in a much deeper way than ever before.
Contact our team at mOOnshot digital if you need help building your new successful responsive website for the multi-screen consumer.