Enhancing Your Clinic’s Web Presence

1. 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 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 [ 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/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 [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

6. 2. - Phases in site development Phase 1 Phase 2 Phase 3 Phase 4 Phase 5 Phase 6 Site Definition & Planning Information Architecture Basic Structure Site Design Elements 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 sitedifferent? 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 [cont’d] Who Will Visit? Clients Local Agencies + other clinics www.abclegalclinic.org Community Groups Media & Politicians Broader Community

11. 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)

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

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. History of Clinic & Area Information Architecture [cont’d] General Clinic Information Contact Info (hrs, Address, Phone #) Map of area Clinic Mission & Vision Strategic Plan AGM’s & Annual Reports Newsletters & Other Archives

15. What We Do & Don’t Do Information Architecture [cont’d] Clinic Services Information Who We Serve & Don’t Serve Referrals/ Specialty Clinics Intake Hours Newsletters & Other Archives

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

17. Information Architecture [cont’d]

18. 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!

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

20. 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: • 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 [ 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

25. Design Issues [cont’d] Scannability/Chunking– About 80% of web readers scan pages, and only for a second or less. For scannablechunked 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 [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”

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

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 [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

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 CLEONet’s 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 allowsan 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/

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 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/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@cleonet.ca Web site: http://www.cleonet.ca