Craig Juneau Web Designer Topics to be Discussed Content needs to be F L E X I B L E Tables are OUT right A guide to Code S nippets Making the WYSIWYG work for you Adding Video Coming soon ID: 560414
Download Presentation The PPT/PDF document "Best Practices in Content Management" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Best Practices in Content Management
Craig Juneau / Web DesignerSlide2
Topics to be Discussed
Content needs to be F L E X I B L E.
Tables are OUT, right?
A guide to Code
S
nippets.
Making the WYSIWYG work for you.
Adding Video.
Coming soon!Slide3
More Devices = Flexible Content
What’s next?Slide4
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?
You have many more opportunities to reach your constituents.
It also means you could have a lot of work ahead of you preparing your content to be mobile ready.Slide5
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. Slide6
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.Slide7
Tables vs. Code SnippetsSlide8
Code Snippets
Developed as an alternative to TABLES and to accommodate the growing popularity of Mobile/Hybrid web sites.
Utilizes a combination of HTML/CSS that is predefined and already available to most sites.
Less markup.
Reduces the number of templates which allows for flexibility in content creation.Slide9
Code Snippets
What kind of layout do you want?
Designblog.imodules.com/column-snippetsSlide10
Selecting Code SnippetsSlide11
Selecting Code SnippetsSlide12
Selecting Code SnippetsSlide13
Making the
WYSIWYG
work for you!Slide14
Making the
WYSIWYG
work for you!
Image Manager
Paste from Word
Strip Formatting
Styling with HeadersSlide15
Image
ManagerSlide16
Image Manager
Options
Resize
Crop
Borders
Margin
Rotate
More …Slide17
Crop
ImagesSlide18
Crop
ImagesSlide19
Finding the
Image Size
Right Click
View Image InfoSlide20
Finding the
Image SizeSlide21
Making the
WYSIWYG
work for you!
Image Manager
Paste from Word
Styling with Headers
Strip FormattingSlide22
Paste from
Word
Slide23
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.Slide24
Making the
WYSIWYG
work for you!
Image Manager
Paste from Word
Strip Formatting
Styling with HeadersSlide25
Strip
FormattingSlide26
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!Slide27
Making the
WYSIWYG
work for you!
Image Manager
Paste from Word
Strip Formatting
Styling with HeadersSlide28
Header
StylingSlide29
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.Slide30
Be Conservative with the
<span>
Tag
Sometimes they are necessary, but if overused they can junk up the HTML.
By default, span tags overwrite the global styling of the external CSS.Slide31
Adding
VideoSlide32
Adding
VideoSlide33
Coming Soon!Slide34
Blue/Green Area IdentificationSlide35
Hybrid/Mobile Content ModuleSlide36
Questions?