Optimize Your Website For Mobile Without Losing Your Mind

What is Mobile Optimization?

Mobile website optimization, what is it? It’s the art of taking your website from functional to superb! It‘s’ making sure they can read the site from their cell phone or tablet. It answers questions like “Are the fonts big enough for them to read?”, and” Are the buttons large enough to click?” That is just the basics. Mobile Web Optimization is making sure to help your visitor to your wanted result, and it’s important.

This article will go over how to optimize for mobile, from the basics of SEO to the intricacies of User Experience (UX). We will explore the wide and varied mobile website optimization techniques.

Why Optimize For Mobile Devices?

The reason why you need to optimize for mobile is simple. People have moved from using primary mobile devices in greater number, using them for their shopping and decision making. In 2014, the mobile users exceeded the desktop users for the first time. By 2015, they have established a growing lead.

There are 1.9 billion mobile users vs 1.7 billion desktop users. A smart businessman will realize that he has to serve the greater numbers even if he does not think it particularly affects his site traffic. But once you optimize for mobile browsing, your site traffic should improve noticeably.

Source: Mobile Vs Desktop Usage http://bit.ly/2aZETNC

Let’s be real, everyone is using their mobile devices a lot more. Not only to Tweet, Facebook, Instagram or Snapchat but to research decisions on what to buy and where to go. In this age of instant information, customers want to know why you are better with a single tap.

Are you willing to let you competition supply them easily searched and relevant information? Even if you know yours is better.

Unless you do mobile website optimization they will not even know you exist. If you are a local business, like a pizza parlor you have to make it easy for the phone user to call you, find you and order their pizza.

For example pizza parlors need pages for both desktop and mobile. The desktop one is for someone at home looking for a great deal on a pizza to be delivered. The cell phone user wants to find the nearest one to stop in while hanging out with their friends.

Marketing Trends Hours Per Day On Devices http://bit.ly/2b1KjnT

Local Optimization help them find you Pixabay

Starting The Process, The First Step.

Okay then, the first step. Which one of the three set ups do we want to do? The one size fits all approach? Responsive design. Second option, change what they see according to what device they are visiting from, called dynamic design. Third, separate them entirely, with one page for mobile and one for desktops. Each of these have their own weaknesses and strengths.

Responsive Web Design

Responsive web design is the one size fits all design. Responsive uses HTML5 and CSS and Javascript to look at the visitors device and get everything to fit right. This is not as easy as you think. By careful application of head tags and CSS, most pages will be viewable by the visiting device. It will not however customize the content except for size and font.

Responsive web design sends the same HTML5 code to every visitor and CSS is used to adjust the image to your device.

Use meta name=”viewport”, to signal to your browsers that your pages will adapt to all devices.

The meta viewport tag tells the site how to scale the content to the device’s width. Without it the browser will default to desktop settings that are almost unusable on most phones.

Google recommends using responsive web design.

For in depth detail from Google on setting up Responsive Web Pages, see their statement.

Source: Google http://bit.ly/2aDysjq

Dynamic Web Design

Dynamic Web Design is the custom content delivery for every device design. It’s more flexible than responsive design. It is also more complex to set up. It will respond with different HTML5 and CSS to different devices. So you can customize the viewing experience with different devices. This will allow you to really change things so the Iphone user gets a totally different view that a tablet user.

But beware, the mobile content is hidden from the desktop browser. You need to set a flag so that smartphones and Google will know to look for the site’s for mobile view and content.

You do that with a Vary HTTP Header. Here is how it looks.

GET /page-1 HTTP/1.1

Host: www.example.com

(…rest of HTTP request headers…)

HTTP/1.1 200 OK

Content-Type: text/html

Vary: User-Agent

Content-Length: 5710

(… rest of HTTP response headers…)

The vary header tells the browser that the content will vary according to the device calling it.

Correctly Detecting User Agents

If you do not correctly detect the type of device, you can have a royal mess on their screens. Correctly detecting user agents, or device type can be a problem. The three most common failures are.

User agent detection needs a list of agent strings or substrings for every device. These list quickly become out of date with all the new devices out. So need to be constantly updated. Old list can cause a bad user experiences.
When matching user agents, it is common to get a mismatch like mobile detecting as desktop and visa versa. Another common is identifying a tablet for a mobile phone. So set this up carefully to not have this problem.
Be careful of cloaking Google sends out their devices named as specific devices so they can crawl the appropriate info. If you are set up to find Googlebots you will mess up the indexing and give bad results to the search engines.

List of Common Mistakes

Separate Mobile Site

The third choice of site designs is, two separate sites, one for mobile and one for desktops. This will allow you to have an entirely different website for mobile devices. This can be complicated or simple depending on how close you want your branding to be on you mobile site. The big thing to remember is to tell google you have a mobile site. There are two ways to accomplish this but it is suggested to use both.

Start With The URL

You have two separate pages one for your desktop viewers and one for your mobile viewers. Standard practice is to have the desktop use the original URL and the mobile to be m.original URL

On the desktop pages HTML header add

href=”http://m.example.com/page-1″>

On the Mobile pages HTML header add

Separate Webpages From Google

For Sitemaps Google recommends:

<?xml version=”1.0″ encoding=”UTF-8″?>

<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″

xmlns:xhtml=”http://www.w3.org/1999/xhtml”>

<url>

<loc>http://www.example.com/page-1/</loc>

<xhtml:link

rel=”alternate”

media=”only screen and (max-width: 640px)”

href=”http://m.example.com/page-1″ />

</url>

</urlset>

Remember to run Google’s mobile friendly test on every Major Page: https://www.google.com/webmasters/tools/mobile-friendly/

PAGE SPEED

How many times has this happened to you? Your phone starts to load a page and it takes to long 1, 2, 3, 4, 5 bye bye. People will not wait for your page to load. On desktops it is the count of 5 and you have lost over 50% of your visitors. On phones it’s less.

You need to have your site on a Fast Host. The cheap web hosting site may be costing you a lot of visitors. If it does not deliver the page quickly enough they will leave.

There are things you can do yourself that can help speed up the page speed. Here are a few of the many things you can tweak to get the page up faster.

Images optimized for mobile

You need to optimize photos for mobile sites. Now more than ever, sites are putting up large photos and scrolling screens. Knowing how to optimize the photos is getting more important everyday.

How many times have you been on Facebook for instance and clicked on a link to some click bait article? How many times have you had to wait and wait for the pictures to load before you can click on anything. You give up, hit back, leave.

You can have the greatest content, but if the page takes to long to be usable, no one is gonna see it.

Here is a great article on how to optimize photos. http://bit.ly/2b0qOzQ

Videos Optimize for Speed

There are more video’s being watch on phones all the time. If they take to long to load, they will be abandoned. You spent time and money to create the video to sell or entertain, so make sure your viewers can watch them.

With the overwhelming growth of mobile devices and the fall of Flash Player as the go to solution for video, HTML5 video optimization is a real factor. Since most animated GIF’s can be now done as HTML5 GIF’s, you should concentrate on optimizing video’s as HTML5 videos.

This year MP4 video has become the favorite way to stream video to HTML5 without Flash or another driver.

Here is a great article that goes into details on how to optimize your videos.

http://bit.ly/2b2hPOF

DON’T BLOCK CSS, JAVASCRIPT OR IMAGES

Back in the old days Google would only index your text information from your website. That has changed greatly. If Google can delve into your CSS and Javascript files it can vastly improve the mobile SEO factor.

So optimize your CSS, Javascript or images and compress and minify them. Since speed is so essential now days make sure your CSS, Javascript are optimized and compressed so the load faster.

Cache data locally

You won’t know what type of data network the phone user has or how poorly it performs. With the HTML5 features you can heavily cache your Data, Images, Static Resources, CSS and others. This will make faster downloads of you page for people on slower or less optimal networks.

Manage requests

Think ahead when you set up your serve request. Batch your server requests where possible. Use fewer requests for external resources (scripts, images, style sheets, etc.) that have more data than making many requests with less data. This approach lends itself to using image sprites or combining scripts. It is best to eliminate redirects, but if you require redirects try to limit these to at most two, and do this server-side to minimize client-side delays.

Lazy loading

With speed being one of the biggest factors for mobile browsing, make sure you first load enough to get the page functional. Get you navigation resources up first so they can do something Only load the resources when they’re needed to save on loading times. Only load the resources when needed. For example, you can make use of the YepNope JavaScript library to load only the desired scripts you need for certain browsers. This library is usually used with Modernizr to load the desired JavaScript library based on features that the particular browser supports. Also, we recommending preloading resources before the user navigates to them so that they’ll load instantly.

Place JavaScript at the bottom

Great tip: putting the Javascipt at the bottom of the page allows the user to react and navigate to the page before the Javascripts runs, which consumes resouces.

This will optimize the perceived latency because as the page is loaded stops upon encountering Javascript. Putting scripts at the bottom allows the user interface to display before the JavaScript is loaded.

DON’T USE FLASH PLAYER

Flash player is an outdated proprietary software, now out of fashion. Worse still it’s difficult to work with has bugs and security weaknesses. It does not work on a wide variety of devices now as well.

Google has problems skimming the information behind it, making it difficult to index your site.

It’s also expensive and difficult to update. CSS, Java and HTML5 are open source and easily update. In other word Flash is not worth your time and energy.

DON’T USE POP UPS

Oh how we all hate pop ups. Not only is annoying to have your load interrupted, it slows your load speed way down. It is not effective either, as it makes people flee your site.

There are some exceptions, mostly having to do with special offers on exiting a site. Otherwise it is death to your site traffic.

DESIGN FOR FAT FINGERS

While designers sometimes try to get more into a little space, action buttons should not be one of them. The number of times I have found a menu bar on a site on my phone that I could not click on the button is astounding.

Not everyone has delicate little fingers or even good eyesight. Make the buttons bold, large and easy to push For other choices, let them scroll further. It:s what phone users do after all

OPTIMIZE TITLES AND META DESCRIPTIONS

Lets not forget the basics. All titles and meta descriptions need to be locally optimized. This is so basic I almost did not include it. You can not afford to forget these basics. It’s simple just do it guys.

USE SCHEMA.ORG STRUCTURED DATA

Make your site easy to find. Structured data is the latest attempt to help search engines index your information. It really is simple in concept, just put the data where Google wants it. There is tons of information on how to set up Schema, so here is one of the best.

http://selnd.com/2b2l5cG

OPTIMIZE FOR LOCAL SEARCH

Local Optimization is one of the most under utilized SEO tactics. Simple to apply and gives great results.

Here are some great starter local optimization tricks and then a link to a comprehensive list.

Put your city in your site title meta description.
If you have room put you phone number in the title meta description.
Put your address and phone in text on your web pages.
Register your business with Google Business and verify it. This puts you on Google Maps and local directory.

Here is a great checklist from Moz: http://moz.com/blog/local-seo-checklist

Mobile Conversion Rate Optimization (Make It Sell)

Great, so you have created a mobile website, put in the SEO and tweaked it forLocal Optimization. Now the big thing, make it convert visitors into paying clients. Everything else is secondary. If no one signs up, buys something, or follows and reads your blog, it is all a waste. Conversion Rate Optimizationis the key.

Install Google Analytics

No mater how you try to optimize, you need data. Data that shows where visitors are coming from, where they went, and how long they stayed. All conversion optimization is based on this data. Without it you are just guessing, and if you are lucky you won’t royally screw up. Every decision must be data driven.

All businesses need to build a sales funnel. This shows how to gather visitors and convert them to users. The sales funnel shows when to send them emails, when to call them, when to shift from marketing to sales. All these decisions need to be data driven.

People do not use phones to browse the internet the same way they would use desktops. There is a fundamental difference in what they are looking for. Desktops are used for entertainment and getting detail information.

Mobile phones are used for entertainment of course, but for quick information. Like where is the nearest pizza parlor, where is quite often the operative term, as mobile devices are indeed mobile. They want ease of use and simple buttons to get what they want quickly. which i sn’t to say that they will not get in depth information occasionally but generally speaking, it’s for quick searches.

A lot of times the phone user is triggered by your other advertising. TV commercial, radio, billboards or even just passing by. They then look to see where they can find the product and where it is cheapest. So you have to have the site set up so it’s fast and easy to find that answer.

DIVE INTO YOUR DATA

Dive right into your data. It has an amazing amount of information you can use to optimize your site. Are they visiting you from cell phone or desktop? Which phones do not seem to be working with your site? From seeing where they are coming from, to how long they stayed on a page and if they follow your prompts.

The data will allow you A/B testing for best results. In other words, you are blind without the data. Be data driven for design and optimization.

CONTEXT IS EVERYTHING

The real meat of web design. It’s overlooked so often as to be pathetic. Offer your visitors the information they want in a form they like. Put a path from one page to another.

Now if you are looking to get the visitor to sign up for your newsletter. Make sure the pages lead them there and that you have a simple form for them to fill out.

Do you want to get them to call you for an appointment, for a quote or whatever. Design the content to make them feel safe to call you. Make sure the number is easily visible and clickable from the phone.

Wanting them to visit your shop. Include pictures of the building and a map that shows where you are. Don’t forget optimize the address on all your pages. Include a list of your hours so they know when you are available.

Now you want them to buy something. That is where the real challenge is. You have to project trustworthiness. Show them your credentials so when they hit that final payment button, they will feel safe pushing it.

Do not require special formatting on credit cards or phone numbers, take the numbers however they want to input it.

Walk them though the process and make it as simple as possible. Do not ask for any information you do not absolutely need.

If you need a shipping address ask if it is the same as the billing address so they do not have fill it in twice.

Do not interrupt the flow by asking if they would like to do more shopping.

Thank them after the payment and let them know when they will be receiving their product.

Here is a great article covering optimizing ecommerce for mobile.

http://mklnd.com/2b6JHvr

PROCESS AND STRATEGY

Have a plan for optimization and follow it. Have it written down. Life is hectic and if you do not have it planned you will forget steps.

Research, delve into the data.
Propose, using the data, what changes can you do to improve things.
Test, use A/B testing of the changes to see which works.
Check, the data you get back may not be what you expected.
Impliment, the best changes.
Repeat!

SPEED OF PAYMENT PROCESSING IS CRITICAL.

From the time that the customer clicks Finalize Payment to the confirmation page should be as close to instantaneous as possible. If your processor take 10–15 seconds you will loose over half of your checkouts. If needed change processors. You can not afford them to cancel mid checkout.

CHECK WITH YOUR CUSTOMER SERVICE REPS

Your CSR’s will be the first to find out trouble spots on your site. Address all complaints quickly.

Check With Your Clients

Email your clients feedback surveys, ask them if there are anything you can do to make their visit easier. You may be surprised at the things you are overlooking.

CRASH LANDINGS

Probably the most expensive mistakes in conversion rate optimization is a bad landing page. You are actually paying for people to come to the page usually. If the message does not match the ad, people will leave. You need landing pages to be lean and directed straight to the ad text.

Make sure that the first thing you do is answer the question they want information on from your ad. Make them want to read the rest to find out how you can help them.

Keep the design clean, non distracting and focused. Do not offer them to many choices. It’s alright if you offer them 2 choices both of which lead them further into your site. But with 3 they may become paralyzed with indecision. The best choice is 1 clear choice.

CALL TO ACTIONS ARE SUPREME

Make your call to actions

Bold, bright large and easy to push
Active, Call Now, Order Today. Get Your Copy Now. Put this on the button and have it do something now.
Leave no doubt as what to do. Make it clear to them that if they push the button this is what will happen. So they know when they push the button, they will be sent to the check out, sign up, or have the phone call.
After they push the button take them to a thank you page. This needs to explain when they will receive action. Not in vague ways. This is also where you can offer them information on other products.

USE REAL DEVICES!

After you have set it up and run simulations and think you are ready. Grab some real devices and check out the look and feel. Simulations can be off.

KEEP TESTING!

Always keep checking the data and testing out new changes. What works today may not work tomorrow.