Modify pages for tablets and smartphones

Updated on 20-October-2016 at 10:16 AM

Business Catalyst allows you to create device-specific websites such as mobile and tablet sites. The mobile templates feature gives you control over the way your site displays on a range of devices.

Note: This feature is only available with certain site plans. If you do not have access to the below templates, you may need to upgrade your plan type.

There are two methods you can use to cater for mobile and tablet devices with Business Catalyst:

To decide on the method that best suites your needs, determine which of the following applies to your site:

  • If the mobile version of your site has the same content with different templates and styles, use the Responsive page templates method. 
  • If the mobile version of your site has different templates, styles, and also has different content, use the stand-alone mobile websites method.

For more resources on responsive page templates versus stand-alone mobile sites, see the  related links section.

Enable mobile and tablet support

To use either the responsive templates or the mobile website features, first enable mobile and tablet support.

  1. Select Site Settings > Mobile Support.
  2. Do one of the following:
    • To enable stand alone mobile websites, specify a Phone and Tablet content folder. For details, see Set up stand-alone mobile websites .
    • To enable responsive page templates, click Enable next to Mobile Templates.
  3. Click Save

Set up responsive page templates

Responsive templates allow you to create mobile and tablet versions of a page template. When a site visitor browses your site using a mobile browser, the relevant page template is wrapped around the page being viewed.

To use responsive page templates, first enable the feature as described in the section above. Once enabled, page templates display tablet and phone content tabs as shown below:

For details on working with page templates, see  Working with templates .

Customize the device-specific templates

  1. Open a page template by selecting Site Manager > Page Templates, and clicking a template from the list.
  2. Select the device-specific template to update:
    • Desktop Content - This template is the default version of the template that is used for all standard desktop web browsers. It is also used by default for phone and tablets if you do not specify any content for these device-specific templates.
    • Tablet Content - This template is used when the customer views the website in a tablet device. Leave blank if you want to use the default desktop content
    • Phone Content - This template is used when the customer views the website in a mobile browser. Leave blank if you want to use the default desktop content
  3. Modify the template content, and then click Update.

Access mobile and tablet templates using File Manager or SFTP

You can also access mobile and tablet templates through SFTP. For details on connecting to a Business Catalyst site using FTP, see  Connecting to your site using SFTP / FTP .

Once you have connected to your site, navigate to the /templates folder. Within this folder, you can see three versions of each page template on your site in the below format:

  • /Templates/template-name.html
  • /Templates/template-name_tablet.html
  • /Templates/template-name_phone.html

The file with _tablet appended reflects the tablet version of this template and the file with _phone appended reflects the phone version of the template.

To edit one of these templates, simply download the relevant file, make the necessary changes, and reupload this file with the same filename. 

Note:

Ensure that you have the {tag_pagecontent} tag available in the template as this tag determines where your page content is inserted into the template.

Set up stand-alone mobile and tablet websites

Business Catalyst allows you to create a separate website for mobile and tablet visitors. These websites are stored in a separate folder on your site that you can specify.

Unlike responsive templates, a stand-alone mobile website allows you to not only customize templates but also the page content. 

Set up the mobile pages and folders

  1. Create two folders. One folder for mobile pages, and another for tablet pages. Name these folders appropriately, as they are used in the following steps.
    For details on creating folders, see Upload files to the site .
  2. Inside the respective folders, add the mobile and tablet versions of your site pages.,

    Example: In the /mobile folder, add an about.html page customized for mobile devices.

    Warning: The mobile pages in the /phone and /tablet need to have the exact name and extension in order for the redirects to work.


    When a site visitor views the about.html page in a mobile browser, they are redirected to the /mobile/about.html version of the page.
  3. Once you have created all the customized mobile and tablet versions of the pages, select Site Settings > Mobile Support in the admin of your site.
  4. From the phone and tablet content menus, select the two folders you created previously for both Mobile and Tablet versions of your site.
  5. Click Save.

Site visitors are redirected to the mobile or tablet folders when browsing your site using a mobile browser.
Example: When a site visitor views the /about.html page from a mobile device, they are  redirected /mobile/about.html. 

Ensure that all navigation menus and links are pointing to other pages that contain a mobile version. 
Example: Your mobile home page should have a menu that only links to other mobile compatible pages.

Related links