Mobile Optimization: 12 Best Practices for the Mobile-First Era

Google’s mobile-first index is here.

Now, more than ever, it’s essential to make sure that your development process includes best practices and techniques toward achieving an effective mobile representation of your online presence.

Whether you’re in law, health care, the restaurant game, technical, or other industry, a high-quality mobile implementation of your website is a critical step in the mobile-first era.

This author recommends focusing on several aspects of mobile development best practices including technical SEO, website development, and principles of mobile design to create a coherent, online website presence that can withstand the shift into Google’s mobile-first era.

Without further ado, here are 12 best practices you should focus on to achieve a high-quality mobile website.

1. Above the Fold Isn’t Gone Entirely

It’s important to remember that in a mobile environment, where things scroll endlessly, above the fold is not gone entirely.

It is still preferable to have at least some of the text content above the fold on a mobile design, to show someone that there is a reason to scroll.

The psychological benefits and desires of wanting to see what you offer are not gone entirely, so you do still have to optimize for this somewhat on many different mobile devices.

2. Don’t Always Focus on the Mobile Consumer

As mobile and desktop merge, so too are the goals and desires of the users of these platforms.

When you focus on what your user wishes to achieve based on platform, you create a holistic approach that reaches customers through your website more effectively.

Whether a user is purchasing a product, or performing research on the services you provide, the blend of user goals and client acquisitions of the business will continue.

So much so, that specifically focusing on these ideals and values will become less necessary. Not less important, mind you, just less necessary as this blend of mobile and desktop continues.

3. Use Responsive Design Techniques

The days of separate m-dot websites (m.example.com) are over.

There is no possible redeemable reason to use such an implementation in the mobile-first era.

The structure can be very messy, with multiple URLs creating duplicate content issues if they are not properly optimized.

There are many techniques available to ensure that an effective transition is completed, but otherwise, m-dot implementations have gone the way of the dodo with the advent of new technologies.

Today, the ideal implementation involves a responsive design. These designs use what are called media queries to define the display resolutions that the design will support.

Each separate resolution is what’s called a “break point” in the design, or the point at which the responsive design transitions from one resolution to the next.

The benefit to using this kind of structure is that you do not run into the duplicate content issues that you would on an m-dot implementation.

Also, your mobile implementation will be on the latest technology.

4. Think ‘Code’ Instead of ‘Images Everywhere’ to Increase Site Speed

Do you really need to use that two-color background as the 2 pixel wide by 1200 pixel high repeating background?

If you don’t, and you can code it instead, code it instead.

While something so small won’t make a major dent in site speed, the optimizations can add up as they are completed.

Next time you perform a site audit or otherwise create a website, think: “Do I really need this image here or can I simply code it instead?”

If the image really isn’t necessary, coding the object could help increase site speed exponentially, especially on site designs that utilize an overabundance of graphics.

5. Customize WordPress for Mobile

There are many plug-ins available for WordPress.

So much so, that some even provide functionality for increased mobile compatibility.

The most useful plug-ins for this purpose are Duda Mobile, W3 Total Cache, as well as plug-ins for minifying HTML and CSS.

6. Make Sure All Content Is the Same on Desktop & Mobile

The idea behind this best practice is to avoid duplicate content and accusations of cloaking.

To be safe, always make sure that all content is the same on the desktop version of your site as it is on mobile.

One of the best techniques to use to make sure this happens is responsive design.

Responsive design, for those who don’t know, involves creating a style sheet that uses “media queries” to automatically transition designs between a wide variety of platforms and devices.

If you want to squeeze out all possible speed and make your design lean and mean, consider looking into CSS sprites to reduce server-side requests.

7. Use a ‘From the Top Down’ Development Approach

A “from the top down” development approach means that you consider all potential consequences of each decision made in a design from start to finish.

You develop for mobile-first, rather than desktop-first, and then tacking on a mobile design after. This development approach is ideal because you don’t introduce issues into the final design.

Here’s an example: you create a desktop website. About three-quarters of the way through the process, you decide that you want to create a mobile site on top of it.

You create the mockup. But, after coding the mockup and moving throughout the transitions, you find a bug here. And you find a bug there. Then you find a bug over there. This is because the bottom-up approach does not work and causes scope creep.

This is the phenomenon where unseen issues crop up at the last minute, causing unforeseen bugs and increases in hours that were not originally provided for when the project was originally scoped out.

The truth is, if the top-down approach for mobile responsive design were considered straight from the beginning, these bugs and things that need to be worked out would not be popping up at the end, causing this dreaded issue.

8. Don’t Use Intrusive Interstitials to Sell Your Product

Yes. We know. Your product is the greatest, most awesome thing to grace this planet. That’s why we are probably visiting your website and doing research on it before we buy.

But, we do not need to have an intrusive ad that blocks our activity throughout your site to bug us on the sale.

Where possible, keep the intrusive interstitials to a minimum, and keep the ads towards the bottom or off to the side with an option to click on the ad and remove it at the very least.

It is important to note that Google does penalize for intrusive interstitials. It is worth reading their developer guides along with their webmaster guidelines on this issue, as well as their blog post on this topic.

9. Identify Weaknesses in Your Implementation & Check for Errors

Weaknesses don’t always mean site speed.

They can mean issues with the implementation across different displays, and different platforms (think Windows phone vs. iPhone).

I like using BrowserStack.com for this purpose.

Nothing’s worse than getting to the final stage of mobile implementation, and seeing your client discover issues with your implementation that you should have discovered yourself during the development process!

10. Don’t Use Flash Video

This should be a common practice in this era, but I still see sites using it.

Flash video went the way of the dinosaur as soon as Adobe bought Macromedia and discontinued it, paving the way for HTML 5 video.

If you aren’t using at least HTML 5 video on your website, your users could be suffering.

11. Use Schema.org Structured Data

Schema.org structured data is important for not only identifying pages on your site that have special, structured information the search engines need to see, but when the mobile index comes into full play, expect to see increased reliance on Schema.

This is a concise, easy method of understanding information that can then be translated to rich snippets in the mobile search results.

But, either way, it is this author’s opinion that Schema structured data be used even on desktop implementations because it can help you appear in rich snippet results based on your targeted keyword. This can help enhance the visibility of your site when implemented correctly.

12. Don’t Block Supporting Scripts Like JavaScript, CSS, or Things Like Images

This should be common sense when developing sites for any platform, whether desktop or mobile, but some people still do it.

It is important to make sure that supporting scripts for your mobile design are not blocked, because this blockage can result in issues like mobile soft 404s down the line. It can also result in desktop 404s.

But, if you block these files from being crawled by Google, they cannot crawl these files to see that your website works correctly.

When they can’t do this, this can result in lower rankings because they can’t fully understand your website.

Mobile First Is Here: And the Need for Implementation Has Reached Critical Mass

With the arrival of Google’s mobile-first index, implementing your cross-platform, cross-device, cross-compatible website has now reached massive priority.

This means that the longer you delay, the more that not having not just a mobile implementation, but nothaving the right mobile implementation is going to cost you in many ways.

Not just rankings.

If you haven’t yet made the jump to mobile, why not?