editSuite Help - How do I use the Mobile Sites module?

The Mobile Sites module provides control for both the mobile phone and tablet sites, and it is found in the “Edit Content” section of your editSuite. Under the “Mobile phone website” and “Tablet website” tabs you are able to control the unique styling on each site. The “Content” and “Info” tabs are used to define content that applies to both mobile sites. 

MOBILE 2.0 

Mobile Websites 2.0
, our new responsive HTML5 mobile site design, transforms your liveBooks website into a clean, easy to navigate, photo-centric experience for all mobile visitors. Mobile Websites 2.0 is found in the “Edit Content” section of your editSuite. 

 

Enabling Mobile Websites 2.0 

1. Go to the “Edit Content” section of your editSuite and select “Mobile Sites”. 

2. Go to the “Mobile 2.0” tab. The default version of your Mobile 2.0 website will be shown. It is based on the settings used on your Tablet 1.0 site. 

3. Click "Save" then the "Enable Mobile 2.0" button at the bottom of the page if you're happy with the font and color scheme you see in the live-preview editor. 

 

4. You can also customize your mobile experience. If you do like the default font and color scheme shown you can experiment with different combinations. Choose from various font and color options found in the drop down menus 

5. Use the “Preview” button to test the look and feel. Once you are happy with the results save the changes and click “Enable Mobile 2.0” at the bottom of the page. 

Once you’ve enabled Mobile Websites 2.0 your current Mobile and Tablet 1.0 Websites will be disabled. However you can revert back to your Mobile and Tablet 1.0 Websites at any time. 

MOBILE 1.0 

MOBILE PHONE SITE
 

You can have your liveBooks site respond to mobile phone visitors in three different ways: 
- Display your liveBooks HTML mirror site for your site (default) 
- Redirect the traffic to another URL. For example, if you had a custom mobile site built in the past, you can send your mobile phone users to that location. 
- Display your liveBooks mobile phone site (Recommended) 

Customizing the mobile phone site 

1. Choose a site Theme . We have provided a Custom option as well as two quick & easy theme presets: White & Black. To use a custom theme, choose “Custom” and then choose your site background, portfolio background and font colors as well as your font face and font size. The selected font color sets the color of the icons. 

 

2. Upload your “Home Page Image”. The image should be no larger than 320x240 pixels. You can prepare this image in Photoshop or any image editing program. The image will not be resized during upload so we recommend preparing the image beforehand. 

Tip: If you have a nice logo for your business, use it for your homepage instead of a picture - our experience is that the mobile phone sites look really great with logos. 

 

3. Upload your “Home Screen Icon”. Users of Mobile Safari on iPhones and iPads have the option to create website bookmarks on their home screen. The home screen is where all of the colorful square App icons show up. Most users have a few “screens” of Apps to choose from - those all comprise the “home screen.” 

If a user chooses to create a bookmark in Mobile Safari with the “Add to Home Screen” option, this is the icon that will be used. It will show up on their home screen alongside all of their other apps. Apple has specified two firm requirements: 
- it MUST be a PNG file. This can be created in most image editing applications. 

- It MUST be cropped to a 57x57 pixel perfect square. 

The iPhone or iPad will automatically round the corners of the image and add the glossy bubble effect. You just need to provide a flat, normal, 57x57 pixel square image in PNG format and the iPhone will do the rest. There is no option to crop, resize or convert the image to PNG upon upload in editSuite, so prepare this file in Photoshop or a similar image editing application. 

 

4. Click “Save” when you are happy with your choices. 

TABLET WEBSITE 

You can have your liveBooks site respond to tablet visitors in three different ways: 
- Display your liveBooks HTML mirror site for your site 
- Redirect the traffic to another URL. 
- Display your liveBooks Tablet site (Recommended) 

Customizing the tablet site 

1. Select the Type face, type size and menu style. The options for the menu style are: Capitalized, Uppercase and Lowercase. 

2. Select the site color theme. Custom clients can choose between 3 predefined themes (light, medium or dark) or the Custom option. The Custom option allows you to control the color of the navigation, pages and portfolio background. The navigation bar opacity option can be set to any value between 0% (transparent) and 100% (opaque). You can also toggle the automatic slideshow on or off for your portfolios and set the number of seconds an image will be visible before the next one appears. 

 

3. Choose your home page type: 

- The Slideshow option will display a slideshow of images composed of the first image from all your portfolios that you choose to have available on your mobile sites from the Content tab. 

- The Single image option allows you to upload a static image for your home page. Once you choose this option from the drop down the Upload image button will appear under the Homepage options drop down. The recommended size for the image is 1024x1024 px. The image will not be resized during upload so we recommend preparing the image using an image editing application beforehand. 

- The Vimeo Video option allows you to display a single Vimeo video on your homepage. Paste the video ID in the Vimeo Video ID field (i.e. http://www.vimeo.com/123456). If you are unhappy with the still-frame thumbnail that appears automatically, you can optionally upload a higher-resolution still-frame thumbnail to replace it using the Vimeo Image Replacement upload button. 

 

4. The "Do not up-res my images" check box allows you to turn the automatic up-resize feature for the tablet site on or off. You should only check this button if your website image size is smaller than the regular Scaler websites. The automatic resize may result in a lower quality of images and in this case checking the box to not up-res the images can offer better results for the tablet site. 

 

5. Upload your “Home Screen Icon” 

Users of Mobile Safari on iPads have the option to create website bookmarks on their home screen. The home screen is where all of the colorful square App icons show up. Most users have a few “screens” of Apps to choose from - those all comprise the “home screen.” 

If a user chooses to create a bookmark in Mobile Safari with the “Add to Home Screen” option, this is the icon that will be used. It will show up on their home screen alongside all of their other apps. Apple has specified two firm requirements: 

- it MUST be a PNG file. This can be created in most image editing applications. 

- It MUST be cropped to a 72x72 pixel perfect square. 

The iPhone or iPad will automatically round the corners of the image and add the glossy bubble effect. You just need to provide a flat, normal, 72x72 pixel square image in PNG format and the iPad will do the rest. There is no option to crop, resize or convert the image to PNG upon upload in editSuite, so prepare this file in Photoshop or a similar image editing application. 

6. Click “Save” when you are happy with your choices. 

INFO TAB 

In this tab you can choose if you want to display a contact and/or an information page on your mobile phone and tablet sites by checking the corresponding boxes. 

Contact information 

If you elect to provide contact information, fill in the fields you want to display. 

If you provide your physical address, we automatically build the Google Maps URL for you so when clicked, your address will show up in the iPhone/iPad Maps application. If you want to override that URL with something else, or remove it, you may do so directly in the “Map URL” field. 

Phone numbers and email addresses are automatically linked to the Phone (iPhone only) and Mail applications, as appropriate, so your users can quickly call or email you. 

 

Information page 

You can name the info page by filling in the Menu label field. If you want to display an image on your info page you can upload one in the Info Page Image. The size recommendation for the image is 250x250 px. The image will not be resized during upload so we recommend preparing the image using an image editing application beforehand. 

In the Content box you can enter the text you want to display on the info page. You can format the text using the Bold and Italic buttons and create links using the hyperlink button. 

 

CONTENT TAB 

In the Content tab you can specify which content and links you want to have displayed on your mobile phone and tablet sites. 

1. Enter a site title in the site title field. We recommend shorter site titles since longer titles might be cut off. 

2. Check the boxes for the portfolios you wish to display. 

 

3. Control Vimeo Video display on the mobile websites. Checking this option will display all Vimeo videos on your liveBooks website. The Vimeo videos need to have the mobile version enabled in order to be displayed on the mobile sites. 

 

4. Show the social media information on the mobile sites. Check this option if you want to display the social media links you defined in the Social Media Module on your mobile sites. Please note that the mobile phone site will only display the Follow button, while the tablet site will display both the Share and Follow buttons. 

 

5. Add Links to Other Content. If you have a blog or a Twitter feed page you can create links that will display on the iPhone site home page and iPad site menu bar. For each link that you want to add, click the “Add a New Link” button at the bottom of the right column of the “Content” tab. In the pop-up dialog, enter the link name and the destination URL. The link name will display on the mobile sites. 

 

6. Click “Save” when you are happy with your choices. 

A note for customers with liveBooks “Agency” websites: 

The default link name for your image categories on the mobile sites is “Photographers.” Our Support Team is happy to help you change this for you. Please contact Support, specify your site URL and what the new link name should be.

Have more questions? Submit a request

Comments

Powered by Zendesk