NOTE: This article may be periodically updated to add additional information about the upcoming Mobile Site feature as it becomes available. Last update: April 21st, 2015.
As we recently announced, we will soon be releasing a new Mobile Site feature in order to comply with upcoming changes in Google's mobile search algorithm.
The Mobile Site feature is very simple to use and can be turned on in just a few clicks. When turned on, your website will display a mobile version to mobile users and the desktop version to desktop users - you will not need to maintain multiple versions of your content. The majority of your website content will be mobile-ready by default, but certain content on your website may require modifications in order to ensure your website looks great on mobile devices.
We will release a more detailed guide on how this feature works in the coming days, but this article is intended as a pre-release guide to getting your website ready for mobile. We recommend reviewing this article if you intend to use the mobile website feature. Once the feature is released in the coming days, we will provide a complete guide on enabling your Mobile Site including the information below - check back soon!
Images
By default, images inserted into the body of your website via the Image button in the Easy Editor are not responsive. There are two easy ways to ensure that your images are optimized properly for mobile devices:
1) Use the 'Click to Change' image boxes.
Many page types and Web Page layouts include 'Click to Change' image boxes where you can insert your images. Any image inserted through this tool is automatically set to be responsive.
2) Add the "img-responsive" class to your images.
For existing images inserted via the Easy Editor, or for images on page types that do not include 'Click to Change' image boxes, you can add a simple class declaration to ensure they act responsively. To do this, click on the image you would like to make responsive and click on the Image button.
In the Image Properties popup window, click the "Advanced" tab.
In the field "Stylesheet Classes", enter the class "img-responsive" without quotes. In the field "Style", if there is an existing height and weight, delete it from the field.
Click OK to apply the change. This image will now act responsively on mobile devices.
Tables and Layout
It is not uncommon to use tables to organize information on your website, but this causes problems when viewing on mobile devices because tables do not act responsively. If you are using tables on your website for layout purposes, you may experience problems with horizontal scrolling as they will not automatically resize for mobile devices.
We highly recommend that you use our Web Page Layouts instead of tables to lay out your content. The Web Page page type includes 26 different content layouts, including a variety of multi-column layouts and layouts with Click to Change image boxes. Many of these layouts will allow you to replicate an existing table layout without using tables, and all 26 layouts are automatically responsive and mobile-friendly.
To select a layout, first edit your Web Page. In the menu on the left, select 'Change Layout' and select the layout of your choice.
Many of the layouts allow you to customize further by setting the width of columns and adjusting the spacing.
JavaScript
Many of our customers use 3rd party services integrated with their website, such as JavaScript elements, social media buttons, or other external content that relies on scripts not provided by us. As we have no control over these external elements, we cannot guarantee that they will be supported on mobile and cannot assist in troubleshooting.
Flash
Flash content is not supported on most mobile devices. We recommend using non-flash video types such as MPEG4 or embedding video content via a streaming service like YouTube or Vimeo.
Frequently Asked Questions
When will the Mobile Site feature be launched?
We are in the final stages of testing Mobile Sites. While we cannot provide an exact date, check back very soon.
Can I edit my website on a mobile device?
At this time we are not releasing a mobile website editor. As always, you can log in to your account as normal on a mobile device, but the editor interface is not mobile optimized.
Why isn't my footer showing up on mobile?
In order to ensure readability and proper formatting, site-wide footers are disabled on mobile websites.
Why aren't my images responsive?
By default, images inserted into your website via the Easy Editor are not responsive. Please see the Images section in this article for details on how to make all of your images responsive.
Why is my layout not responsive?
The Mobile Site feature is turned off by default in order to allow you an opportunity to review your content before enabling the feature. To turn on the Mobile Site feature, navigate to Edit Site > Design > Mobile Site. Click the checkbox to turn on your Mobile Site, and click Save. The text you enter in the Branding field will be displayed in the header of your mobile site.
Can I change the way my mobile site template looks?
At this time, your mobile website will be assigned a default mobile template which is not modifiable. This is done to ensure that your website is properly optimized for a wide variety of different mobile devices and screen sizes.