Enhancing Your Clinics Web Presence

1
Enhancing Your Clinics Web Presence
This presentation has been adapted from a version
generously shared by Kevin Smith at Parkdale
Community Legal Services

• Presentation by Fiona MacCool, CLEONet Project
  Managerwww.cleonet.ca

2
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
3
1 Preliminary Considerations

• First some preliminary considerations
• 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.

4
1 Preliminaries contd

• 2. DOMAIN NAME
• If you want your site to have a unique Internet
  address like www.abclegalclinc.org instead of
  www.TorontoISP.com/abclegalclinic 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

5
1 Preliminaries contd

• 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

6
2. - Phases in site development
Phase 1
Phase 2
Phase 3
Phase 4
Phase 5
Phase 6
Site Design Elements
Information Architecture Basic
Structure
Site Definition Planning
Site Construction Content
Site Publishing Promoting
Tracking/ Evaluation/ Maintenance
7
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?

8
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?

9
Phase 1 Site Definition

• VISIONING continued
• Will your site be fairly static? an online
  virtual clinic pamphlet
• - OR-
• Will 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

10
Site Definition contd
Who Will Visit?
Clients
Local Agencies other clinics
www.abclegalclinic.org
Community Groups
Media Politicians
Broader Community
11
Site Definition contd

• 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)

12
Site Definition contd

• 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

13
Phase 2 - Information Architecture
Concept Map
Flow Chart
Story Boards
Brain Storm
Do a brain storming session for possible content
with audience in mind
Develop a concept map to get an idea of
rough structure
Put together a flow chart - all the
elements in a logical flow
Create story boards of the web pages to put
all the elements together
14
Information Architecture contd
General Clinic Information
Contact Info (hrs, Address, Phone )
Clinic Mission Vision
Map of area
Strategic Plan
AGMs Annual Reports
Newsletters Other Archives
15
Information Architecture contd
Clinic Services Information
Who We Serve Dont Serve
Referrals/ Specialty Clinics
Intake Hours
Newsletters Other Archives
16
Information Architecture contd

• Dynamic Content

In The News feeds from CLEONet
Legal Victories
Campaigns Demos
PLE Materials feeds from CLEONet
Press Releases
Staff Milestones
17
Information Architecture contd
18
Information Architecture contd

• 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!

19
Information Architecture contd

• 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 sub-pages branching off
• A flow chart will help you clarify the relations
  between the parts.

20
Information Architecture contd

• STORYBOARDS
• You can create storyboards as a page by page
  representation of your web site. The one on the
  left has six parts
• 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)

21
Sample Home Page Wire Frame
22
Example of a basic site map
23
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?

24
Design Issues contd

• 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

25
Design Issues contd

• 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

26
Design Issues contd

• 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

27
Design Issues contd

• 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.

28
Example of a mock-up
29
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

30
Content Development contd

• 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

31
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

32
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

33
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 low-income and disadvantaged
  communities in Ontario.

34
CLEONet Home Page at www.cleonet.ca
35
Add CLEONet Feeds to Your Site

36
CLEONet Content Feeds - Examples
Community Advocacy Legal Centre Legal
Information Pages
Under their own information, they offer the
CLEONet feeds by subject
37
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 CLEONets Latest Resource on
Legal Issues for Children and Youth
38
OPICCO has a page for each area of law CLEONet
covers with resources and news feeds
39
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 dont 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/

40
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?

41
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.

42
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!

43
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 Developers Virtual Library various
  articles on developing web sites www.wdvl.com
• American Bar Assn Best Practice Guidelines for
  Legal Info Web Site Providers
  http//www.abanet.org/elawyering/tool/practices.sh
  tml
• Jiliane Smiths Web Site Check List
  http//corkuniversitypress.typepad.com/cork_univer
  sity_press/files/jss_web siteChecklist.pdf

44
Ask for Help and Keep in touch!

• Fiona MacCool
• CLEONet Project Manager
• Community Legal Education Ontario
• T 416-408-4420 ext. 29
• E-mail fionamaccool_at_cleonet.ca
• Web site http//www.cleonet.ca