How to Improve the Mobile Friendliness of Your Site

A decade ago, failing to optimize your website for mobile friendliness would have been a slight mistake.

Today, as smartphones surpass PCs as the Internet’s main access point, failing to optimize your website for mobile friendliness means failing to attract the majority of potential digital traffic.

But, worry not! These 10 simple tips will have you optimizing your site in no time.

 

1. Make your loading time shorter

One of the first things you have to make sure of is that your website loads within a couple of seconds. It’s the first thing you have to keep in mind when you create your site.

The reason for this is the fleeting attention of those who surf the Internet. If you can’t deliver the content fast enough, chances are your potential viewer will seek out someone who can.

Related: Why It Makes Sense to Build an App for Your Audience

Why does your site take ages to load? It could be bad hosting, an unoptimized theme, unadjusted images, or memory leaks/bad coding. Even just one of these could slow your website to a crawl!

To check whether you suffer from these “downers”, visit Moz and get a diagnostic done.

 

2. Make your screen clear

Make sure that the first thing to catch your website visitors’ attention is a simple and elegant homepage design.

Swipe the screen for anything bulky, obtrusive, or distracting. Simplification is the crucial action here.

Prioritize what you display first. Would that be your About Us section? Or, would it be the GPS position of all your stores?

Of course not.

Your content as well as your products and services should be the first thing for the visitors to see!

simple homepage design

Another hint here is to make the chain link from your homepage to the actual purchase button as short as possible.

Related: Launch a Profitable & Highly Rated Mobile App in 5 Days – The Teacherpreneur

 

3. Make use of media queries

But first, what’s a media query?

Don’t worry, it’s not a marketing trick of any sort, nor does it meddle in mass media.

It’s a simple question your website asks the devices which visit it.

What’s your display size?

According to the answer to these queries, your website shifts its visual resolution to best match such criteria.

You just have to make sure that such queries (and, following resolution shifts) are actually included in the code of your website!

And, try to keep the list of devices updated in order to maximize the traffic of your site. You wouldn’t want to exclude any mobile models simply because they’re not the most popular.

 

4. Establish frameworks

Using frameworks is the simplest way of placing your elements on the visual surface in a grid that scales up and down according to the viewer’s device.

Similar to media queries, frameworks modify your default mode of view in order to optimize it for various screen resolutions that could access your website.

Easier access always means more traffic.

The most popular framework is Twitter’s Bootstrap as it’s among the easiest to set-up and it requires minimal coding skills.

 

5. Ease mobile navigation

The main objective of making your site more mobile-friendly should always be to adhere to your customers’ experience.

That usually implies keeping navigation easy and intuitive, design natural, and getting from point A to point B as clearly and quickly as possible.

The most popular and effective method is creating a fixed menu bar, either in the form of something attached from top to bottom, or something like a “hamburger menu.” It fashions a three-line bar, nowadays a rather familiar symbol.

The biggest proof of the importance of customer experience is that it’s Google’s #1 tip for creating websites.

Related: How I Grew My Audience by Launching a 99¢ Mobile App – Jarrod Robinson

 

6. Don’t hate the white space

utilize the white space

When planning any mobile site, people always tend to cram in a hefty load of information.

In fact, they tend to cram in as much as possible to fit a screen.

This isn’t the best way to go about sharing mobile content.

Resist the habit. Not only does crammed content look unattractive, but the white space can actually be utilized for a more sophisticated look, a clearer view, and simpler navigation for proper user interaction.

 

7. Use percentages instead of fixed numbers

There was a time when the only measure for digital pictures was in pixels.

Modern times have altered our views of images: stop thinking pixels and start think percentages.

Designating fixed values for images is inherently bad for mobile devices. Why? Well, they are scaled with much less efficiency than percentages.

The most effective solution is to configure visual elements of your webpage to have a specific width: typically 100%, when there’s nothing else to interfere with them.

This allows for a consistent visual experience on a variety of different platforms and preserves the impact your images were meant to make.

 

8. Focus on image titles, keywords, and meta descriptions

Placing a strong emphasis on precise, coherent titles, and proper meta descriptions ensure that your content accomplishes its purpose of a perfect and complete understanding of your message and value.

Every URL, meta description, and title has to be accurate and compact.

As Google recently increased its width of organic search results (500px -> 600px), you have a little extra space to add your metatext.

For the best fitting results on all platforms and devices, remember to keep below these limits:

  • Title length: 70 characters
  • Meta description: 170 characters

 

Related: 5 Killer Tips on How to Create an eBook People Will Read

 

 

9. Most common mistakes

Making any of these common mistakes could gravely affect both your traffic and ranking, especially if they lead to a bad user experience.

An abundance of such mistakes could even slap a warning on the face of your website when it shows in a mobile search.

Some examples (to avoid) below:

  • Blocking CSS, Javascript, and images – Googlebot experiences your site like any of your average users do. By using your website’s robots.txt file to prevent Google from probing in certain assets, it will just tarnish your site’s indexing. If you’re in doubt whether or not you’ve blocked some/any of these assets, use the “Fetch as Google” option from the Google Search Console to spot any possible problems.
  • Unplayable content – Flash is still lacking support from numerous mobile devices, so it might be in your best interest to avoid it altogether. Luckily, HTML5 has some standard tags you may employ to show videos that should be playable on every device. If you wish to show animated content, you can effortlessly make these in HTML5 with Google Web Designer.
  • Bad redirects – This is why Google recommends responsive web design! URLs that are apart can potentially result in incorrectly redirected webpages. E.g., if your website redirects users to your mobile homepage in spite of the page that they requested, you’ve got a bad redirect.
  • Mobile-exclusive 404 errors – Avoid showing mobile users a 404 error for an existing desktop page at all costs. At worst, if a mobile version of the queried page can’t be found (doesn’t exist, even), redirect users to the desktop page with the same content.
  • Pop-up Marketing – Pop-up ads covering the whole screen of a mobile website are common nowadays, but sometimes these highly distort UX and can potentially cause issues with indexing. Avoid any banner that can’t be closed by the visitor.

To see some more common mistakes, check the list on the Google Developers Blog.

 

10. Allow your users to visit the full site

Yes, you’ve done all that you can do for improving, enriching, and optimizing your mobile site, but the fact is that sometimes you can’t deliver the same content as on the full sites.

In this case (and it’s the most common case), you have to provide the link to your full website somewhere for the curious visitors to follow. Rest assured, though, that this isn’t bad – no one thing can perfectly fit everywhere.

Using these tips, your site should be ready to tackle the mobile Internet community more efficiently.

Optimizing your site means more traffic constantly driven to your content. Rejoice!

 

Want to learn how to automate, delegate,  be more productive, enjoy life and boost your profit? Check out our high-level mastermind for educators.