How to create and customize a mobile site using mSite Builder

What does the mSite Builder do?

mSite Builder (MSB) is an additional module you can add to any LibGuides or LibGuides CMS subscription. Interested in trying it out? Contact our Springy Sales Team for more info!

Don't have a particularly mobile-friendly site? MSB can help you create a mobile menu in order to quickly & easily get the most important mobile info out to your users.

MSB uses the familiar LibGuides functionality of adding pages and Assets - you can even reuse your LibGuides assets - so it won't take long to get up & running. And since Font-Awesome is built into the system, you can use those icons in your menu instead of having to buy / scour the web for freely available icons.

Step 1. Creating a new mobile site

  1. Go to Content > mSite Builder from the command bar.
  2. Click the + Add Mobile Site button.
  3. On the Add Mobile Site modal complete the details for the site:
    1. Site Name: The name of your site as it will appear in the header.
      This is also what appears in the site list table on the main Content > mSite Builder page.
    2. Description: The description appears below the header / above the menu items. Also appears in the site list table.
    3. Full Site URL: The website users are sent to when they click the Full Site link at the bottom of a site page.
    4. Search URL: If you want a search box to appear in the upper right-hand menu options, add a search URL here. If you do not add a search URL, the search box will not appear.
  4. Click Save.

Learn more

creating a new mobile site, part 1

creating a new mobile site, part 2

Step 2. Configuring the mobile site's Setup Options

Once you've created the new mobile site, you can configure and change some of the basic options on the Setup Options tab for the site before you start adding content.

Learn more

Step 3. Customize the mobile site's look & feel

You can customize most aspects of the appearance of the mobile site's pages. If you're looking to customize the styles of your pages, you can add a custom header & footer, set the box styles, and/or custom JavaScript & CSS code. The customizations can be as simple or sophisticated as you'd like.

Learn more

Step 4. Adding & managing the mobile site's pages

Adding pages to the mobile site is the first step in getting content in place (followed by adding boxes and content items). When you start adding pages to the site, you should have a general plan/outline for how and where you want your content organized. Consider putting together a list of the pages you want on the site, how they'll be organized, and what type of content you'll have on each page.

Protip: If you want to set up a set of pages in a dropdown list underneath a single menu item, you should add them as sub-pages under a single top-level page. When you add sub-pages to a top-level page, you are disabling the top-level page (you cannot view it in edit mode or on the live side) and turning it into only a top-level menu /heading for the sub-pages that you have in place.

Learn more

Step 5. Adding boxes to the mobile site

Each page of the mobile site can have any combination of the four box types (standard, tabbed, gallery and profile) added to them.

Step 6. Adding content items (assets) to your boxes

Within each standard and tabbed box, you can add one or more content items (aka assets). These are the actual content that your patrons will read and interact with, including text, images, links, etc. There are several types of content items that are also stored in your LibGuides Assets library, allowing you and your colleagues to reuse them in other guides without having to recreate them. Content items in your Assets library can be reused even if their original guide, page, or box is deleted.

Here's a list of the most commonly used content types:

  • Rich Text/HTML content item
    These allow you to add formatted text, images, tables, lists, and other rich text content to your guide. Using the built-in Rich Text Editor, you can apply styles and formatting just like with a word processor. Or, you can switch to the Source mode to edit the underlying HTML code directly.
  • Database from your A-Z Database List
    Although only Admin users can create new databases, all users can reuse them in their guides. This allows you to easily add links to related electronic resources. Plus, if those databases are ever changed (i.e. a new URL or proxy string), the changes will be reflected everywhere the database is reused.
  • Link asset
    You can easily create a list of links by adding Link assets to your guide. Once a new Link asset is created, it will be available in your Assets library so you can reuse it in the future.
  • Media/Widget asset
    The best way to embed HTML code (for things like YouTube videos or chat widgets) into a guide is with a Media/Widget asset. Once a new Media/Widget asset is created, it will be available in your Assets library so you can reuse it in the future.
  • Book from the Catalog asset
    Effortlessly create book lists on your guides. If you provide an ISBN, LibGuides will fetch the book's bibliographic info from Bowker and cover art from Syndetics. Once a new Book asset is created, it will be available in your Assets library so you can reuse it in the future.
  • Document/File asset
    Upload and create links to files in formats such as Word, Excel, PowerPoint, or PDF. Once a new Document/File asset is created, it will be available in your Assets library so you can reuse it in the future.

Step 7. Viewing the mobile site and copying its redirect code

Once you have the content of your mobile site in place, you're ready to share it with the world. Every site has a direct URL that can be used to access the site as well as redirect code that allows you to automatically redirect mobile device-based traffic for your main website to your mobile site. 

Note: Once a mobile site has been created, the public side of the site is active and accessible via its URL. Unlike standard LibGuides, there are no publication status options for mobile sites -- they are always 'published.'

Viewing a mobile site

  1. Go to Content > mSite Builder from the command bar.
  2. Click on the URL for the site from the Public URL column.

viewing a mobile site

Copying a mobile site's redirect code

  1. Go to Content > mSite Builder from the command bar.
  2. Click on the name of the site in the Name column or click the Edit Mobile Site () icon in the Actions column.
  3. On the Setup Options tab in the External Mobile Redirect box, copy the redirect code.

editing a mobile site

copying a mobile site's external redirect URL

Where does this code go?

Copy the code you find here and paste it in the HEAD section of the index/landing page of the website that you want to redirect traffic from. If you are redirecting a LibGuides site, you will put this code in the Custom JS/CSS box under Admin > Look & Feel > Custom JS/CSS tab.

Note: In order to support rerouting to your Full Site URL, mSite Builder uses a cookie. When users click the Full Site URL from your mobile site, the cookie is in effect for two minutes. This means that if that user goes to the page where your redirect code is added at any point within that two-minute window, they will continue to see the full site instead. After two minutes, they will see the mobile site again.

Related Springboards