1. 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer

2. Topics to be Discussed Content needs to be F L E X I B L E. Tables are OUT, right? A guide to Code Snippets. Making the WYSIWYG work for you. Adding Video. Coming soon!

3. More Devices = Flexible Content What’s next?

4. Flexible Content We now live in a world where our content needs to work on a wide array of devices. It needs to be flexible. What does that mean for you? 1.You have many more opportunities to reach your constituents. 2.It also means you could have a lot of work ahead of you preparing your content to be mobile ready.

5. What exactly is Flexible Content and why is it important? Flexible Content is device agnostic. It doesn’t matter what device it’s being viewed on, it still looks good! Content ALL pictures, text, links and multimedia that come together and provide your web site with substance and value. Importance If the content is broken or doesn’t work, it’s unprofessional and makes the user experience an unpleasant and frustrating one.

6. Tables are OUT, right? Yes, in most instances. Tables were designed for tabular data, or content that would make more sense laid out for analysis in an excel spreadsheet. Tables can be extremely rigid when using a pixel width to set parameters. Using this method will cause your site to inevitably break, or appear broken when viewing on a mobile device. Tables create a ton of markup. Ever tried editing tables using the “HTML” editor in our WYSIWYG? Like I said, In most instances tables are not the answer for laying out content. So, what is? Code Snippets are the alternative.

7. Tables vs. Code Snippets

8. Code Snippets 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 already available to most sites. 3.Less markup. 4.Reduces the number of templates which allows for flexibility in content creation.

9. Code Snippets What kind of layout do you want? Designblog.imodules.com/column-snippets

10. Selecting Code Snippets

13. Making the WYSIWYG work for you!

14. Image Manager Paste from Word Strip Formatting Styling with Headers

15. Image Manager

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

17. Crop Images

19. Finding the Image Size 1.Right Click 2.View Image Info

20. Finding the Image Size

21. Making the WYSIWYG work for you! Image Manager Paste from Word Styling with Headers Strip Formatting

22. Paste from Word

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

24. Making the WYSIWYG work for you! Image Manager Paste from Word Strip Formatting Styling with Headers

25. Strip Formatting

26. 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!

27. Making the WYSIWYG work for you! Image Manager Paste from Word Strip Formatting Styling with Headers

28. Header Styling

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

30. Be Conservative with the Tag 1.Sometimes they are necessary, but if overused they can junk up the HTML. 2.By default, span tags overwrite the global styling of the external CSS.

31. Adding Video

33. Coming Soon!

34. Blue/Green Area Identification

35. Hybrid/Mobile Content Module

36. 913.888.0772 | imodules.com Questions?