Get your Adobe Muse site ready for Google Friendlness.
First off remember don’t panic. It’s not that difficult to make a few alterations to your sites to get them ready. We have done all the research so you don’t have to.
Why is there a sudden urgency to create mobile friendly sites?
Here is the issue:
“Time is running out for website owners who have not yet optimized their sites for mobile. As of 21 April, those websites not optimized for mobile could well see a decline in rankings as Google’s algorithmic change is put into place.”
So are your Muse sites going to miss out? Can Muse pass the test? Thats what this document will help you with.
Debunking the myths:
Myth 1: Adobe Muse does not create the responsive sites that the Google update requires.
There are three mobile designations that Google looks for:
- Dynamic HTML
- Separate URLs
Adobe Muse supports and uses the 3rd mobile designation. But don’t let the fact that it is listed as number 3 fool you. Here is a snippet from the Google Mobile SEO document:
“Google does not favor any particular URL format as long as the page(s) and all page assets are accessible to all Googlebot user-agents.”
Myth 2: My Client cannot afford to pay me to create an entire mobile version of the site, so I am stuck either completing the work out-of-pocket or suffering a blow to my Google ratings.
Although it is preferable for the overall mobile experience to create a mobile-specific site, there are work arounds.
You can make your desktop site mobile friendly with a few tweeks but this maybe just gaming Google for the time being and they could change the criteria again and we would end up in the same situation.
Myth 3: Adobe Muse offers both a Phone and Tablet layout, do I have to create both?
No. According to the Google documentation “mobile” or “mobile devices” refers to smartphones, such as devices running Android, iPhone, or Windows Phone. Mobile browsers are similar to desktop browsers in that they can render a broad set of the HTML5 specifications, although their screen size is smaller, and in almost all cases their default orientation is vertical.
They also state that they “consider tablets as devices in their own class, so when we speak of mobile devices, we generally do not include tablets in the definition. Tablets tend to have larger screens, which means that, unless you offer tablet-optimized content, you can assume that users expect to see your site as it would look on a desktop browser rather than on a smartphone browser.”
How to make your sites Mobile friendly in Adobe Muse
So you might be wondering what you should or should not do to get your sites ready. Let’s go with two scenarios.
You’re just about to start building your site, but you weren’t planning on creating a mobile version.
Our recommendation is for you to create a mobile layout so that your site meets Google’s search ranking algorithm criteria.
The Muse mobile layouts pretty much ensure that the mobile version of the site is exactly what Google is looking for in a mobile site so unless you do something really crazy on your mobile site a Muse mobile layout will pass the test first time.
Before you begin, consider the objective of a mobile site — providing lighter content for people viewing the site while on the go.
For example a cafe might want people to locate them, call to make a booking and see what the daily specials are so make sure that these options are the easiest to get to and use.
Here are a few tips for creating your mobile layout using Muse:
- Fit all of the site content inside the phone layout width. You can still use 100% width items just don’t place any content outside the design area.
- Limit your navigation options and resize your navigation buttons so that they are nice and big to cater to all different size fingers.
- Make sure your text is large enough to read on a mobile device — 14px and above is a good way to go.
- Don’t worry about optimizing your images, Muse will take care of this for you.
Your current site does not have a mobile version. Our recommendation is to add a phone version for it to pass the Google mobile friendliness test.
If you want to wing it for now, you could try the following suggestions, which are subject to change if Google change’s their mobile-friendliness criteria.
Moreover when Adobe Muse gets updated and addresses this issue natively then this work around may no longer be viable.
- Ensure your content sits inside the page width guides. You can still use 100% width items but ensure that any fixed width items like images and text areas are inside the page width guide lines area.
- You will need to use a font size of 26px or above. Now this might not match your design so you would need to make a mobile version of your site instead. But if it’s not a design issue using a minimum font size of 26px with the other suggestions above will get you passed on the Google Checker.
- Add this code to the page using the “Page Properties” HTML for
<head>: <meta name=”viewport” content=”width=960, initial-scale=1"> to allow the page passes the Mobile Test.
CAUTION: Using this method does change the the way your site operates when it first loads. Initially the site will be zoomed in on a mobile device. The user can pinch zoom or double tap to zoom out.
Implementing these changes will ensure your desktop site passes the Mobile test under Google’s current criteria.
See our example below.
Muse and the Mobile-Friendly Test
We set up the following test to check it all.
First we built a very simple mobile-only site, published it to a server with a unique domain. We then tested it in the Google Mobile Friendly checker.
Great Muse makes it all work.
Next we built a desktop and mobile version to see if the Muse redirect worked and it did. So, if you have a desktop and mobile layout it will pass the checks with the Google Mobile Friendly checker.
Finally we took the mobile layout away and just uploaded the desktop design and we got this message:
So we edited the site to ensure all the content fit into the 960 area, changed the text to 26px and added the viewport code as above. And we got this messaging confirming — yay — it all works.
So yes you can use a desktop only site with the above suggestions but this is really is a stop-gap solution. In order for a site to be mobile freindly you really need a site layout built for mobile. So again the recommendation is for a mobile layout.
If you want a truely mobile friendly site — build a mobile version of your site.
Check your links. Make sure you don’t have desktop page going to mobile pages by mistake and vice-versa.
- If you use the Google recommended HTML5 standard tag for videos or animations it is good to:
- Ensure video that’s playable on all devices e.g. using WebM, mp4 and having a fallback poster thumbnail (all included in our video widgets).
- Consider having a transcript of the video available for those using assistive browsing technologies.
- Size videos properly and make sure they don’t overflow page containers.
- Using Fullscreen API to control the fullscreen view of the video content. See link for more detailed information: https://developers.google.com/web/fundamentals/media/video/customize-the-video-player?hl=en
- Slow mobile pages. It’s very important to make sure that your mobile site loads fast. You can use Googles PageSpeed insights to discover some of the issues that might be slowing your mobile pages down. Google has some good detailed info on how to speed up pages here: https://developers.google.com/webmasters/mobile-sites/mobile-seo/common-mistakes/slow-mobile-pages