913.888.0772 | imodules.com best practices in content management craig juneau / web designer
TRANSCRIPT
![Page 1: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/1.jpg)
913.888.0772 | imodules.com913.888.0772 | imodules.com
Best Practices in Content ManagementCraig Juneau / Web Designer
![Page 2: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/2.jpg)
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!
![Page 3: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/3.jpg)
Be F L E X I B L E.
![Page 4: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/4.jpg)
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.
![Page 5: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/5.jpg)
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.
![Page 6: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/6.jpg)
Tables are OUT, right?
![Page 7: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/7.jpg)
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!
![Page 8: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/8.jpg)
Mobile Ready Content Block
![Page 9: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/9.jpg)
Tables vs. Mobile Ready Content Block (Divs)
![Page 10: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/10.jpg)
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.
![Page 11: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/11.jpg)
Mobile Ready Content Block
![Page 12: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/12.jpg)
Mobile Ready Content Block
You have options. What kind of layout do you want?
![Page 13: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/13.jpg)
Mobile Ready Content Block(3 Columns)
![Page 14: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/14.jpg)
Mobile Ready Content Block (3 Columns)
![Page 15: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/15.jpg)
Mobile Ready Content Block (3 Columns + Stacked)
![Page 16: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/16.jpg)
Remember Code Snippets?
![Page 17: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/17.jpg)
Remember Code Snippets?
1. Still supported.2. Mobile Ready Content Blocks = Version 2.03. Same CSS/HTML as code snippets.
![Page 18: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/18.jpg)
Making the WYSIWYG work for you!
![Page 19: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/19.jpg)
![Page 20: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/20.jpg)
Making the WYSIWYG work for you!
• Image Manager• Paste from Word• Strip Formatting• Styling with Headers
![Page 21: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/21.jpg)
Image Manager
![Page 22: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/22.jpg)
Image Manager Options
1. Resize2. Crop3. Borders4. Margin5. Rotate6. More …
![Page 23: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/23.jpg)
Crop Images
![Page 24: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/24.jpg)
Crop Images
![Page 25: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/25.jpg)
Finding the Image Size
1. Right Click2. View Image Info
![Page 26: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/26.jpg)
Finding the Image Size
![Page 27: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/27.jpg)
Making the WYSIWYG work for you!
• Image Manager• Paste from Word• Styling with Headers• Strip Formatting
![Page 28: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/28.jpg)
Paste from Word
![Page 29: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/29.jpg)
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.
![Page 30: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/30.jpg)
Making the WYSIWYG work for you!
• Image Manager• Paste from Word• Strip Formatting• Styling with Headers
![Page 31: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/31.jpg)
Strip Formatting
![Page 32: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/32.jpg)
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!
![Page 33: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/33.jpg)
Making the WYSIWYG work for you!
• Image Manager• Paste from Word• Strip Formatting• Styling with Headers
![Page 34: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/34.jpg)
Header Styling
![Page 35: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/35.jpg)
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.
![Page 36: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/36.jpg)
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.
![Page 40: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/40.jpg)
Blue/Green Area Identification
![Page 41: 913.888.0772 | imodules.com Best Practices in Content Management Craig Juneau / Web Designer](https://reader035.vdocuments.net/reader035/viewer/2022070410/56649efe5503460f94c12df2/html5/thumbnails/41.jpg)
913.888.0772 | imodules.com913.888.0772 | imodules.com
Questions?