The WYSIWYG Icons

GW Drupal Foundations
Classroom Training
Presented by Natasha Askew and
Megan Policicchio
What is a WYSIWYG Editor?
• 
The WYSIWYG is a module/plugin that is used across many web
publishing services other than Drupal, (ex: Merlin, WordPress, Blogger)
• 
Designed to allow you to enter text and images without web design or
coding knowledge
So basically…
Before You Use the WYSIWYG
1.  Identify the purpose of the
page
2.  Define the goal(s) for the
content
3.  Write or edit your content in
a Word document
Example
Purpose
To describe the structure of the
annual training and explain how it
will benefit the attendees.
Goal
Persuade users to register to
attend the next scheduled
training.
Break Content Into Small Pieces
• 
• 
• 
• 
Divide long paragraphs into multiple short ones
Use bullets to list related elements
Present steps in a process with a numbered list
Use subheadings to draw attention to main ideas on
the page
Write Contextual Links
•  Links should always
describe where users will go
•  Avoid use of “click here” or
similar language
•  Links to other GW sites,
external sites or PDFs
should open in a new
window
Examples
1.  Contact us if you’d like to
join our volunteer
committee.
2.  Learn how to write for the
web to engage your users
and encourage action.
Use Tables Sparingly
•  Consider solutions for presenting the information in a
different way
•  Decide if the information needs to live in one place or
can be broken up and paired with related content
•  If you must use tables, be sure to set the width to
100% so that it will scale to the user’s screen size
Additional Things to Avoid
•  Do not use italics, underline or bold
•  Do not refer to the location of content (i.e. “Refer to
the instructions below” or “Register with the link on
the right”)
The WYSIWYG Icons
• 
• 
• 
• 
• 
Bold, italics, & underline
Text strikethrough (uncommon)
Paragraph alignment (uncommon)
Bulleted & numbered list
Paragraph indenting (uncommon)
The WYSIWYG Icons
•  Link & Unlink
•  Anchor/Jump Links
•  Insert Image
The WYSIWYG Icons
•  View Source
•  Insert Horizontal Line
(uncommon)
•  Cut selection
•  Copy selection
• 
• 
• 
• 
• 
Paste (NO)
Paste as Plain Text (YES)
Paste from Word (YES)
Erase Formatting
Insert Symbol
The WYSIWYG Icons
• 
• 
• 
• 
Paragraph Format: Normal, Heading 3 (H3), & Heading 4 (H4)
Font Name (NO)
Font Size (NO)
Formatting Styles (NO)
The WYSIWYG Icons
• 
• 
• 
• 
• 
• 
• 
• 
Insert Table: ALWAYS set width to 100%
Find text
Replace text
Maximize WYSIWYG Editor to full screen
Spell Check (after entering text)
Active Spell Check (while entering text)
Templates (NO)
Separate teaser from full text
Questions?