| imodules.com Best Practices in Content Management Craig 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.

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?

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

You have options. What kind of layout do you want?

Mobile Ready Content Block (3 Columns)

Mobile Ready Content Block (3 Columns + Stacked)

Remember Code Snippets?

1.Still supported. 2.Mobile Ready Content Blocks = Version Same CSS/HTML as code snippets.

Making the WYSIWYG work for you!

Image Manager Paste from Word Strip Formatting Styling with Headers

Image Manager

Image Manager Options 1.Resize 2.Crop 3.Borders 4.Margin 5.Rotate 6.More …

Crop Images

Finding the Image Size 1.Right Click 2.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

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 tags. Strip Span Elements Removes ALL 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 = Header 1 = Header 2 = Header 3 = Header 4 = Header 5 = The others you will probably never use.

Be Conservative with the 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

Coming Soon!

Blue/Green Area Identification

| imodules.com Questions?