Best Practices in Content Management
Craig Juneau / Web Designer
913.888.0772 | imodules.com
Topics to be Discussed
•
•
•
•
•
•
Be F L E X I B L E.
Tables are OUT, right?
Mobile Ready Content Block.
Making the WYSIWYG work for you.
Adding Video.
Coming soon!
Be F L E X I B L E.
Be F L E X I B L E.
We now live in a world where our content needs to
work on a wide array of devices. It needs to be flexible.
What exactly is Flexible Content and why is
it important?
Flexible
Device agnostic. It doesn’t matter what device it’s being viewed on, it still
needs to be presentable!
Content
ALL pictures, text, links and multimedia that come together and provide your
web site with substance and value.
Importance
If the content appears to be broken, it’s unprofessional and makes the
user experience unpleasant and frustrating.
Tables are OUT, right?
Tables are OUT, right?
Yes, but not in ALL instances.
• Tables were designed for tabular data, or content that would be better
laid out for analysis in an excel spreadsheet. Example >
• Tables can be extremely rigid when using a pixel width to set parameters.
• Tables create a TON of markup.
• What’s the alternative to tables?
Mobile Ready Content Blocks!
Mobile Ready Content Block
Tables vs. Mobile Ready Content Block
(Divs)
Mobile Ready Content Block
1. Developed as an alternative to TABLES and to
accommodate the growing popularity of
Mobile/Hybrid web sites.
2. Utilizes a combination of HTML/CSS that is
predefined and available to everyone.
3. No markup!
4. Can reduce the total number of templates.
Mobile Ready Content Block
Mobile Ready Content Block
You have options. What kind of layout do you want?
Mobile Ready Content Block
(3 Columns)
Mobile Ready Content Block
(3 Columns)
Mobile Ready Content Block
(3 Columns + Stacked)
Remember Code Snippets?
Remember Code Snippets?
1. Still supported.
2. Mobile Ready Content Blocks = Version 2.0
3. Same CSS/HTML as code snippets.
Making the WYSIWYG work for you!
Making the WYSIWYG work for you!
•
•
•
•
Image Manager
Paste from Word
Strip Formatting
Styling with Headers
Image Manager
Image Manager Options
1.
2.
3.
4.
5.
6.
Resize
Crop
Borders
Margin
Rotate
More …
Crop Images
Crop Images
Finding the Image Size
1.
2.
Right Click
View Image Info
Finding the Image Size
Making the WYSIWYG work for you!
•
•
•
•
Image Manager
Paste from Word
Styling with Headers
Strip Formatting
Paste from Word
Paste from Word
• Most of the HTML
formatting is still
usable.
• It beats writing
everything in the
WYSIWYG editor
(Logouts) .
• Notepad/Simple
Text will wipe it
clean of all
formatting.
Making the WYSIWYG work for you!
•
•
•
•
Image Manager
Paste from Word
Strip Formatting
Styling with Headers
Strip Formatting
Strip Formatting Options
Strip All Formatting
Removes ALL formatting and leaves you with bare content.
Strip CSS Formatting
Removes all inline CSS with the exception of “font” related CSS.
Strip Font Elements
Removes ALL inline styling for text as well as <span> tags.
Strip Span Elements
Removes ALL <span> tag elements.
Strip Word Formatting
Removes all of “Words” strange styling and leaves you with clean HTML. Who knew!
Making the WYSIWYG work for you!
•
•
•
•
Image Manager
Paste from Word
Strip Formatting
Styling with Headers
Header Styling
Header Styling Options
Important to use headers since they have been predefined
to use your institutions style guide.
•
•
•
•
•
•
•
Normal = <p>
Header 1 = <h1>
Header 2 = <h2>
Header 3 = <h3>
Header 4 = <h4>
Header 5 = <h5>
The others you will probably never use.
Be Conservative with the <span> Tag
1. Sometimes necessary, but if overused they can junk
up the HTML.
2. By default, span tags overwrite the global styling of
the external CSS.
Adding Video
Adding Video
Coming Soon!
Blue/Green Area Identification
Questions?
913.888.0772 | imodules.com