913.888.0772 | imodules.com best practices in content management craig juneau / web designer
TRANSCRIPT
913.888.0772 | imodules.com913.888.0772 | imodules.com
Best Practices in Content ManagementCraig Juneau / Web Designer
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 towork 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!
ContentALL pictures, text, links and multimedia that come together and provide your web site with substance and value.
ImportanceIf 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.03. 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. Resize2. Crop3. Borders4. Margin5. Rotate6. More …
Crop Images
Crop Images
Finding the Image Size
1. Right Click2. 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 FormattingRemoves ALL formatting and leaves you with bare content.
Strip CSS FormattingRemoves all inline CSS with the exception of “font” related CSS.
Strip Font ElementsRemoves ALL inline styling for text as well as <span> tags.
Strip Span ElementsRemoves ALL <span> tag elements.
Strip Word FormattingRemoves 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.
Blue/Green Area Identification
913.888.0772 | imodules.com913.888.0772 | imodules.com
Questions?