How to optimize your website for mobile

Jessica Baldwin / Updated June 4, 2022

Mobile phones are now the primary way most people access the internet. Consumers with smartphones spend more time on their phones than desktop computers, and mobile internet use is only growing. If your website isn't mobile-friendly, you could be losing out on a lot of traffic and sales.

Why your website needs to be mobile-friendly

As of now, the world's most popular search engine, Google, prioritizes the mobile version of the content for indexing and ranking pages in their search results. 54% of worldwide web traffic happens on mobile devices. According to Google's research, 96% of U.S smartphone owners research products and services on their phones. When searching for local information, 90% of searches result in action taken by the searcher. 50% of people say they won't consider purchasing from brands with bad mobile design.

However, reviewing their site on mobile devices is often an afterthought for many site owners. The mobile visitor experience is often ignored because the owner views and edits their website on a desktop screen (while they are working at their computer). Owners don't realize that neglecting to design, layout, or prioritize information according to your visitors' experience only hurts the business. It's essential to regularly review your analytics to see how many people visit from desktop vs. tablet vs. phone and adjust accordingly - if most visits occur from phones, you need more focus on designing for those devices than others. We've seen many Cardsetter customer sites with over 70% of their traffic coming from mobile devices!

Below we'll explore a few tips on how to make your website mobile-friendly.

Mobile issues to avoid

First, let's look at a few common issues to avoid.

Website isn't responsive

The worst issue we see with websites is that they are not responsive. A "responsive" website detects the screen size it's being viewed on and adjusts its design and layout accordingly. If you have to pinch and expand your fingers to read text or see specific elements on your website, it is not responsive.

Inaccessible content

When a website isn't correctly configured for responsive design, certain elements can be impossible for the website visitor to access. Images or other elements may partially obstruct buttons, pop-ups won't exit, and other problems arise. These issues will make your website visitor bounce.

Scrolls horizontally when it shouldn't

Have you ever been on a mobile website where it feels like the entire site is "shiftable" from left to right? It won't stay in the proper margins of the screen; this can be confusing and frustrating for mobile site visitors. It's a sign that your website isn't configured correctly for mobile.

Too many pop-ups and distractions

Ads, newsletter pop-ups, chat bubbles, and videos overlayed on the content people want to read are incredibly frustrating for visitors. You've undoubtedly experienced this on recipe websites, news outlets, and some e-commerce sites. Don't do these things unless you're looking to annoy your website audience!

Slow load times

Visit your website from your mobile device and make sure that it loads quickly. Smartphone users won't wait around for a slow-loading website. You want to make the most of every click to your website. Ensuring a fast-loading site is the first step. 

Goals of a mobile-friendly website

Now that we've covered the mobile issues to avoid let's look at the goals of a mobile-friendly site. The goals for the mobile view of your website are not unlike the goals for the desktop view.

However, mobile users are notoriously impatient and have lower visitor session durations (they spend less time on websites). Therefore, capturing and keeping their attention, and helping them achieve their goal while on your site, is time-sensitive. 

Attractive

Your website must grab your visitor's attention with an attractive, professional design. Your goal is to encourage them to continue scrolling to gather more information about your business and your benefits to the reader. Your copy should quickly communicate your value proposition (how you can help the visitor) and call to action (how they become your client or customer).

Functional

Ensure that your website visitors can do what they came to your site to do. A functional website has well-organized information that's easy to find. Shopping carts, logins, forms, checkouts, and other features need to work just as seamlessly on the phone as they do on the desktop. 

Engaging

As mentioned above, mobile site visitors will typically spend less time on a website than their computer viewing counterparts. It's essential to engage your mobile visitors with quality content and a positive experience, so they stay on your website longer. The more time a prospect spends with your brand, the closer they move towards becoming your client or customer.

How to make your website mobile-friendly

You now have a list of issues to avoid, and we've covered the overarching goals to strive for with the mobile view of your website. So, now let's dig in on exactly how to make your website mobile-friendly. 

✓ Responsive + mobile-first design

When your website is "responsive," the content and layout adjust to whatever screen size the viewer is using. Often, however, site owners and web designers will still prioritize the desktop view and shrink the desktop version on mobile.

If your site has more mobile traffic than desktop, invert the priority so that your site is designed for the mobile phone and adjusted to the desktop. 

✓ Simple menus and navigation

Keep your menu simple and concise. Make important information easy to find. Menus with several levels of drop-downs can be frustrating for your mobile visitors.

✓ Scrolling > clicking

Social media has made smartphone users accustomed to endlessly scrolling through content. Consider how this user behavior may benefit your website. Organize your content in a way that lets them scroll through key information rather than requiring them to visit the menu to get to it.

✓ Simple design

Again, mobile users have shorter session durations, and you have less time to capture their attention. Therefore, it can be advantageous to have an attractive but simple design. Complex animations, slow videos, and intricate design elements can slow down your site and distract the mobile visitor from what's most important.

✓ Make important info easy to find

While desktop visitors are inclined to poke around the menu and scroll through pages to look for information, mobile users have less patience. Design and organize your homepage, menu, and footer to help your visitors quickly get to desireable info.

✓ Clickable phone number, email address, directions

Phone numbers and email addresses should be clickable so your visitors can quickly contact you. If your business has a physical location where customers or clients visit you, consider adding a link for directions. Give your mobile visitors ultimate convenience.

✓ Choose a platform with mobile editing

Optimizing your website for the mobile experience is much easier if your website platform allows you to edit the mobile view directly. You can make edits specific to the mobile, desktop, and tablet view. On Cardsetter, you can drag and drop content blocks and arrange information to accommodate your mobile site visitors. 

Today, your website has to be impressive and functional on mobile devices. Optimize the mobile view to attract your visitors' attention, guide them to important information, and make it easy for them to use. Smartphone users expect a positive experience, and Google is prioritizing mobile indexing; it has to be a priority for your site. 

More resources