2. ENGAGING CONTENT FOR THE WEB
Writing content for the web is a bit like
creating content for a flyer. The content
needs to be succinct and immediately
engaging. It needs to have a clear call
to action and above all, it needs to be
relevant for your audience.
Keep it simple – Imagine you are
explaining your project to a person
who does not know anything about it
yet. Remember you may have
contributors for whom English is a
second language.
By applying the 7 key principles you
give your Commonplace the best
chance of engaging the greatest
number of people.
7 KEY PRINCIPLES
1. SHORT SENTENCES.
2. USE TITLES. BREAK UP THE CONTENT.
3. AVOID JARGON AND ACRONYMS.
4. USE QUESTIONS.
5. COMMUNICATE VISUALLY.
6. USE DIVERSE MEDIA.
7. MEETING ACCESSIBILITY STANDARDS.
4. SHORT SENTENCES. TITLES. BREAK UP THE CONTENT.
SHORT SENTENCES
SENTENCES NO LONGER
THAN 20 WORDS
CLEAR CALL TO ACTION
CLEAR IMAGES
DIRECT QUESTION
5. SHORT TITLES
NICE IMAGES AND PHOTOS
USE LISTS TO BREAK
UP CONTENT
CLEAR PAGE TITLES
NO JARGON OR ACRONYMS
6. COMMUNICATE VISUALLY
BEFORE / AFTER VIEWS
CLEAR LABELS
SAME ORIENTATION
AND VIEWPOINT
SKETCHES
AND VISUAL
IMPRESSIONS
3D IMAGES
7. USE DIVERSE MEDIA
EMBED VIDEOS TO BRING
YOUR PROPOSALS TO LIVE
There are many ways to
communicate your proposals:
Videos/ Animations
We can easily embed youtube or
Vimeo clips into your Commonplace.
Slides/ PDF
We can both link to or embed PDF
documents.
Webinar and online Q&A
Like to host an online community
meeting? You could record it as a
webinar and make it available online
as part of your Commonplace.
8. MEETING ACCESSIBILITY STANDARDS
Accessibility standards refer to good
practice in making websites such as
Commonplace accessible to people
with a range of abilities. This includes
people with dyslexia, people with
blindness and low vision or people
with impaired motor skills.
We will help you meet these
standards. When you create content
for your Commonplace please follow
the 3 tips for making your content
accessible.
3 TIPS
1. AVOID TEXT IN IMAGES
2. DEFINE DESCRIPTIVE TEXTS FOR IMAGES
3. MAKE LINKS DESCRIPTIVE
9. 2 reasons to avoid text in images:
1. Screen readers convert content of
a web page into voice. When they
come across images they cannot
read text that is part of the image or
know what the image represents
without being told.
2. You might have heard of
‘responsive layouts’. This means that
the content of the website adapts to
the device users are using, this may
be a smart phone, desktop computer
or tablet. Often this means that
images will scale to fit different
layouts.
Something that may read OK on a
desktop may become very small and
illegible on a mobile device.
WRONG:
TEXT IN IMAGES BECOMES ILLEGIBLE ON SMALLER DEVICES
AND SCREEN READERS CAN’T READ ITS CONTENT.
AVOID TEXT IN IMAGES
10. DEFINE DESCRIPTIVE TEXTS FOR IMAGES
A BETTER TEXT WOULD BE:
ARIAL VIEW OF JUNCTION IMPROVEMENTS ON
GREAT NORTH ROAD AND WATERS BAY, INCLUDING
A SEGREGATED CYCLE LANE AND SEVERAL
SPEED REDUCTION MEASURES.
When a screen reader encounters an
image it won’t know what to read about
it unless you’ve supplied the
description.
This is called ‘descriptive’ or ‘alternative’
text. Imagine describing the content of
the image to a person who cannot see
it. Describe what it communicates rather
than just what it is.
WRONG:
DON’T JUST CALL IT ‘PROPOSAL PLAN’
11. MAKE LINKS DESCRIPTIVE
WRONG:
AVOID LINKS THAT JUST SAY ‘HERE’.
Avoid links that just state ‘click here’.
Describe what people will see once
they click the link.
Why is this important?
1. It helps your audience to orientate
themselves once they click the link.
2. The screen reader will read out all
links. If they are only named as ‘here’. It
will read out only ‘here’ and ignore any
text that may be before or after the link.
PROVIDE CONTEXT AND
SET EXPECTATIONS
12. THANK YOUAny questions or suggestions? Please
don’t hesitate to contact your account
manager or email:
hello@commonplace.is