Best Practices for Content Management

Follow

Visit the Design group's blog for best practices for your mobile (and general) content management.

TABLE OF CONTENTS

Images

Images must be cropped before you upload them.  Do NOT use Properties in the Image Manager to set/change the width and height of an image.  

Why?  Your site's CSS (Cascading Style Sheet) is set to display images so they are sized properly for all types of devices.  If you set a specific height and width in Properties the CSS is ignored.

Please keep in mind:  Although the CSS will scale down the image, loading, for example, 10 images that are 2000px wide on mobile is going to be painful for the end user - not only on wait time but on data usage as well.

Tables/Columns

Unfortunately, tables are not mobile-friendly.  They are generally too rigid to display on mobile devices.  

iModules Design Team has created a series of HTML Snippets using the <div> tag that will allow you to use columnar layouts instead of tables so your information displays properly on mobile devices. You can copy and paste multiple snippets to create rows of columnar data, similar to how tables are set up, giving you the freedom to style your page the way you want without worrying about your mobile users.
See the Design Blog for more information.

Tables/Columns FAQs

I used the HTML column snippet but I’m not seeing columns. The content looks stacked.

When viewing your work in the content editor, the content won’t look like it is going to display properly in columns but it will! Once you save your work and look at it on the page, you’ll see the columns. 


I used the HTML column snippet and saved my work, but the columns seem “off”. What’s wrong?

It is possible that during the editing of your content, some of the HTML snippet was removed. You will want to review the HTML for the content and make sure the following is true for each section or row:

  • At the beginning of the row, you will need to see <div class="row">
  • There needs to be a starting <div> tag for each column, something like <div class="split50left">
  • Between one column and the next you need to see </div>
  • For example:

<div class="row">

<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>

See the Design Blog for more information.

Fonts/Styling

Changing the style of text (e.g., color, font, font size) using the Content Editor will overwrite what has been put in place for you in your site’s CSS (Cascading Style Sheet) and put in <span> tags. When they make changes, your site administrators could use colors or fonts that aren’t part of your branding guidelines.  There's no way for the CSS to win when <span> tags are used.


To make sure your site's CSS is used on all your pages (and to avoid <span>  tags), use the Paragraph Style dropdown in the Content Editor to style your text and headings.
See the Design Blog for more information.

 
Have more questions? Submit a request