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.
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’s an image or email address in one of the table cells) the table will expand to fit the content, making it wider than it should be. If there isn’t any content that is too wide, the table will squish 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, with percentage widths, the columns will squeeze together to fit all the columns on the page at once. So, while the table cells are evenly spaced on the desktop they become unsightly and squished on mobile devices. Plus, when you redesign your iModules site, the fewer tables you have to go back and mess with the better!
There are HTML Snippets that use <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.
Another option is to use the Mobile Content Blocks. You can easily have content in a columnar format with no HTML coding needed!
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="split50left"> Your content goes here. This is the left column. </div>
<div class="split50right"> Your content goes here. This is the right column. </div>
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.
What exactly ARE <span> tags, you ask? Well, they are HTML elements that wrap sections of your content that you would like to have different characteristics than the rest. These characteristics include text size, color or the font family used. Pretty cool, right?
Well, mostly. BUT this can also allow your site administrators to use colors or fonts that aren’t part of your branding guidelines, make 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’s 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 iModules 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's 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 iModules Representative and let them know what you are looking for. The site will be 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.