The Ultimate Guide to Making Your Site More Mobile-Friendly

Traffic.

That’s the good stuff, right?

And naturally, you want more of it for your blog.

But did you know that constantly striving to gain traffic can actually lead to a problem?

It’s a problem that can undermine much of the hard work spent building and monetizing your blog.

Want to know what it is?

By focusing on ways to gain traffic, you may be completely ignoring certain factors that cause you to lose it.

Because sending traffic to a blog that makes readers bounce is like pumping water down a leaky pipe.

In that situation, what’s the smarter move – pumping more water, or fixing the leak?

Exactly. Fixing the leak.

And these days, one source of traffic is more likely to bounce than any other:

Mobile.

So, is your blog leaking traffic?

Why You’d Be Totally Crazy to Ignore Your Mobile Visitors

Earlier this year, the Internet changed forever.

And even if you didn’t hear the news, your traffic has likely been affected – perhaps without you knowing.

Because in January of this year, mobile Internet usage exceeded desktop usage for the first time in history.

In other words, more people are now accessing the Internet from their mobile device than from a fixed device such as a desktop PC.

And as more and more people choose mobile as their primary device, the more you will suffer as a blogger if you choose to ignore them.

Consider the following statistics:

• 65% of emails get opened first on a mobile device.
• 76% of Facebook’s monthly active users are on mobile.
• 78% of Twitter’s active users are on mobile.

(And if you’re wondering why these figures affect you – just remember that few people will navigate directly to your content. They usually follow a link in an email, or on social media.)

Whatever your views on the explosion of mobile usage, your readers will increasingly be using mobile devices.

You have no choice in how, when, where and on what device your audience chooses to connect with you.

If you choose to ignore this, you risk the following:

1. Less Traffic to Your Blog: As mobile usage increases, you could effectively be turning away 20% – 50% of potential traffic to your blog.
2. Fewer People Signing Up For Your Email List: Without a mobile-friendly blog and email opt-in forms, new visitors will leave in frustration instead of signing up to your list.
3. Potential Readers Lost Forever: A Gomez study found that 46% of mobile users are unlikely to return to a site if they had trouble accessing it from their phones. So first impressions are more important than ever.

Here’s the bottom line.

You’ve worked hard to get where you are, and you’ve worked hard to build your audience.

So you’d be crazy to lose momentum (and readers) by sticking your head in the sand and ignoring this mobile trend.

The Easy Way to Discover How Many Mobile Readers You Already Have

The first step to taking your mobile visitors seriously is to find out what proportion of your blog readers are already using mobile devices.

And the simplest way to do that is by using Google Analytics.

(If you don’t have Google Analytics configured for your blog yet, check out this 60-second guide. But be aware that you’ll need to wait a few days for data to accumulate before following the steps below.)

Log in to your Google Analytics dashboard.

Click “Add Segment” in the panel toward the top of the screen.

Check the boxes for “Mobile and Tablet Traffic” and “Mobile Traffic.”

(“Mobile and Tablet Traffic” is all mobile traffic – “Mobile Traffic” is essentially smartphones and other mobile devices minus tablets – e.g., iPad, Kindle Fire, etc.)

Then click “Apply.”

You’ll be able to see the percentage of visits coming from both mobile devices and tablets in the selected timeframe.

In the last 30 days, almost 34% of all visits to this site have come from mobile devices and tablets and almost 27% of that is from mobile devices alone.

Your percentages are likely to be similar to this, and if mobile usage represents a third of all your visitors, that is a significant section of your audience and certainly worth taking care of.

As mobile Internet usage continues to grow, don’t be surprised if 50% of all of your potential traffic comes from mobile within the next two years.

But what if mobile is just a small percentage of your audience?

If mobile traffic is only a small proportion of your total traffic, it’s possible that your particular audience may not be heavy users of mobile.

But there’s a more likely explanation.

Your blog may be so mobile-unfriendly that anyone visiting from a mobile device bounces away almost immediately, barely leaving a trace on your traffic stats.

So use the following steps to ensure your blog is prepared for this brave new mobile-centric world.

Step 1: Make Sure Your Blog Theme Is Mobile-Friendly

Have you ever received an email on your smartphone with an irresistible headline that you just had to click?

But you follow the link and… BAM! You can hardly read the content because the text is so tiny and you’re forced to pinch and zoom to find your way around.

It’s frustrating, right?

And a surefire way to push readers away.

Has it ever occurred to you that your blog might be doing the same?

You might already know whether your blog is mobile-friendly, but if not, try it now.

If you have to pinch and zoom (instead of just scroll and tap) to read the content and navigate the site, your site is not mobile-friendly.

Here’s an example:

On the left we have I Love Marketing, and on the right we have Smart Passive Income.

See how Smart Passive Income is much better optimized for mobile? The headline is clearer, the body text is larger and precious space is not being taken up by a sidebar (which in the case of I Love Marketing contains widgets that are too small to be useful anyway).

Go ahead and visit these sites on your mobile device and see for yourself.

Then check your blog. How does it look?

Of course, even if your site displays well on your smartphone or tablet, that’s no guarantee it looks equally good at other resolutions.

The answer is to use a tool like Screenfly by Quirk Tools, which shows you what your website looks like on various devices.

All you need to do is enter your website URL and then select the device you want to see your site on. Below you can see the many options to choose from within smartphones alone.

Warning: If you have a separate mobile website hosted at m.yourdomain.com, this tool won’t detect it, so check out your site on a real device first.

If your blog’s performance on mobile devices leaves something to be desired, you have a couple of options to make it more mobile-friendly:

1. Create a separate, mobile-only version of your blog.
2. Use a mobile-responsive theme across your entire site.

1) Create a Separate, Mobile-Only Version of Your Blog

If you’re starting a blog using WordPress, the easiest and most affordable way to improve your blog’s performance on mobile devices is to install a plugin that automatically presents a mobile-optimized version of your blog to mobile users. (Desktop users will continue to see the current version of your site.)

One of the leading plugins in this space is WPtouch Pro, which offers a selection of different mobile themes for a one-time cost of $49.

Social Media Examiner uses WPtouch Pro:

Compare this simpler, mobile-friendly layout to the full desktop site and you’ll see the advantages of the plugin for mobile users:

2) Install a Mobile-Responsive Theme Across Your Entire Site

If you use self-hosted WordPress (and you should), the odds that you’re already using a mobile-responsive theme are higher than ever.

But what exactly is a mobile-responsive theme?

A mobile-responsive theme detects the screen size of the visitor’s device and adapts accordingly. That means dynamically adjusting the layout, image sizes and font sizes depending on the amount of screen “real estate” available.

Here’s an example:

Note that WPtouch Pro also does this to some extent, but only for mobile devices (at various screen sizes) – i.e., not full-size desktop resolutions.

A mobile-responsive theme uses a consistent design across all device resolutions (including desktop).

A number of places offer high-quality, mobile-responsive themes. Here are just a few:

• StudioPress
• ThemeForest
• DIYthemes

Some free mobile-responsive themes are available, but expect to pay up to $100 for a professional theme with good technical support.

If you decide to hire a designer and go custom, here are nine examples that you could mimic.

Step 2: Replace Text Links with Tappable Buttons and Menus

Websites that are not optimized for mobile users can give visitors a bad case of “Fat Finger Syndrome.”

Fat Finger Syndrome occurs when a website’s links and buttons are too small for visitors to easily and accurately tap with their finger (or thumb).

As bloggers, we can easily forget that not all of our readers are navigating our blogs with a mouse (or trackpad) and pointer, and this can lead to a frustrating user experience.

Even if you have a mobile-responsive theme, some elements of your navigation may still have this issue.

How Big Should Touch Targets Be?

Apple’s iPhone Human Interface Guidelines recommend a minimum target size of 44 pixels wide and 44 pixels tall.

Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34 pixels with a minimum touch target size of 26 pixels.

Nokia’s developer guidelines suggest that the target size should be no smaller than 0.7 cm x 0.7 cm square or 48 x 48 pixels.

As you can see, guidelines vary, but the point is that by not making buttons large enough, or by having too many text links, you risk frustrating visitors.

Just remember that 46% of users will never return if they have a poor experience.

Let’s look at an example.

You should be able to see that clicking to download a copywriting e-book from Copyblogger will be a lot easier than trying to click the tiny “luggage” text link on Eagle Creek’s website on the right.

So when creating buttons, make sure they are large, tappable and have enough space surrounding the outer areas.

And when using simple text links, make sure they don’t crowd (where two or more links appear close together) on mobile devices and lead to another case of Fat Finger Syndrome.

For example, the main navigation on Eagle Creek is nearly impossible to read at low resolutions, and the menu options suffer from crowding.

How to Create Mobile-Friendly Buttons and Menus

Various plugins are available to make simple text buttons using WordPress shortcodes. For instance, this plugin creates buttons like the following:

This button style is particularly useful for creating a call-to-action button.

To quickly fix a difficult-to-navigate menu like Eagle Creek’s, you could use a plugin that creates a more mobile-friendly navigation menu.

Responsive Menu provides an app-style menu – sometimes called a “hamburger” menu.

Step 3: Make Sure Your Opt-in Forms and Payment Forms Are Mobile-Friendly

Every blogger wants more traffic, right?

But do you ever think why?

Usually it’s because you want to convert that traffic into something else – like signups or even product sales.

But if your opt-in forms are not optimized for mobile, visitors will struggle to give you their email addresses.

And if your payment forms are designed for large screens only, visitors will struggle to hand over their credit card details.

So you’d be smart to see how your forms behave on small screens.

How to Check If Your Forms Are Mobile-Friendly

As before, there’s a pragmatic test of mobile friendliness – visit your signup or product landing pages from your favorite mobile device and go through the process yourself.

As you can see below, I’d have to pinch and zoom to give I Love Marketing my name and email address, so the experience is not optimal:

And if visitors have a similar problem with your checkout form, you’re likely to lose sales too:

The Right Way to Capture Emails on Mobile

As with some of the earlier usability problems, here WordPress plugins come to the rescue.

SumoMe and OptInMonster both make it easy to create mobile-friendly opt-in forms on your blog (affiliate link).

You can see a SumoMe pop-over in action below on Noah Kagan’s site Okdork.com.

SumoMo also has a neat feature that triggers an opt-in box to appear as the reader scrolls down your blog.

I’ve increased my site-wide conversion rate by 8-10% by using pop-overs with unique lead magnets.

A mobile-responsive design or a plugin like SumoMe can help ensure that on-site sign-up forms render well on mobile.

But you can also use a tool like LeadPages to create dedicated off-site landing pages for capturing email addresses.

In addition, the LeadBoxes feature lets you make any link, image or button trigger a mobile-responsive pop-over.

Here is an example of a page I created in minutes using LeadPages to build my email list:

LeadPages is a more expensive product, but if you are creating several different pages (opt-in pages, registration pages, thank you pages, etc.) it can be a worthwhile investment.

Use 3rd-Party Tools for a Mobile-Friendly Checkout Experience

If you sell products from your blog, the easier the checkout process, the more sales you’ll make. It’s that simple.

If a reader wanted to buy from your site, would it be easy?

Because this is one place where you don’t want to give your visitors anything less than a smooth experience.

Here are three options for letting your customers checkout from your site on a mobile device.

1. ClickBank

A third-party shopping cart like ClickBank gives customers a seamless and mobile-optimized experience when buying your digital products.

2. Gumroad

Gumroad offers a simple solution that is by far one of the easiest mobile checkouts I’ve ever seen on a mobile device.

I created the following form for my digital product The SMS Marketing Handbook in just a few minutes without any specialist technical know-how:

3. Custom Forms

This option isn’t for everyone, but if you’re looking for a payment solution that integrates seamlessly with your blog, you could hire a developer to implement Authorize.net or 1 Shopping Cart.

If you have a significant list, you may consider a more complete “backend” solution like Infusionsoft or Ontraport.

My friends over at Fizzle.co offer an amazing mobile checkout experience that was custom built to integrate with their site design:

Step 4: Create Snackable Content Mobile Users Will Love

Have you ever caught yourself quickly scanning through articles on your phone – more so than you would on your laptop or PC?

Well, studies show that people are more task oriented on mobile devices. Visitors to your site are usually looking for something specific – perhaps lured in by a great headline shared on social media.

As a result, you should try to make your content more snackable – in other words, easy to consume in small pieces – so that readers can find what they’re looking for quickly.

Here’s how to do it (and these work for emails, as well as blog posts):

1. Open with a short, punchy headlines in a large font. Think 10 words or fewer and 16 points or larger. (A mobile-responsive theme should handle the font size automatically, but if you’re a CSS whiz, you could write your own media query.)
2. Write irresistible subheads. These help break your content into clearly labeled bite-sized sections.
3. Use bulleted points and numbered lists. These add visual variety and help the user identify key information.
4. Embed images within the sub-sections. This helps to break up the content further, and makes it easier to navigate visually.

Here is a great example from a blogger and friend, James Clear:

Bonus Idea: Snackable Audio Content

Know what else is snackable? Audio!

Not everyone likes reading – some people prefer to consume information by listening instead.

In fact, did you know that over 65% of podcasts are listened to from mobile phones?

Audio is the most mobile content there is!

And audio represents an opportunity to get your content in front of a whole new audience.

So once you’ve written you next blog post, why not record yourself reading it using a USB microphone or headset?

Then you can add that file to your site, submit it to iTunes, Stitcher Radio and SoundCloud.

I’ve personally seen an increase in traffic of over 2,000% on posts that I also released as audio.

To give another example, Jason and Jeremy over at Internet Business Mastery have been audio blogging for about a year now.

They wrote a blog post titled “The First Key to Online Business Success.”

The original blog post got 2,755 visits.

The audio blog version got 28,770 unique downloads.

Impressive, right?

Repurposing your content can capture the attention of people that don’t like to read content, or at least don’t want to read it on a mobile device.

Step 5: Create Emails That Look Awesome on Mobile

Making your blog and its content mobile-friendly is a huge step forward. But you also need to think beyond your blog.

You’ll have been told a thousand times to build your email list, and if you’re following that excellent advice, you’ll want to make sure the emails to your list are mobile-friendly too.

After all, 65% of all emails are first opened on a mobile device, and if those emails don’t look great on a phone, you’re effectively crippling the effectiveness of your hard-won list.

Many bloggers use services such as AWeber, MailChimp or Constant Contact to manage their email lists, and thankfully these tools make sending mobile-friendly email easy with mobile-responsive templates.

So if you’re not building a list yet, choosing an email provider that offers mobile-responsive email templates is essential.

Even if you’re not using an email template that is optimized for mobile, you can improve the mobile experience by choosing a single-column template. Typically, having more than one column will lead to the pinch and zoom problem on a mobile device.

How to Make Sure Mobile Users Can’t Resist Opening Your Emails

Of course, before your readers even get to see how beautiful your emails look on their mobile devices, you need to persuade them to open them.

And although much of the popular advice about getting your email opened still applies, the rules are a little different on mobile.

Why the Sender’s Name is So Important

When sending emails, you can choose the display name of the sender, which is shown in place of the sender’s email address.

But on mobile devices, the sender’s name is usually given more prominence than the subject line when compared to desktop email.

So make sure the display name is clear, and your recipient knows exactly who the email is from, because confusion will only reduce open rates.

[“source=smartblogger”]