Mobile Site

Intro to Mobile Site documentation:

Purpose: Optimize performance on a mobile device

  • Smaller screen so it could be displayed better vs regular desktop screen
  • Info is more to the point and easily accessible. Ex: easy access to contacts, reservations, etc. Helps give brief overview of the company. Info is meant to be “on-the-go” just like a mobile device.
  • Speed would be more adequate for a mobile device. Faster speeds would be noted when looking at a mobile site vs regular site.

What is needed before creation of mobile site?

Manager should:

  • Have an understanding of what content/images/features they would like to be put on their mobile site. Note: Mobile sites are meant to be “on-the go”. So if a manager would like it to be like their regular site, it is highly recommended that they prepare the most basic info that would be needed in order to help customers understand very quickly.
  • Put together a list of any misunderstandings or questions they might have especially if they plan to do it by themselves.
  • Call Ciirus for any questions they might have or ask if they would like the web development team to create it for them.


To access the Mobile Site page, click:

  1. Website & Marketing
  2. Mobile Site

Menu / Page Designer

  1. Menu Text: Shows the web pages that have been made for the mobile site. They are displayed in main categories and sub categories. All these pages can be displayed in the side bar of the mobile site. If you want to move the pages around, just click the blue squares on the left side and drag.
  2. Page Name: This is for displaying the page name. This is shown in the URL when the page is accessed.
  3. Index: This is the first page that is displayed when trying to access the mobile site. You could only have one index page checked.
  4. Enabled: Used for enabling or disabling any pages of the mobile site.
  5. Search Page: This indicates whether the page is going to be set up as a search page. The mobile site already has a set template and layout for search pages; so a property manager can check this if they want a certain page to be used for searching properties.
  6. Contact Page: Indicates whether a page should be a contact page. Like the search page, it already has a set template. The page is set for if a customer has any further questions, they could send their contact info and any questions they might have.
  7. External Link: This is to show a page that will be opened on another tab. This is used if they want to access a page that is not part of the mobile website (ex: car rentals/ticket sales, etc).
  8. Delete Page: Used for deleting a page of the mobile site. Make sure that the correct page is selected (it would be highlighted when chosen) before deleting.
  9. Add Page: This is for adding a page to the mobile site.
  10. Refresh: This is for refreshing the mobile site customization page.
  11. Preview: Gives a very brief preview of the page.
  12. Title: Gives the title of a certain container in the page. All the containers will be displayed under the “title” row.
  13. Footer Text: This is for assigning a specific footer to a certain page
  14. Footer URL: This for assigning a URL on the footer of a specific page.
  15. Content Text: This is where the coding for the container of the page is placed.
  16. Up/Down: This is to switch between containers.
  17. Hill/sunrise button: This is for adding images directly from the web image library to a container. You could only have one image per container.
  18. Delete Items: Used for deleting a container in the page. Make sure that the correct container is selected (it would be highlighted when chosen) before deleting.
  19. Add Items: This is for adding a container to the page. Here you can apply codes and add text if a manager wants to add further content to a page.


  1. Enable Mobile Site: This is for enabling/disabling the mobile site. If disabled, customers won’t be able to access the mobile site.
  2. Icon Bar: For assigning a specific icon to a certain page. For instance, the magnifying glass can be set so that when clicked, it takes you to the search page.
  3. Menu Page: When trying to assign the icon to a page, it will open a dropdown box which will show you all the pages you have made so far in the “Menu/ Page Designer” tab.
  4. Theme Color: Gives the theme color that will be used throughout the whole mobile site. You can choose from the colors that are already there or make your own color.
  5. Grid Row Template: It is the code that defines where the items of the search page will be placed.
  6. Logo Image:  For choosing the logo image that will be seen on every page of the mobile site.
  7. Where the logo will be displayed.
  8. Header: It is the code that will make adjustments to every page of the mobile site.
  9. Footer: This is the code that will show how the footer will look on every page of the mobile site.