Showit Mobile Tutorial

Last week my wife and I got an unexpected break when the kids went to a friend’s house and we were freed up to go on an impromptu dinner date. Since we were already out, we used our phone to look up a restaurant we had heard about from some friends. We skimmed the menu, viewed a few photos to make sure we’d be dressed appropriately, and then clicked on the map to get directions. We got the info we needed quick to make a decision and then had a wonderful dinner that evening.

The next day in discussing the restaurant with some guys in the office, we pulled up their website on our computer and read about the owners, the philosophy of the restaurant and some of the upcoming events and specials. It struck me that we see this scenario so often: a website that is designed specifically for mobile is so powerful for reaching a mobile audience concerned with quick info which is often much different than how we would use that same site on a desktop. This got me even more excited about what we are doing with Showit version 3 — instead of trying to force the same experience into both desktop and mobile, the all new Showit Custom Mobile will allow you to craft an experience designed specifically for the mobile customer. Let’s see how we’ll do this.

We will start by clicking the new button “Create Mobile Site”.
createmobilesite
Name that new +Site and give it a subdomain that we can use to view on a desktop but won’t be used once we have it completely configured as explained later.  We now have a copy of our site’s primary style group with the layers automatically placed on a vertical stage.

MobileStart

The stage starts at a size optimized for most devices but in the style group tab we can customize the size of this stage to make it longer along with the settings for how the edges of the site will show up with a border color or tiled image.

MobilePageSize

We can now start to rearrange the content using tools like the new group resize to make things like text and navigation bigger for easier viewing and touch navigation.  This design process takes advantage of the familiar drag and drop customization in Showit that you know and love.

MobileResize

Swap in galleries designed specifically for mobile.

MobileReplaceGallery

Add the new mobile navigation widget for simple and familiar mobile navigation.

MobileMenuIcon

MobileMenu

Publish this new mobile site and view on your desktop and mobile device at the +Site domain you setup earlier.

MobileSiteURL

When ready to make the mobile site live, go back to the desktop site and do a full publish.  In the Mobile Settings, choose Custom Mobile +Site and select that new mobile site.

MobilePublishSettings

With Showit Page Match, linking directly to a URL will automatically load either the desktop or mobile view for the appropriate device where the page names match between the desktop and mobile site.  For self hosted sites that previously needed to export and upload HTML via FTP, your domain may need to be configured to handle Page Match but the support pros are happy to help you set this up.  Once you publish your main site, your custom mobile site will then be shown to mobile visitors.

MobileFeaturedImage

 

When adding new pages or other style groups to a desktop site, the new “Copy to +Site” button will easily copy that content to your mobile site.

MobileCopyToSite

Because these two sites remain independent, there is great flexibility to create a unique experience for both desktop and mobile, but we understand that this can create difficulty and we will continue to improve the tools to seamlessly update both together.

Thanks for taking the time to learn about Showit Custom Mobile Sites. Join us in the Showiteers group if you have questions or contact our support pros who are always happy to help. I’m excited to see what you come up with when you create your unique mobile site with Showit!

Topics

Filed Under

Ethan James featured bold colors and free fonts that can be completely customized to fit your brand. INCLUDES: Stylish homepage, about page, information page, and 3 gallery pages. Custom blog page with featured posts, most recent posts and a featured categories section. Design by Crystal Lee Design View Ethan James View all designs by Crystal […]

Read More

Ethan James by Crystal Lee Design

Josephine is full of colorful collages that capture the attention of everyone, for mobile and desktop viewers alike. Display your images in this gorgeous large grid format with a static sidebar to contain your menu, ensuring your visitors can always navigate with ease. Design by The Autumn Rabbit View Josephine View all designs by The […]

Read More

Josephine by The Autumn Rabbit

Part of the Luxe Brand’s debut collection of Showit site designs, No. 001 [Timeless] is effortlessly timeless and beautifully refined. Featuring SEVEN unique page templates, No. 001 [Timeless] makes it simple to add your own text and photography. Or, get creative and make your own pages from scratch! Custom fonts and colors are professionally selected […]

Read More

Luxe Collective No. 001 [Timeless] by Jane Johnson

Learn more about Showit

CHoose a design to Start with

Brand your business like nobody's business with the drag-and-drop website builder made for creatives like you. 

No thanks

Download the free guide

Photography clients

into

Turn website visitors