Site Design

liveSite v8 Mobile Design Tips

So you are ready to take the plunge? If you are starting with a v8 liveSite, all the hard work has been done for you. Simply add your content to the existing Pages which are already setup with both Desktop and Mobile Themes and Page Styles.

If you are upgrading your liveSite from v7, you'll need to follow these steps and tips to get make the most out of liveSite's mobile features:

1) Create Mobile Page Styles

• Create new Mobile Page Styles for all your desktop Page Styles. However, you don't need to create one for your E-mail Page Styles.
   
• Create Common Regions for your mobile header and mobile footer with a smaller logo and fewer links so that they will fit within a mobile screen.
   
• Make sure to include a Mobile Switch Region.
   
• Replace the drop down menu with an accordion menu with larger clickable areas (you are dealing with thumbs now and not keyboards).
   
• Move the menu to the footer of the Page since top navigation take up too much space and becomes a nuisance.
   
• Add link to jump from the top of the Page to the bottom and back in one click.
   
• Make sure the Home link is easy to find.

2) Create a Mobile Theme

• If you updated your liveSite from v7, the update process made a copy of your active Theme and activated the copy as your Mobile Theme for you.  You can start with that.
   
• Be sure your Mobile Border width is "blank" or set to 100% to cover the entire screen width of the mobile device viewing any Pages.
   
• If you are using a site background, add some padding to the Mobile Border so the site background is noticeable around the entire mobile screen.
   
• Larger Primary and Secondary Buttons and clickable links such as Menu Regions should be considered.
   
• Site Wide font should be narrow by design to accommodate more content on small screens. Larger fonts may also improve the usability.
   
• Primary and Secondary Images should have no padding, and limited shadowing and border widths to prevent crowding on mobile phone screens.

3) Organize Content on your Pages

• Make sure your photos are web-ready (compressed) so they load quickly and mobile browsers don't try to auto zoom into them.
   
• Don't try to display all content that is displayed on your desktop page's. Just the "meat and potatoes".
   
• Make use of the new Custom Formats that allow you to hide and change your content if they visitor is mobile.
   
• If you display a street address, make it a clickable Google® Maps link.
   
• Product Catalogs/Details need to have smaller thumbnail image sizes.
   
• Photo Galleries need to have smaller thumbnails image sizes.
   
• Change lengthy pick list custom form fields to radio buttons or checkbox fields so they will wrap on smaller mobile screens. If form fields labels are too wide, turn them into information fields and place them above the input fields.
   
• Shorten any Countries and States data because they will be displayed as pick lists which can "break out" of the mobile border design.
   
• Monthly Calendars cannot fit within the small mobile screens, so they are displayed as weekly calendars by default when viewed by mobile visitors.
   
• You should avoid creating text area custom form fields where the Rich-text editor is enabled because it will not fit within a small mobile screen.
  
  
• Keep in mind that Dynamic Ad Regions (sliding and fading) require a predefined fixed dimension so exact placement for all mobile devices may not be possible.

4) Test

• Try out your designs by resizing a second browser and viewing the site in Mobile Mode (using the Mobile Switch button).
  
  
• Be sure to test your mobile designs on portrait and landscape phone screens.
   
• Page preview for Mobile Preview Mode within the liveSite control panel sets the Mobile Border for Mobile Page Styles to 340px automatically, which was selected because it is the width at which content begins to wrap on iPhones screens that are held upright (portrait viewing).
  
  
• Added HTML5 new input types (email, tel, number, url) to support mobile phone keyboards and video.
  
  
• Windows Mobile doesn't support google fonts but liveSite will default to the equivalent standard font. Windows Mobile also doesn't support rounded corners.
  
  
• Youtube video objects don't show thumbnails in Mobile Preview Mode.
   
• FYI: Firefox has an issue where it preserves mobile mode so if you are in mobile mode and close your browser, you are still in mobile mode when you return and login again.