Mobile Ready Content Blocks

Follow
TABLE OF CONTENTS

The Mobile Ready Content Block in the Content Management System takes into account the best practices from our Design team and makes it easier for clients to have mobile friendly sites without having to learn and be trained to work with HTML. The Mobile Ready Content Block allows you to select a columnar layout for your content and allows you to enter and edit the data in each column using a simple editor. Admins can now create content in a "table-like" pattern with the flexibility to keep it mobile friendly.  As a best practice for the future, tables should not be used for your content as they are not responsive to the various devices used by constituents.  The initial release for the Mobile Ready Content Block supports a single “row” of content at a time.

Adding the Mobile Ready Content Block to a CMS page

The process for adding a Mobile Ready Content Block to a page is very similar to adding a regular content block. A new option has been added under Content Modules named Mobile Ready Content. The admin simply drags the new mobile ready content module on to a CMS page to create a control that can be edited. All CMS Admins who have the ability to add a content module to their site have the ability to add the new Mobile Ready Content Block to their site.


Editing the control will open a new window into the flow for creating the mobile content. The first step is the content details, which allows the admin to set the Content Name, the Content Type, the Audience and the Publishing Options.

  • Content Name - The content name will default to the page name, but can be edited by the admin. This is a required field. 
  • Content Type - The content type will default to mobile content block. This is a required field. 
  • Audience - The audience sets who can see this mobile ready content. The admin can allow Everyone to view the content or allow only those who are Logged in to view the content or only members who fit the criteria for a certain Role to view the content.  
  • Publishing options - The publishing options allow the admin to determine when the content will be published. By default, the 'Publish this content immediately upon approval' option will be selected. The admin has the ability to change this option to 'Schedule this content to be published at a later date once approved.' Checking this option will display a date box allowing the admin to select the date they would like to publish the content.

The Next button will save the changes on the this page and will take the admin to the Select Layout step. The Cancel link will close the window and will not save any changes to the mobile content block. The Select Layout page has 12 default layouts the admin can select to create content.

LayoutImageDescriptionHTML auto-included
Content Block   The first option is a single column content block.  
50/50 This option provides two columns of equal size.
          <div class="snippetrow">
<div class="split50left">
Your content goes here. This is the left column.
</div>
<div class="split50right">
Your content goes here. This is the right column.
</div>
</div>
60/40 This option provides two columns that displays the left column at 60% and the right column at 40%.
          <div class="snippetrow">
<div class="split60left">
Your content goes here. This is the left column.
</div> <div class="split40right">
Your content goes here. This is the right column.
</div>
</div>
40/60 This option provides two columns that displays the left column at 40% and the right column at 60%.
          <div class="snippetrow"> 
<div class="split40left">
Your content goes here. This is the left column.
</div> <div class="split60right">
Your content goes here. This is the right column.
</div>
</div>
70/30 This option provides two columns that displays the left column at 70% and the right column at 30%.
          <div class="snippetrow">
<div class="split70left">
Your content goes here. This is the left column.
</div> <div class="split30right">
Your content goes here. This is the right column.
</div>
</div>
30/70 This option provides two columns that displays the left column at 30% and the right column at 70%.
          <div class="snippetrow">
<div class="split30left">
Your content goes here. This is the left column.
</div> <div class="split70right">
Your content goes here. This is the right column.
</div>
</div>
80/20 This option provides two columns that displays the left column at 80% and the right column at 20%.
          <div class="snippetrow">
<div class="split80left">
Your content goes here. This is the left column.
</div> <div class="split20right">
Your content goes here. This is the right column.
</div>
</div>
20/80 This option provides two columns that displays the left column at 20% and the right column at 80%.
          <div class="snippetrow">
<div class="split20left">
Your content goes here. This is the left column.
</div> <div class="split80right">
Your content goes here. This is the right column.
</div>
</div>
90/10 This option provides two columns that displays the left column at 90% and the right column at 10%.
          <div class="snippetrow">
<div class="split90left">
Your content goes here. This is the left column.
</div> <div class="split10right">
Your content goes here. This is the right column.
</div>
</div>
10/90 This option provides two columns that displays the left column at 10% and the right column at 90%.
          <div class="snippetrow">
<div class="split10left">
Your content goes here. This is the left column.
</div> <div class="split90right">
Your content goes here. This is the right column.
</div>
</div>
3 Column This option provides three columns of equal size.
          <div class="snippetrow">
<div class="split33left">
Your content goes here. This is the left column.
</div>
<div class="split33middle">
Your content goes here. This is the middle column.
</div>
<div class="split33right">
Your content goes here. This is the right column.
</div>
</div>
4 Column This option provides four columns of equal size.
          <div class="snippetrow">
<div class="split25colA">
Your content goes here. This is the left column (A).
</div>
<div class="split25colB">
Your content goes here. This is the second from the left column (B).
</div>
<div class="split25colC">
Your content goes here. This is the third from the left column (C).
</div>
<div class="split25colD">
Your content goes here. This is the far right column (D).
</div>
</div>

The Next button will save the selection and will take you to the Build Content step and will load the page with the layout that was selected. For example, if the 50/50 layout was selected the page is loaded with two content areas of equal size.

Selecting Click here to Add Content option within the content area will open a text editor to allow you to enter content. T

he admin will have the options to Preview with site colors or Preview without site colors if the site is configured for it.


The Apply button will save the changes and will take you back to the previous Build Content step with the content loaded in the content area. The Cancel link will also return you to the previous step, but no changes would be made to the content.

NOTE: When adding images it is a best practice to re-size your image before uploading them into the editor.


When content has been loaded into the layout there will be an edit option in the upper left hand corner of the column. This will open the editor with the content loaded to allow the admin to make changes to the content.

By default the page is loaded in a Desktop View, but the admin has the option to view the content in a mobile view. This is not an exact view of what it would like like on a mobile device, but it shows how the content would stack with the content in the far left column at the top.

The Phone View will only work if your site is mobile ready. If the site is not mobile ready a warning message will display to the admin letting them know they should contact their account manager for more information on making their site mobile ready. However, even if your site is not mobile-ready, this content will display properly on your users' mobile devices.

An admin can change the selected layout after content has been created and the content will be preserved. For example, if you select the 30/70 layout, enter a thumbnail image in the left content area, some text in the right content area and then decide that the content area on the left should be smaller, you can use the Back link to go back to the Select Layout step and change the selection to the 20/80 layout. When you hit the next button you will be taken to the Build Content step with the image and text that was entered loaded.

If you want to go from more columns to less columns on the layout, then when you hit Next on the Select Layout page the content that was previously entered will be displayed in the columns that remain and the content in the columns that are no longer there will be saved on the backend in case you go back to a layout with more columns.

If you choose to go from fewer columns to more columns on the layout, then when you hit Next on the Select Layout page, the content that was previously entered will display in the columns and the additional columns will display with no content.

Adding a page through site map

If your site is Mobile Ready, the content block that is added when creating a page through the site map will go into the mobile ready content module flow. If your site is not Mobile Ready, the regular content module will be added when creating a page through the site map.

Adding Content Types

The process for adding and managing Mobile Ready Content Block Types is very similar to the process for adding and managing regular Content Block Types. A new option has been added under settings called Manage Mobile Ready Content Types.

Selecting this option will open a new window with a Manage Content grid. This grid allows you to add new Mobile Ready Content Block Types by selecting the Add option in the upper left hand corner of the grid. You can also edit an existing Content Block Type by selecting the pencil icon next to the Content Block Type, or you can delete an existing Content Block Type by selecting the red circle next to the content block. By default there is a Content Block Type added to the grid that can't be edited or deleted.

The mobile content types that are included in this grid become options under Mobile Ready Content Modules.

Archiving an instance of the Mobile Ready Content Block

An admin can view an archive of the Mobile Ready Content Block by selecting the Content Archive link on the content details page.

 This will open a Content Archive grid with a row in the grid for every instance of the content block. The grid will include the following columns:

  • Date Submitted - Date and time of when the archived content was saved.
  • Submitted By - The admin who submitted the archived content's last name, first name.
  • Start Date - The start date the content should be displayed.

An instance of the Mobile Ready Content Block is added to the grid when the Save button is selected when editing the Mobile Ready Content Block. This grid supports the approval process by allowing the approval admin to go in and preview the content by selecting the magnifying glass icon, edit the content by selecting the pencil icon and delete the content by selecting the red circle.  The Back to Build Content link will take the admin back to the edit flow.

Approving mobile content

The approval process for the Mobile Ready Content Block is similar to the approval process for the regular content block. When an admin who requires approval on content creates content using the mobile content block a Content Waiting for Approval message will be displayed on the page where the content should display.

An authorized admin will receive an email letting them know there is content awaiting approval. The email will not have a preview of the content. The admin can log into Encompass and go to Approve Content in the admin navigation to review the content that has been submitted. The window that opens will display a grid that includes all content that is waiting for approval. The grid allows the admin to preview the content, approve the content or remove the content. Approving the content will remove the row from the grid and will publish the content on the site.

Additional Business Rules

  • Admins will be able to add a Module ID to the Mobile Ready Content Block. It is up to the admin to make sure the Module ID that they are adding does not have a table in it.
  • The Mobile Ready Content Block was set up to follow the same processes as the regular content block.

 

Video Tutorials

 

Have more questions? Submit a request