Mobile Site

From Showit Wiki

Showit's Mobile +Site feature allows you to create custom websites optimized for the mobile browser that does not support Flash. These sites are published entirely in HTML ensuring support for the iPhone, iPad, and other non-Flash ready devices.

What is html5?

CREATE A MOBILE +SITE

To create a mobile +Site click on the Create +Site button, then select Mobile/HTML from the drop down.

Once you create your Mobile +Site you will be able to choose from the Mobile Styles. You can create a mobile +Site from one Mobile Style, or use pages from all four to build your own custom style. Creating and updating your mobile website is familiar since it uses Showit's +Site feature.

These mobile +Sites are entirely HTML based, which include HTML5 components like video. The benefit is support for the iPhone, iPad, and other devices that don't support Flash. But, it also means some of the animation features and layer effects you're accustomed to using in Showit will currently not be available.

Make sure to watch the tutorial videos inside Showit (View >> Show Get Started) to get rockin' on your mobile site.

SETUP PAGE STYLE

It is important that you define your Style Group settings before you begin building your site, as the text areas (like navigation) and background area are using the Colors and Fonts from the Style tab.

REPLACE CONTENT

When designing your mobile website, it is important that you not delete layers to replace them. To replace a layer (video, image, background, etc.) in one of the Mobile Styles you should use the Replace Layer feature. The Replace Layer Content option is found by hovering over an item in the Media Library panel. Highlight the layer on the stage you want to replace, and then click Replace Layer Content.

If you find you do not want a layer at all on your site, you can then delete. To get that layer back, you need to copy it from the main Mobile Style that you choose.

The right side panel of all Mobile Styles is a guideline for replacing header, footer, and background images. If an image you use to replace the style images is not sizing correctly, you will need to create a custom image file to the dimensions provided.

Once you replace the content in a design and customize, you can use Preview to see what the HTML will look like. This is a standard HTML view, but it is important to note that different browsers and mobile devices may look slightly different. There is no Preview Online for mobile +Sites as it would look the same as the Preview. Once you are ready, click the Publish button to get your site online.

SMUGMUG INTEGRATION

Mobile +Sites support SmugMug integration through the SmugMug Authorization feature. Once you complete the authorization images will appear in your Media Gallery. You can then populate the mobile gallery.

SET MOBILE REDIRECT

Before your main site will be redirected on mobile devices, you must set the Mobile Redirect URL from the site you want to redirect from.

To do this, under the site you want to redirect (this will generally be your main site), click on Site >> Settings....
Under the Information tab you will see the field Mobile Redirect URL:. In this field enter the complet URL, including http://, for the mobile +Site it should direct to.
Click Save
Note: It is important to remember that when hosting your own HTML, you will need to reupload the HTML files to your web host when you have edited anything in the Site >> Settings menu

CREATE CUSTOM MOBILE +SITES

Mobile +Sites offer freedom to create and design what you want from your mobile site. If you understand HTML and CSS and feel adventurous you can also dive in and explore how to create a custom HTML Template from scratch. Beware that inaccurate code will generally screw up your entire mobile +Site, so code with care. ;-)

SAMPLE MOBILE +SITES

The following are some links to some sample mobile sites created by Showit:

Video

Video for mobile devices is very difficult because as it stands the different devices support different video types. The Mobile +Sites will include the appropriate HTML5 tag to include the video, but if the device does not support the video it won't be able to view it. There is more info on specifics on the Video page and we will continue to expand our docs to indicate which devices support which kind of video.