Optimizing Your Website For Mobile Devices

In addition to the standard Desktop view, WebStarts provides you with the ability to create a mobile optimized version of your website, ensuring your site visitors are able to view your website regardless of the device they are on. Check out the video and steps that follow to see how you can optimize your website for mobile devices..

1. From your account dashboard, click to Edit your website.
2. Once inside the editor, click the Mobile Editor icon located in the upper right corner to enter the mobile website editor.
3. Click to select and then drag and drop and resize the content on the page as desired. 
   • Note: You will have limited ability to make changes to the elements on your page within the mobile editor view. To make changes not provided in the mobile view, you will need to switch back to your desktop view to make use of the full editor.

Hidden Content

A Mobile device is generally going to have much less screen real estate to work with and as such, you can choose to hide certain elements from the Mobile view to make the most of the space you have to work with. 

1. To hide an element, select that element and then click the Hide icon.
2. To unhide an element, Click the Hidden tab and then click the Visibility icon next to the item you wish to place back on the page, or drag the element directly from the Hidden section to wherever you'd like it to appear on the page.
   • Note: You won't be able to add new content to the page from within the mobile editor. If you determine you want to add a new element to the site, you can switch back to the Desktop view to do so.
3. If accessing the mobile editor for the first time, or after considerable changes have been made, clicking the Reorder Layout button will force all hidden elements to be displayed on the page. The Reorder Layout button configures an automatic layout for the header, body, and footer, and likewise, you can choose to only reorder the header, body, or footer by clicking left of the margin to select the respective section, then click the "Reorder" icon within the toolbar attached to the section.
   • Note: Reordering the layout reorders all of the content on the page, including that which you have already spent time editing, so be cautious when using this option.

Mobile View Background

You can set a Mobile specific background to your page under the Settings tab.

1. Click the Settings tab located in the left hand sidebar.
2. Click to select the Styles option and then set your preferred background color and image as desired.

Turn On Your Mobile View

By default, the mobile view of your website will not be displayed. This is to allow you to complete the optimization of your site prior to going live or to revert back to the desktop view for any future changes required. You can turn that on and off as seen below...

1. Click the Settings tab located in the left hand sidebar.
2. Click the Display Mobile View button to turn it on or off as desired.

Navigation Menu

The menu on your mobile view will be viewed in what is referred to as the Hamburger Menu view. This is represented as a small square with 3 lines which looks like a Hamburger :) A pretty standard way of displaying the menu in the mobile space. When clicked, a panel with all of the links pages of your site will be presented and can then be used to navigate accordingly.