Images
You must crop the Images 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 appropriately sized 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 scales down the image, loading, for example, 10 images that are 2000px wide on mobile, will be painful for the end-users - not only on wait time but also on data usage.
Tables/Columns
So why NOT tables? Tables use a rigid structure that defines rows and columns and usually has a set width. Say, for example, we had a 600 pixel-wide table on a page of our site. Even with device detection or a hybrid template applied to that page, the content can only flex so much if there are widths defined (besides 100%, which we will get to shortly). So on an iPhone screen, a 600 pixel-wide table will shoot off of the right side of the screen, instead of flexing down to fit comfortably in the available viewing space (which, by the way is only about 320 pixels!).
Well, what about percentages instead of hard-defined widths on those tables? Tables that are set to be 100% wide will flex better than a fixed pixel width, but if your content is too wide (maybe there is an image or email address in one of the table cells), the table expands to fit the content, making it wider than it should be. If there isn’t too wide content, the table squishes all the table cells to fit next to one another, making the content almost unusable!
Besides the width problem, table columns cause a different issue. As mentioned above, the columns squeezes together with percentage widths to fit all the columns on the page at once. While the table cells are evenly spaced on the desktop, they become unsightly and squished on mobile devices. Plus, the fewer tables you have to go back and mess with when you redesign your Encompass site.
There are HTML Snippets that use <div> tag to allows you to use columnar layouts instead of tables, so your information displays appropriately 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.
Another option is to use the Mobile Content Blocks. You can easily have content in a columnar format with no HTML coding needed!
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 snippets are removed. You 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 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>
Fonts/Styling
Changing the style of text (e.g., color, font, font size) using the Content Editor overwrites what is added 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.
Span Tags
<span> tags are HTML elements that wrap sections of the content that you want to have different characteristics than the rest. These characteristics include text size, color, or the font family used. Pretty cool, right?
This also allows your site administrators to use colors or fonts that are not part of your branding guidelines, make the text too big or too small, etc. It is totally up to the discretion of the admin as to what their text looks like. How can this be bad, it gives you direct control over your content! It is NOT a bad thing until you sign up for a redesign of your site and then have to go into every single page that has this kind of custom styling on it!
The Encompass Design Team can do a lot, but anything added with the text editor will overwrite what we have put in place for you in the site’s CSS (Cascading Style Sheet). <span> tags are the “dynamite” in a game of “Rock, Paper, Scissors”, there is no way for the CSS to win when spans are used.
So do yourself and any other admins a favor: when you want a global site change (say, changing the main font from Arial to Verdana or making all the text bigger), just call up Application Support or your Encompass Representative and let them know what you are looking for. The site gets updated all at once and, in the future, you won’t have to worry about some text looking weird compared to the rest of the site.