Transcript Click to add title

This presentation
has been adapted
from a version
generously shared
by Kevin Smith at
Parkdale
Community Legal
Services
Enhancing Your Clinic’s Web Presence
Presentation by Fiona MacCool,
CLEONet Project Manager
www.cleonet.ca
Agenda
1. Preliminary Considerations
2. Phases in web site development
3. Intended Audience/Vision
4. Structure/Flowchart
5. Design Issues
6.Content development
7. Ongoing Maintenance
1 – Preliminary Considerations
First some preliminary considerations:
1.
WEB HOST

You need to find a company to host your
web site
You can rely on a local ISP (Internet
Service Provider) and have your hosting
bundled with connectivity you are already
paying for
You do not have to bundle these together
so ask around to see what web host other
social service agencies use and trust.
Your web host doesn't have to be in your
home town, it could actually be anywhere
in the world, as long as it is accessible on
the Internet.
Also, remember hosting has gone WAY
down in price in the past 5 years. You can
host a dynamic site with tons of add on
features for less than $15 per month.
Try Siteground if you are interested in
Open Source free web applications that
can be installed for free.





1 – Preliminaries [ cont’d]
2. DOMAIN NAME

If you want your site to have a
unique Internet address like:
www.abclegalclinc.org instead of
www.TorontoISP.com/abclegalclini
c you have to register a domain
name.

your web host can help you with
this

One place where you can pick up
a domain name is with Network
Solutions:
www.networksolutions.com
1 – Preliminaries [cont’d]
3. WEB PAGE SOFTWARE






you can purchase a web site development
program (such as DreamWeaver, or
Microsoft FrontPage)
Recommended - You can use a Content
Management System (CMS) which will have
done the programming for you and allow you
to maintain it easily through a web-based
interface
Your web host may offer a web-based site
builder tool that will use templates that you
can choose from
You can download the web site template
LAO developed for clinics (the Rexdale web
site used the LAO template)
If you are using a volunteer or a college
student they may already have some web
site development program or template.
You can write a web site in .html but it is a
lot of work
2. - Phases in site development
Phase 1
Site
Definitio
n
&
Plannin
g
Phase 2
Informati
on
Architect
ure
Basic
Structure
Phase 3
Site
Design
Elements
Phase 4
Site
Construct
ion
Content
Phase 5
Site
Publishin
g
&
Promotin
g
Phase 6
Tracking/
Evaluatio
n/
Maintena
nce
Phase 1 – Site Definition
VISIONING –
Have a visioning or brainstorming
session with all staff and board where
you talk about a web site vision - what
do you want your web site to do for
your clinic? Your board? Your
community?
Start by asking these tough questions as
an entire organization:
•
•
•
•
What are we trying to accomplish with
our web site?
Who will be involved in the day to day
work of maintaining the site and how
can this be shared?
What will and will not translate well into
the online world?
What makes your site different? What
web sites are already out there that
you can link to or work with?
Phase 1 – Site Definition
VISIONING –
Start by thinking of the three main
things a web site can do:
Provide information
What information do you want to
provide and how can you translate
it best online?
Gather information
What information could your clinic
get from users of your web site
that would help you in your work?
Allow people to work together
online
For what purpose? With whom?
How would we best facilitate this
work? What will NOT translate
well online?
Phase 1 – Site Definition
VISIONING – continued


Will your site be fairly ‘static’? – an online
‘virtual clinic pamphlet’
- ORWill it be ‘dynamic’, and offer:

downloadable PLE materials

interactive campaign or community
organizing materials,

event or workshop registration

online fundraising

member & board member recruitment

blogs to allow your community to provide
comments on your work or on specific
issues

online intake assessment forms

password protected areas for clinic staff
to archive documents

an e-mail bulletin tool to keep users up
to date on your activities
Site Definition [cont’d]
Who Will Visit?
Clients
Local
Agencies
+ other
clinics
Community
Groups
www.abclegalclinic.org
Media &
Politicians
Broader
Community
Site Definition [cont’d]
AUDIENCE
Your ‘audience’ will be viewing the
web site for a specific reason and
it is important to know exactly
what they are looking for when
they visit the site. Keep asking
yourself why would they bother to
visit your site?
Keep in mind:

Audience Characteristics (age,
literacy, language)

Information Preferences (print
vs. electronic)

Computer Specifications
(broadband vs. dial up)

Web Experience
(limited or savvy)
Site Definition [cont’d]
Possible Vision Statement:




Our web site will describe our
services and help our clients get
the legal information they need
Our web site will provide our
community with tools for self-help,
community development and help
us organize movements for social
change
Our web site will be a tool in
helping our clinic to be more
accessible
Our web site will be a tool for
recruiting members of our
community to our membership,
our board, and our actions and
campaigns
Phase 2 - Information Architecture
Brain
Storm
Concept
Map
Do a brain
storming
session
for
possible
content with
audience in
mind
Develop a
‘concept’
map’
to get an
idea of
rough
structure
Flow
Chart
Put together
a ‘flow
chart’ all the
elements
in a
logical flow
Story
Boards
Create
story boards
of the web
pages to
put all the
elements
together
Information Architecture [cont’d]
General Clinic Information
Contact
Info (hrs,
Address,
Phone #)
Map
of
area
History
of
Clinic
& Area
Clinic
Mission
& Vision
AGM’s &
Annual
Reports
Strategic
Plan
Newsletters
& Other
Archives
Information Architecture [cont’d]
Clinic Services Information
Who We
Serve &
Don’t
Serve
What
We Do
& Don’t
Do
Referrals/
Specialty
Clinics
Intake
Hours
Newsletters
& Other
Archives
Information Architecture [cont’d]
Dynamic Content:
In The News
[feeds from CLEONet]
Legal
Victories
Campaigns
& Demos
PLE
Materials
[feeds from CLEONet]
Press
Releases
Staff
Milestones
Information Architecture [cont’d]
Dividing web site content by audiences
What to expect
from ABCLS
Events and
Workshops
PLE
& Self-Help
Materials
Client
Testimonials
How to
Make a
Complaint
Community
Members
Getting involved
in Campaigns
& Actions
Becoming
A
Member
Board
Recruitment
Volunteer
Statement
Employment
Opportunities
Community
Groups
Organizing
Tips &
Info
Group
Functioning/
Governance
Civic
Engagement
Meeting
Tips &
Info
CLW
Contacts/
Requests
Community
Agencies
Agency
Contacts
@ ABCLS
PLE
Materials
Resources
to help
Agency clients
Workshop
Requests
Distinguished
Alumni
Where Are
They Now?
Making A
Donation
Lawyer
Referral
Application
Clients of ABCLS
Alumni,
Other Clinics
Archives:
briefs
submissions
Information Architecture [cont’d]
CONCEPT MAP
A diagram with nodes or
cells containing concepts,
items or questions, and
labelled links with
direction arrows to
associate them with each
other.
Helps to explore new info
and relationships, to
design structures or
processes (web site in
our case)
You can do this with sticky
notes on a wall – very low
tech!
Information Architecture [cont’d]
FLOW CHART
A flow chart is more formal
type of concept map. It is
generally a tree rather
than a ‘spider’ shape.
A web site flow chart will
have the home page or
main navigation pages at
the bottom or side, and
flyout pages and subpages branching off
A flow chart will help you
clarify the relations
between the parts.
Information Architecture [cont’d]
STORYBOARDS –
You can create ‘storyboards’ as a
page by page representation of
your web site. The one on the
left has six parts:
1.
2.
3.
4.
5.
6.
PROJECT ID – your name, web site
project name & date started
PAGE ID – screen ID, page title and notes
for this page
DATE - date of creation/editing – to keep
track of updates
PAGE DRAWING – the content, graphics
and any media pieces – you can cut and
paste to your web page from here
NAV - the navigation to/from this page of
the site (from the flow chart)
PROGRAMMING NOTES – e.g. – list of
hyperlinks , names of graphics files,
navigation breadcrumb, design elements
– font type, size, formatting of
headings/sub-headings (with CSS this is
stated once & copied to all pages)
Sample Home Page “Wire Frame”
Example of a basic “site map”
H om e P age
L e g a l R e s o u rc e s
N ew s
E v e n ts
Ab o u t C L E O N e t
C o n ta c t U s
F u n d e r lo g o s
In tro b lu rb
L e g a l T o p ics list
In d e x p a g e in c lu d e s
L e g a l T o p ics
F e a tu re d R e s o u rc es
L a te s t R e s o u rc e s
S e a rc h fo r R e s o u rc e s b y
c a te g o ry
In d e x P a g e in c lu d es
B ro w s e b y to p ic
S e a rc h
In d e x o f a rtic les
In d e x P a g e in c lu d es
B ro w s e b y to p ic
S e a rc h
In d e x o f a rtic les
P ro je c t b ack g ro u n d
S id e b a r link s b o x:
C a m p a ig ns a n d L a w
R e fo rm N e w s
S id e b a r link s b o x:
C o n te n t-s h a rin g
c o n ste lla tio n
F e a tu re d S id e b a r lin ks to :
L a w F o u n d a tio n fu n d in g
a n n o u n c em e n t
In ju re d W o rk e rs P h oto
E xh ib it
C lin ic N e w s le tte r S h a rin g
C o n ta c t U s p a g e inc lu d e s fo rm
w ith va rio u s o p tio n s a n d lin k to
N e e d L e g a l h e lp
A ls o inc lu d e s a s id e b a r
m e ntio n in g th a t w e c a n d o a
p re s e n ta tio n o n C L E O N et fo r
c om m u nity o rg a n iza tio ns .
S e c o n d le v e l s u b -p ag e s
S e c o n d le v e l s u b -p ag e s
S e c o n d le v e l s u b -p ag e s
S e c o n d le v e l s u b -p ag e s
S e c o n d le v e l s u b -p ag e s
S u g g e s t a re s o u rc e
S u g g e s t a n e w s a rtic le
S u g g e s t a n e ve n t lis tin g
A b o u t o u r T e am
F e e d b a c k S u rve y
G e t C L E O N et res o u rc e
h e a d lin e s o n yo u r s ite
G e t C L E O N et n e w s
h e a d lin e s o n yo u r s ite
G e t C L E O N et e ve n t
listin g s o n yo u r site
P ro je c ts a n d P a rtn e rs h ips
S e e b e lo w fo r th ird le ve l
S u b sc rib e to o u r e -m a il b u lletin
W ha t’s N e w b o x w ith lin k
G e t In vo lve d b o x w ith lin ks:
1 .S u b sc rib e to o u r em a il b u lle tin
2 . G e t C L E O N et c o n te n t o n yo u r
s ite
3 . A d d a link to C LE O N e t
F e a tu re d R e s o u rc e
L a te s t N e w s
L a te s t E ve n ts
S id e b a r link s b o x:
B ro w s e b y L a n g u a g e
B ro w s e b y P ro d u c in g o rg
B ro w s e b y L a te st A d d itio ns
B ro w s e b y M o s t V is ite d
B ro w s e L e g a l C lin ic
N e w s le tte rs
S p o tlig ht o n b o x…
T h ird le v el s u b -p a g e
H o w to a s s es s le g a l
in fo rm a tio n
P ro je c ts a n d P a rtn e rs th ird
le ve l s u b -p a g e s to :
1 . O u r F u n d e rs
2 . L e g a l c lin ic n e w s le tte r
s h a rin g p ro je ct
3 . In ju re d w o rk e rs p h o to
e xh ib it
S u g g e s t in fo rm a tio n to o u r s ite
G e t C L E O N et c o n te n t o n yo u r
s ite
L o o k in g to o rd e r C L E O
p u b lic a tio ns ?
Phase 3 - Design Issues
You want your web site
to:








have a clear structure
be visually appealing
be informative
user-centered
accessible
‘scannability’ & ‘chunking’
Searchable?
multiple languages?
Design Issues [ cont’d]
Cascading Style
Sheets (CSS) –
 You should use cascading
style sheets to design your
site, rather than tables or
frames
 CSS determines a consistent
colour, font, and layout for all
your web pages
 Recommended - If you use a
CMS to build your site, this will
be taken care of and will make
maintenance much easier
Design Issues [cont’d]
Scannability/Chunking –
About 80% of web readers scan pages,
and only for a second or less. For
scannable chunked text:
 format with headings
 use subheadings for each paragraph
 bold key phrases (highlight 3X as
much as normal).
 inline graphics to guide the eyes or
illustrate points which would normally
require more words
 bulleted lists
 short sentences with one or two ideas
per sentence
 only one point per paragraph
 short paragraphs, even one-sentence
paragraphs
 start page with short summary
(inverted pyramid)
 Have “interesting white space”
Design Issues [cont’d]
Accessibility –
To be accessible to the disabled, web pages and
sites must conform to certain accessibility
principles. According to a Wikipedia article,
you can ensure accessibility following these
tips:

provide succinct text descriptions for
images, multimedia

use hyperlinks that makes sense when
read out of context. (e.g. avoid "Click
Here.")

Use CSS, don't use ‘frames’ or ‘tables’
for layout

author the page so that, when the
source code is read line-by-line by a
screen reader, it remains intelligible.
(Using tables for design will often result
in information that is not)

Avoid blinking, scrolling text and
animated graphics, use high contrast
colours

Recommended - Note that most CMS
software tools have accessibility
integrated “out of the box”
Design Issues [cont’d]
MOCKUP It is helpful to do a mock-up
of your homepage and
look at it using your
browser.
This gives a visual
representation of the
design elements, and
seeing the navigation
buttons together gives
some idea of the logic of
the structure.
The mock-up to the right is
from the OPICCO web
site, redeveloped in
Drupal.
Example of a mock-up
Phase 4 – Content Development
 Do a division of labour, to
have people type up, or
cut & paste, the content
into the various
storyboard pages
 It is useful to create a
shared network directory
where all these files are
saved
 Make sure they use as
little formatting as
possible – the CSS
supplies most of the
formatting
Content Development [cont’d]
 Using the web page
development program or
content-management
system, you then format
and link up all the pages
before they are sent for
publishing
 You forward the files to
your web host so they are
published on your site or
use your CMS to add
content through a
password protected web
site
Phase 5 - Publishing & Promoting
 Announce your new web
site in your clinic
newsletter, in a flyer to
local agencies
 Pass your link onto LAO
and other clinic and
agencies, so they can list
your clinic in their links
 Integrate the web site into
all of the work that you do
Phase 6 – Maintenance/Evaluation
ISSUES:
 Will your clinic have one
‘webmaster’ or collaborative
management?
 You should develop some web site
protocol [rules about content]
 Your web site should have a
privacy statement [cookies, etc]
 Assign responsibilities for ongoing
upkeep [e.g. – e-mails, adding
new content etc]
 Assign responsibility for evaluation
& review
 Recommended - Work with us at
CLEONet to integrate our
automatically updated feeds and
to find out how much traffic your
content is getting on our site
What is CLEONet?
 More than just a web site, CLEONet is an online
clearinghouse for community legal education in Ontario.
 CLEONet is for community workers and advocates who
work with low-income and disadvantaged communities.
 CLEONet offers you one place to go to find hundreds of
resources, news, and events on a wide range of legal
topics.
 CLEONet also provides feeds of our headlines to your
web site. Keep your site up to date with the latest PLE
resources, news, and events on legal issues facing lowincome and disadvantaged communities in Ontario.
CLEONet Home Page at www.cleonet.ca
Add CLEONet Feeds to Your Site
CLEONet Content Feeds - Examples
Community Advocacy &
Legal Centre – Legal
Information Pages
Under their own
information, they
offer the CLEONet
feeds by subject
Other examples of CLEONet Feeds
Rexdale Community
Legal Clinic Home
Page – Feed to
Latest CLEONet
Resources
Justice for Children and
Youth under “Online
Resources – Feed to
CLEONet’s Latest
Resource on Legal Issues
for Children and Youth
OPICCO has a page for each area of law
CLEONet covers with resources and news feeds
Samples of Online Tools
Drupal is an open source content management system
that allows an individual or a community to publish,
manage, and organize a wide variety of content. Drupal
can support a diverse range of Web projects, including
content management systems or blogs. It has its own
search engine, is accessible and has customizable
“themes” in case you don’t have $ for a designer.
Here is a site I built in Drupal for OPICCO
www.opicco.org
For more information on Drupal visit: http://drupal.org/
Drupal specific features to consider
 Do you want your site to have
“members” or password protected
areas?
 Do you want people to be able to post
“comments” to the site?
 Do you want a discussion board on the
site?
 Do you want to create a blog to
document your work or tell a “story”?
Samples of Online Tools
Blog is short for weblog. A weblog is a journal (or
newsletter) that is frequently updated and intended for
general public consumption. Blogs generally represent
the personality of the author or the web site. Generally
they make it very easy to add content quickly and
encourage comments and responses by readers.
An example of a social justice blog is “The Poverty Blog”
at: http://poverty.thespec.com/ created using Typepad.
An example of a blog on PLE is
http://plei.wordpress.com/ - a research blog about public
legal education (PLE) in Canada. This blog is created
using a free tool called “Wordpress”.
Samples of Online Tools
 Wiki - online collaboration model and tool that allows
any user to edit some content of web pages through a
simple browser.
 An example of the ultimate wiki is Wikipedia. Visit
http://en.wikipedia.org/wiki/Legal_aid to see the
Wikipedia entry for “Legal Aid”. Click “edit” to try it out.
 While Wikipedia is edited by millions of people you can
create a wiki for a select group to collaboratively work on
a document. Imagine an intake manual that lived online
and could be updated by all clinic staff!
Some On Line Resources
 TechSoup.org - The Technology Place for Nonprofits provides
nonprofit organizations with technology information, products and
community.
 Web Style Guide – an online book – www.webstyleguide.com
 Web Developer’s Virtual Library – various articles on developing
web sites – www.wdvl.com
 American Bar Ass’n – Best Practice Guidelines for Legal Info Web
Site Providers –
http://www.abanet.org/elawyering/tool/practices.shtml
 Jiliane Smith’s Web Site Check List –
http://corkuniversitypress.typepad.com/cork_university_press/files/js
s_web siteChecklist.pdf
Ask for Help and Keep in touch!
Fiona MacCool
CLEONet Project Manager
Community Legal Education Ontario
T: 416-408-4420 ext. 29
E-mail: [email protected]
Web site: http://www.cleonet.ca