1. Encompass Support Center
  2. Content
  3. Content Blocks

Mobile Ready Content Blocks

Print Friendly and PDF Follow

TABLE OF CONTENTS

The Mobile Ready Content Block in the Content Management System considers 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 enable 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

Adding a Mobile Ready Content Block to a page is very similar to adding a regular content block. You can find the option under Content Modules menu named Mobile Ready Content. The admin simply drags the mobile-ready content module onto a CMS page to create a control that can be edited. All CMS Admins who can add a content module to their site can add the Mobile Ready Content Block.


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 is default to the Mobile Content Block. This is a required field. 
  • Audience - The Audience sets to who can see this Mobile Ready Content. The admin can allow Everyone to view the content or allow only those logged in to view the content or only members who fit the criteria for a specific 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 saves the changes on this page and takes 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.

Layout Image Description HTML 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 display 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 display 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 display 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 display 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 display 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 display 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 display 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 display 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 saves the selection, takes you to the Build Content step, and loads the page with the selected layout. For example, if you choose the 50/50 layout, the page gets 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 the content.

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


The Apply button saves the changes and will take you back to the previous Build Content step with the content loaded in the content area. The Cancel link also returns you to the previous step, without making any changes to the content.

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


After adding the content to the layout, Click the edit option in the upper left-hand corner of the column. This opens up the editor with the content loaded to allow the admin to change the content.

The page loads in Desktop View by default, but the admin can view the content in mobile view. This is not an accurate view of what it would look like on a mobile device, but it shows how the content stacks with the content in the far left column at the top.

The Phone View only works if your site is mobile-ready. If the site is not mobile-ready, a warning message gets displayed 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, the content gets appropriately displayed on user's mobile devices.

An admin can change the selected layout after content creation and preserves. For example, if you choose 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 Backlink to go back to the Select Layout step and change the selection to the 20/80 layout. Clicking on the Next button redirects you to the Build Content step with the image and text.

If you want to go from more columns to fewer 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.

Suppose you choose to go from fewer columns to more columns on the layout. In that case, when you hit Next on the Select Layout page, the previously entered content gets displayed in the columns, and the additional columns do not display any content.

Adding a page through the 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 adding and managing regular Content Block Types. An 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.

The Mobile Ready Content Block instance 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, editing the content by selecting the pencil icon, and deleting 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 they are adding does not have a table.
  • The Mobile Ready Content Block was set up to follow the same processes as the regular content block.

 

Related articles