Google friendliness deadline

THE ISSUE: Google friendliness deadline - What it means to you and your clients.

You’ve built an amazing site, your client loves it.

The website is on the first page of Google search. Life is good, then through the grapevine you learn that Google has set a deadline for getting all sites mobile-friendly. Ahh...

Mobile navigation differs greatly from desktop. There is no mouse pointer, the orientation of the device can change, take a look at our video overview for mobile menus here:

See Article

What will it mean? What can you do?

April 21st Google launches mobile updates to their ranking algorithm. Based on Googles updates, your site will either be mobile-friendly or not and those sites that are not could suffer a ranking decrease. Google may also be working on a mobile only version of their search index which would show separate search results to people using their mobile device to search. If you do a search on your smartphone for your business you will now see a “mobile-friendly” label next to your website listing if it is found to be mobile friendly.

We already know that mobile is an ever increasing form of web traffic which is essential to any business with a web presence. It can be very off-putting viewing a desktop website on a mobile device, it certainly leads to a loss of traffic for your customer.

Biting Googles algorithmically shaped bullet can be quite hard, but creating a mobile version of your clients website holds benefits far outside of just ranking in Googles search engine.

Now that Google is pushing us all to create web versions of our sites we have a great new prospect as web designers/developers to grow our business. Customers stand to see detrimental effects to their business if they do not add mobile-friendly versions of their websites.



Let's break it down

April 21st Google will start using an update to its search algorithm that will lower the ranking of sites that are not mobile friendly.

It will probably be a week or so after the rollout for the algorithm to permeate throughout the whole of the web.

How do you see if your site will pass the mobile test? Click on the link below, paste the URL and Google will let you know if your site is mobile ready.https://www.google.com/webmasters/tools/mobile-friendly /


CAVEAT
If your site is in development and using Adobe Business Catalyst you will not be able to use this tool until the site is live.
This is because the test sites on B.C. have in them a .txt file that stops the Google bots crawling them.


Adobe Muse uses one of Googles APPROVED styles of creating a mobile site that is the “SEPARATE URL” style.

So, if you create a mobile site using Adobe Muse it will pass the mobile friendly test.

Now lets look at some pointers to keep in mind when either creating a mobile version of an existing desktop site or creating both mobile and desktop at the same time.


Page pointers.

1You can copy, paste and drag to resize images from your Muse desktop site to your Muse mobile site. Muse will resize the file in the mobile version, so you don’t need to resize all the images in Photoshop.

2Make sure that you are not blocking any of the Google bots from viewing your sites javascript, CSS and image files. By default, your Muse site will not block any Google bots so if you haven't changed this, you won't need to worry about it.

3Make sure you don't have anything overflowing the containers on your Muse mobile site page. It is very easy to do without even knowing about it. As you move things around the Muse Mobile layout, you inadvertently move something over the container guides. Good easy way to check this is:

4Make sure you have everything unlocked on your page.

5Select everything on the page. Zoom out so you can see the entire page, you should be able to see if you have anything over the container guides.

6Links, links and more links. Make a thorough check that your mobile site doesn't inadvertently link to the desktop site and vice-versa.

7As there is no mouse pointer on a mobile device, remember that hover type menus are not ideal and at very least should work on tap.

8Most Mobile browsers have some form of share button which is great for people who are on the go. But it's also a good idea to consider adding share options directly inside the site.

9It's safe to say at this point that Flash and mobile sites don't mix.

10If you are inserting a video, make sure your embed code or video player remains within the container guidelines. For instance, you may have your HTML container box set to sit within the guidelines but you iFrame code may set the video player wider outside the guides.

11Make sure your video uses a codec that is compatible with mobile devices.



Testing your site.

There are many great mobile phone emulators to test your site. Adobe Muse has a good phone and tablet emulator right inside its Preview mode where you can chose between a number of different phone and tablet types.

Of course nothing beats trying the site on a real mobile device, it’s a good idea to have both an iOS and Android device to check your site.

Speed is another thing to think about when building your mobile site. Designing a sleek site that gets to the point quickly and isn’t overburdened with too many images and graphic eye-candy can be done directly inside Adobe Muse. Some things to think about outside of Muse can be:

Minifying your CSS, Javascript and HTML (this includes removing spaces, commas, code comments and certain unnecessary characters). You can use YUI Compressor:

YUI Compressor



Check redirects.

Reducing redirects check your mobile redirect pattern.

Enabling compression, using Gzip on CSS, Javascript and HTML files over 150bytes.

Gzip



Use CDN's

Using CDNs or Content Delivery Networks. These are basically copies of your site stored on multiple servers giving faster access to the site overall. Here is a good article discussing CDNs:

See Article



Finally, here is Googles documentation on web speed:

See article



Content pointers

Mobile device resolutions are increasing, and many operators offer 3G and 4G coverage in certain areas.

However, this does not mean that a mobile site can be filled with all the eye-candy and browser wizardry that we can have in our desktop sites. It also doesn't mean that your mobile site has to be boring.



The conclusion.

So what is the balance? I'd like to tell you right here exactly what the balance is. However, each site is different, form, function and pleasing your customer come in different quantities for each website project.



Mobile sites should always function first then form.

Mobile users want to get where they are going to quickly. Quickly means both the speed at which the page loads and also the amount of clicks it takes them to get from the front page to their destination.

Making sure that your text content is succinct and to the point is vitally important. While it is not always true that mobile users are on the go, they still do not want to be scrolling through page after page of a mission statement.

If you can keep text to snippets or bite-sized descriptions and paragraphs, you're doing well.

If you need to add a more extensive amount of text, try to break it into easily digestible chunks and ensure that there is always some form of navigation available to the user.



Offer them a PDF download of a more detailed document

If you are using an image gallery on your mobile site, choosing images that convey the message are just as important as conveying the message with text.

Too many images will bog down the user experience while using enough images will enhance the experience.

Again, if a number of images are needed think about separating the images into a number of galleries, giving the user a more of a path choice.

Article Author: Dan Kellett

Dan comes to 123Muse with a background in fashion photography, videography and media creation.

He has worked with many media products as a museum interactive media designer and creative director of a large Miami based agency. Dan works to integrate media software into the Muse workflow.

Skills Highlight:

Photo & Video

Photoshop & Lightroom

Video & Audio

Looking for Adobe Muse Widgets? Looking to for Adobe Muse Training?
Copyright © 123muse.com 2015 - All rights reserved