Table of Contents

• 1. Limitations of Mobile Devices
• 2. Blog Design & Functionality
• 3. Formatting & Structuring of Written Blog Post
• Final Thoughts 

BREAKING NEWS… Smartphones are a big deal. Everyone has what past eras would refer to as a pocket supercomputer. All over the world, even in third world countries. They are cheap, affordable and powerful.

Never have we been so connected.

Just as “video killed the radio star”, the smartphone has taken a sizeable chunk out of many traditional, established mediums. Newspapers, televisions, desktops and laptop computers still have a place. Rather, the smartphone has become the focal point. The emphasis. The instrument which it all goes through.

In fact Mobile Phone internet browsing usage has surpassed desktop and laptop. Sometime ago this decade actually. In 2018 mobile phones accounted for 58% of website hits.

Doesn’t look like mobile’s going to slow down anytime soon.

So it’s extremely important to make sure your blog is optimized for the smartphone. The term in the marketing world is called “Mobile Optimization”.

Moz defines Mobile Optimization as

“The process of ensuring that visitors who access your site from mobile devices have an experience optimized for the device” 

When you crank out that blog content, you need to make sure it is mobile optimized.

Understand and implement these 3 key steps and your blog will become optimal for mobile phones.

1. Limitations Of Mobile Devices

The first thing we must do is to identify and understand the problems that mobile phones create.

Problem, then solution.

We are “optimizing” for a reason. We must first understand why this is necessary. Mobile phones have clear limitations that make consuming content more difficult.

Let’s identify and break them down.

Small Screen Size

This is the first and most obvious limitation. Small screens make things harder to see, harder to read. Harder to consume and interpret content. Harder to press buttons. The size of the device makes it practical in one sense, but not in another.

Nielsen Norman Group reports that smaller screens cause users to have a;

• Higher interaction cost
• Higher short term memory reliance

This causes mobile content to be twice as difficult to consume.

Page Speed

Naturally, a smaller device is going to equal smaller processing power. No real way of getting around that. In the past this was very much a limitation. However as technology has progressed, things have gotten much better.

Still can’t compare to a desktop, a laptop or even a tablet.

In the past, mobile phones with limited hardware were tasked with loading websites designed for laptops and computers. Now smartphones not only have the firepower but most competent websites are mobile optimized with responsive designs.

How fast a page loads is very important. In fact there’s a direct correlation with bounce rate. Slower page loads equal higher bounce-rates.

Google themselves did a similar study and came to the same conclusion. A page slowing from 1 second load time to 6 seconds increased bounce rate by 106%.

If optimization parameters are not met, mobile phones are prone to slow page loading, thus higher bounce rates.

Doesn’t matter how good you write at that point. They’re already gone.

Navigation

Trying to navigate on a mobile phone can be tricky. Especially if the websites are outdated (which many still are).

Imagine incredibly slow loading times, you’re itching to hit the back button already. You display some restraint. Page loads. But everything is too small to read. You look for the homepage button. It’s so small. You finesse it, but you miss. Now you’re slowly loading the wrong page.

That just gave me a headache.

With better optimized websites, this becomes much less of a problem.

Portable

You may be thinking why I’ve listed this. Wouldn’t it be a benefit? Yes it is, but it also a limitation. Let me explain.

There are simply more distractions when using a mobile phone. This leads to more disruptions. Think about it.

The portability means you can be anywhere.

Not alone at home.

You could be at a cafe where people are talking on lunch break. Employees working, cars driving past. So many distractions that simply aren’t there when using a more limited device. Like a desktop.

Nielsen Norman Group states this causes mobile use to become fragmented and shorter. According to their research the average mobile session is 72 seconds, compared to 150 seconds for desktop and laptops.

Ads

Remember these guys?

Ads are an important source of revenue for many digital media outlets and bloggers. With the large traffic they generate, it only makes sense.

Have you ever experienced the nightmare of ads and popups on a mobile phone? It is truly dreadful. There are so many poorly optimized websites with ads still out there.

There are definitely good ads out there today utilizing the right mobile website design principles. The same can be translated to things such as Call To Action forms/Opt-In popups.

2. Blog Design & Functionality

The first place to start for mobile optimization is design and functionality. There are so many things you can do, adjust, tweak to make your blog mobile optimized. And it starts with a choice of design.

Responsive Design

A Responsive Design is a website design that changes, renders and adjusts itself to fit the user’s environment and behaviour. In simpler terms, the design adapts to different screen sizes. Smartphones, tablets, desktops, laptops. Different models, series, brands.

It’s an essential design that you must have in 2019. It’s considered the most important feature of a website according to awwwards.

Google themselves recommend a responsive web design.

Benefits

• Faster page loading

Page speed has been an algorithm factor for non-mobile since 2009. It only became a factor for mobile in July of 2018.

“Although speed has been used in ranking for some time, that signal was focused on desktop searches. Today we’re announcing that starting in July 2018, page speed will be a ranking factor for mobile searches”

This is a simple benefit, but one of the most important. A responsive design is going to load faster on mobiles, giving you an edge.

• SEO Friendly

Search engines like Google reward good formatting of content. As Google moves more and more towards a mobile focus, a responsive design is imperative.

It was in 2015 when the dubbed “Mobilegeddon” occured. A google algorithm update that saw a push towards rewarding mobile-friendly websites.

This big algorithm update was back in 2015. Things have only gotten more mobile focused.

Infact, in July of this year (2019) Google will start using a mobile-first index. This has been in the works for years.

• More Browsers Compatible

There are many different browsers people use. Responsive design is compatible with more browsers, due to its adaptive nature.

• Ready For The Future Of Technology

Whatever the future holds. Whatever devices are invented, a responsive design is ready for it.

Accelerated Mobile Pages (AMP)

Accelerated Mobile Pages, or AMP is a creation by google to help improve the mobile experience. In Moz’s own words, “A stripped down version of HTML”. It produces lightweight pages that load 4x faster.

In fact Google showed that AMP made pages load faster by 15-85%.

AMP undisputedly speeds up page load time. This is what it was intended to do for mobiles.

But is it a ranking factor for search engines? Here’s what Google had to say about this in 2016;

“Is AMP a ranking signal? At the moment it is not a ranking signal.

It is obviously one way to make mobile friendly pages, so that might be an option where you do that. I’ve already seen some web sites where they’ve moved the whole web site to the AMP format. Obviously that is mobile friendly setup so it kind of picks up the mobile friendly thing”

It is not a ranking factor, though it will still indirectly affect it. A faster page speed from AMP implementation is going to have a lower bounce rate. More people will actually read your content. They will link, refer to your article/post.

We know that backlinks (people linking you) are one of Google’s top 3 algorithm ranking factors.

How To Implement

The easiest way to take advantage of AMP is to install a WordPress plugin.

Head to the WordPress dashboard and click on Plugins, Add New.

Look for ‘AMP’ in the top right search bar. There are a few good AMP plugins to choose from. Install and activate.

It’s as simple as that. Simply follow the plugin instructions. They are easy to follow.

If you use a SEO plugin such as Yoast or RankMath (this is what I use), you can activate it through there. Once you have downloaded an AMP plugin, it should be able to be activated.

Here’s the activation option on RankMath.

Schema Markup

Schema Markup AKA Structured data is basically specific data helps explain to Google and other search engines what your website contains.

Better structured data = better specific SERP representation of what your website or specific page/post is about = better search engine results.

It is like properly ordering your messy notes for an exam. Properly ordered notes will help you find what you need. You’ll do better if it’s easier for you to understand your notes.

Data is the code of the website. While you see this;

Search engines see this;

Structured data is essentially that code you see above, in a… structured format. A structured format called “Schema”. Not everything can be structured. Images, videos, gifs and graphics come under the classification as “unstructured data”.

For a more technical definition, Moz defines it as such;

“A semantic vocabulary of tags (or microdata) that you can add to your HTML to improve the way search engines read and represent your page in SERPs.”

What it is isn’t nearly as important as what it can do for you. Implementing structured data could potentially lead to a 30% increase in click-through rate.

We can’t actually see the front-end workings of schema markup in effect, but we can see how search engines reward structured data.

Search engines like Google and Bing reward websites that use structured data. We can see this in effect on SERPs.

Some of these include;

Featured Snippets

You’ve definitely seen these before. Featured snippets provide direct, concise answers to specific questions searched. They are intended to make the process easier. If your data is properly structured, Google will reward you in the form of snippets.

They can also come in video form.

As well as lists and tables.

Carousels

Ever seen those news stories at the top of SERPs with an image thumbnail? Looks like this.

These are one style of carousels that search engines reward structured data with. The above example shows how schema markup helps people find exactly what they want.

Other styles of carousels include things like the actors in a film searched for, or the other works of a director/actor.

How To Implement

The easiest way to implement structured data on your website and content is activate it through a SEO WordPress plugin that can do it automatically, such as Yoast.

I personally use the RankMath SEO Plugin. Here’s how I setup structured data on it.

Go to the Rank Math dashboard and click on the “Rich Snippets” button.

Simply activate and tweak the settings to best fit your needs.

You can also do it manually. Here’s how HubSpot details the process.

Taking advantage of structured data will help search engines classify and reward your content. It will make your content easier to find. And according to this 2017 study, only 17% of people were using schema markup. It’s a chance to get an edge on the competition.

Image Optimization

The first, most obvious aspect of image optimization for mobile phones will be how they affect page speed.

We’ve already talked about the connection between page load times and bounce rates. We’ve also covered how if optimization is not addressed, mobile phones are at risk of increased load times and thus higher bounce rates.

So what are some simple ways we can optimize our images in our blog posts for smartphones?

Image Size

Be wary when you use stock images of high quality from royalty free websites. They are generally large file sizes. This will increase your page’s load time.

Ideally you want an image file size less than 100kbs. This will maximize page loading speed.

Also, make sure the image is at least 200×200 pixels. This is so it will be seen on social media sites like Twitter and Facebook.

As of 2019, Google wants 1200 pixel width for Accelerated Mobile Page (AMP) usage. If you do intend on using AMP, take this into consideration.

At the end of the day it’s not the size of the image that’s the issue here. It’s the file size that causes slower loading times.

In instances where simply decreasing the image size has not resulted in a small enough file size, try compressing.

Image Compression

Image compression is different from making an image smaller.

Compressing an image involves encoding/converting an image to a more optimal format that equates to a smaller file size. This occurs without degrading image quality.

Here’s an example of compression in effect. Notice any differences? I don’t.

Smaller image file size, faster load time. Lower bounce rate.

There are plenty of online tools to compress images. TinyPNG is a popular choice.

Emphasize Page Speed

Outside of methods mentioned above, here are some more easy ways that you can increase the overall loading speed of your website;

Implement Caching

Caching is basically when you visit a website, then come back and load that website a second time, it loads faster. It does so because of “caching”.

Caching is a temporary storage of elements of a website that needs to be loaded.

So if you have caching enabled, your website will load faster.

Once again, a WordPress plugin is the easiest way to utilize caching for your blog.

Minify Your Code

Minifying code essentially means to rid it of any unnecessary characters. This is a simple way to increase page speed.

You can minify code manually, but it’s much easier to use a WordPress plugin.

I use Fast Velocity Minify. It helps me rank great on Google PageSpeed Insights.

Use a Content Delivery Network (CDN)

A Content Delivery Network is a network that delivers web data/content to a user, based on geographic location of the user, and the origin of the webpage and the content delivery server.

The goal of a CDN according to Wikipedia is;

“Provide high availability and high performance by distributing the service spatially relative to end-users. ”

That’s a rather overtechnical definition. It’s not really important what it is, but rather what it can do for you.

CDNs can speed up your site.

VentureHarbour found that utilizing a CDN increased site speed by 30.2%.

Here was their speed test before using a CDN.

And after implementing a CDN.

A crazy speed improvement for what they called “20 minutes of work”.

Quicksprout recommends using Cloudflare or StackPath to setup a CDN.

No Pop-ups

Pop-ups can destroy the mobile experience for your visitors.

A few years back, Google made an algorithm update punishing websites that use intrusive ads. Here’s what they had to say on the issue;

“While the underlying content is present on the page and available to be indexed by Google, content may be visually obscured by an interstitial. This can frustrate users because they are unable to easily access the content that they were expecting when they tapped on the search result.”

FYI: Interstitials are ads that cover the full screen. Google better defines them;

“Interstitial ads are full-screen ads that cover the interface of their host app. They’re typically displayed at natural transition points in the flow of an app, such as between activities or during the pause between levels in a game. When an app shows an interstitial ad, the user has the choice to either tap on the ad and continue its destination or close it and return to the app.”

For your blog it’s probably best that you don’t use them, BUT…

If you have to use them, make sure they are properly optimized. Here’s 3 points to follow;

1. Make it easy for them to close.
2. Limit screen space. Make them non-obstructive.
3. Use them when only vitally necessary

Avoid Flash

Don’t bother using Flash. In regards to mobile optimization it will only cause harm. The reasons for this are simple and numerous;

1. Slows Page Loading/Speed
2. No SEO Benefit
3. Compatibility Issues
4. Doesn’t work on Apple Devices

These 4 reasons alone are enough to justify not using Flash for your blog.

Slow page loads lead to high bounce rate.

No SEO means no SERP ranking and organic traffic.

No Apple devices mean no iPhones, which is a large percentage of smartphone users.

Above everything else, even Adobe are giving up on Flash. They plan to stop supporting Flash by the end of 2020.

It is really simple.

Avoid Flash.

3. Formatting & Structuring Of Written Blog Post

The second category for making your blog mobile optimized is formatting and structuring. Where the first was to do with more of the backend, design and functionality, this part is about the copy. The written content, and how to best structure and format it for mobile optimization.

Scannable Content

One of the limitations of mobile phones is the shorter attention span. This was mentioned in part 1. The way in which we consume content online is different than say, a book. It has been known for sometime that online we tend to scan, rather than chronologically read.

Nielsen Norman Group reported way back in 1997 that online, 79% web users scan opposed to reading. If this was true over 20 years ago, just imagine now. Blazing fast speeds, ads and procrastination entertainment sources like Youtube at the click of a button. It’s a wonder how anything online gets read.

Let alone on a smartphone.

The key is to make content scannable. It can boost readability by as much as 57%.

Here are some key ingredients you can focus on to optimize your written content for mobile phones.

Paragraph Length

Long paragraphs are cancerous for readability. It’s a visual first impression that makes readers head elsewhere. On a small screen of a mobile device with slower processing power, this is dramatically enhanced. The stakes are raised on a mobile.

Longer paragraphs that look like massive blocks of texts kill readability. That bounce rate is going to skyrocket.

The solution is simple. Chop them down. Smaller. Shorter. Visually more appealing.

How much nicer does this look…

Compared to this…

All I see is an overwhelming amount of lines.

The Yahoo! Style Guide had this to say about the matter;

“Keep paragraphs short. Two to three sentences is enough.”

Prolific travel and business writer Bob Brooke recommends paragraphs be no more than 5 lines.

“Try to limit your paragraphs to 5 lines – not sentences. If it’s too long, break it down into a series of paragraphs on subtopics.”

Keep it short, keep it sweet. Anything under 5 lines is good. 1-2 line paragraphs are just fine too, if it fits your style and content.

Sentence Length

Much like paragraphs, long sentences are bad practice. A long winded, seemingly endless sentence is going to suck the breath out of the reader. Mentally exhausting. Add that to the limitations of a mobile phone, and you’ve got problems.

Nielsen Norman Group had this to say about sentence length;

“Use short sentences. Avoid convoluted sentence structures, especially compound sentences with many subordinate clauses and conjunctions that put a strain on users’ short-term memory, which is a notoriously weak point.”

Long sentences kill the readers short term memory.

So what is optimal sentence length?

As sentence length increases, reading comprehension decreases.

• Reading comprehension starts to really drop off after the 20 word length.
• At 14 words, reading comprehension is 90%.
• 8 words has a 100% comprehension.
• By the time you reach 43 words, comprehension is almost non-existent at 10%.

It is very clear. Shorter sentences are ideal. Try to keep them under 20 words. This is not academic writing so we want to maximize readability. We want everyone to understand what we’re saying.

Subheaders, Bullet Points, Numbered Lists

Structuring your blog post is very important. Even more important when being viewed on a mobile phone. The small screen is going to make it harder to consume content.

So it’s vital you break up that content, blocks of text. Making it visually more appealing makes it easier to understand.

One simple way to achieve this is to use subheaders, bullet points and numbered lists.

Using subheaders is a simple way to chop up and structure your content. It helps make your content both easier to read, and more scannable.

Scannable content is very important in the context of making your copy mobile optimized.

Font Size

It is advised to use bigger font size as small screen sizes make content harder to read. Though not too big. The responsive design of a properly optimized website will scale. It is advised to use at least 16px body font size.

Smaller than this will cause users to have to pinch and zoom. Creating more of a barrier to consuming content. Effectively making it harder, increasing the bounce rate.

For labels and captions that are of lesser importance use 13px or 14px.

Depending on what your content consists of, the ideal font size on mobile will change slightly.

For a typical blog post type of content generally text heavy with images you’ll want to follow these guidelines from LearnUI

They showed the example of Medium, which is the foremost blog host site on the net.

Follow the suggested above, but at the end of the day test the look out for yourself.

Minimalist Design

Simplistic website designs and structures are optimal for mobile phones.

Google did a study on website designs and found that simplistic, minimal was considered more beautiful.

Symmetry, structure, elegance.

The less distractions the reader has to deal with the better.

With smaller screens, you need to maximize the content, and forgo fancy sidebars, intrusive pop ups and whatnot.

Look at Medium’s beautiful simplistic black and white design.

Notice how it emphasizes the concept of “white space”.

White space (Also known as negative space) is a design principle. The Interaction Design Foundation defines it as;

“The area between design elements. It is also the space within individual design elements, including the space between typography glyphs”

No need to get complex with your design. Make your content the focus on your blog posts, emphasizing negative space, and it will translate well to mobile devices.

Final Thoughts

Mobile optimization is so important for your blog. In Fact it’s important for pretty much anything on the internet these days. Just as your e-commerce store needs to be designed with smartphones in mind, so does your blog and content marketing.

By utilizing the design, functionality and written content principles in this blog post, you can overcome the obstacles that mobile devices bring.

You’ll get better results in the end, and that’s all that matters.