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...
- From your account dashboard, click to Edit your website.
- Once inside the editor, click the Mobile Editor icon located in the upper right corner to enter the mobile website editor.
- 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.
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.
- To hide an element, select that element and then click the Hide icon.
- 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.
- 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.
- 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.
- Note: This will reorder 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 Design tab.
- Click the Design tab located in the left hand sidebar.
- Click to select the Background 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...
- Click the Manage tab located in the left hand sidebar.
- Click the Display Mobile View button to turn it on or off as desired.
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.