Building Program Websites

1. Building Program Websites Presented by David Bonebrake Legal Services National Technology Assistance Project

2. Panelists • Liz Keith, Pro Bono Net • Kristy Boyer, Legal Assistance Foundation of Chicago • Jeff Naragon, Immigration Law Center of Minnesota

3. Thank You to… • Michael Bowen, Community Legal Services of Philadelphia • Garrick Lipscomb, Legal Aid Society of Cleveland • Bryan Baker, Iowa Legal Aid • Pat McClintock, Iowa Legal Aid

4. A few questions… • How many of you either maintain or have developed a program website? • On a scale of 1 to 5, rate the robustness of your website • For those of you who have a program site, does it link to the statewide website?

5. And a few more… • How many of you attended NTAP’s program website training at NLADA last year? • How many of you attended the TechSoup’s content management training on June 10th?

6. An introduction to the website landscape

7. What makes a good website? Three basic components of all websites: • Content • Design • Platform

8. Program Websites • A program website provides an online storefront for your organization. • It allows those individuals and organizations that are going to be involved with your program to learn more about it. • Many people’s first impression of your organization will come through viewing your website.

9. Statewide Websites • Provide a central portal of state-specific legal information intended to assist low-income persons and the advocates and pro bono attorneys that represent them. • Based on Partnerships - A statewide website is a vision worthy of fulfilling.

10. Working with YourStatewide Website • Advantages • Resources for clients and advocates • Efficiency • Building stronger relationships • Find your public statewide website here: www.lawhelp.org

11. Preliminary Steps Building a Program Website

12. Step 1: Build a Website Team • Even if you choose to use a vendor for both design and development, there is still an extensive decision-making process • Develop a decision-making team for the website • Many programs have looked to staff members with web development experience or technical expertise

13. Step 2: Form a vision • Determine what you want to see included on your website • Look at what other websites have done • Ask target audiences about what they want to see in a website • Consider incorporating an online survey or web analytics software into your current site

14. Step 3: Evaluate what you have • Take an inventory of available resources • Are aspects of your current site salvageable? • Do you have staff members who are interested in and capable of doing web work? • Pro Bono designers or developers? • Other web resources?

15. Step 4: Create a Functionality Requirements Document • A functionality requirements document lists the functionality you ultimately want included on your site • Content needs should drive the functional capabilities you would like to see in the site • Error on the side of more • Sample functional requirements document available at LSNTAP.org

16. Hosting and Platforms

17. Website Hosting • Hosting options: • Shared • VPS (Virtual Private Server) • Dedicated Server • Wide range in cost – though most programs’ needs put them closer to the low-end. • Idealware Article: http://www.techsoup.org/learningcenter/webbuilding/page5671.cfm

18. Platforms • LawHelp • Open Source • Proprietary Options • Integrated Content Management Systems

19. LawHelp Program Site Template • Enables stakeholder organizations to create and manage individual web sites • Hosted and supported by PBN • Programs can use unique domain name • No technical expertise required • Resources can be published simultaneously on the statewide LawHelp web site and on the individual program site

20. How is it being used? Program Web Sites

21. How is it being used? Special services, initiatives or events within programs

22. Low-cost customizations • Custom header graphics • Horizontal navigation bars • Contact us/volunteer forms • Other HTML enhancements • Flash content • RSS feeds • Embedded videos • Online donation options

23. Leveraging statewide content

24. Leveraging statewide content

25. Open Source ContentManagement Systems • Open source platforms are free to download, use and customize • Costs often involve paying vendors for setup and support • Popular open source content management systems include Drupal, Joomla and Plone.

26. Website design

27. Website Design Elements Important design elements include: • Layout • Navigation • Color • Photos

28. Website Design Elements - Layout • Home page - primary introduction to your program. Base your own site on others that you like. • By the way: Don't neglect the inside pages - users will come directly to them from search engines • No more than three columns on a page • Center your layout • Focus on content instead of decoration

29. Website Design Elements - Layout • The “Funder”: ClintonFoundation.org • offers a snapshot of everything happening • access to everything on the site in one click • can be overwhelming

30. Website Design Elements - Layout • The “Promo” Site: www.lafla.org/ • less busy than funder style • focused on successes, upcoming events, news

31. Website Design Elements - Layout • The “News Site”: slashdot.org • entire focus of the front page is news • in this case, community submitted and ranked news

32. Website Design Elements - Layout • The “Portal Site”: Yahoo.com • Directs users to a variety of other sites and services (on and off your site).

33. Website Design Elements - Navigation Best Practices: • Let me know where I am, where I can go, where I have been • Persistent navigation bar that shows where the user is on the site • Show visited vs. unvisited links with different colors • Differentiate hyperlinks from content • For user ease, underline links and keep traditional blue color

34. Website Design Elements - Color • General Color Theory • Poynter Institute: http://www.poynterextra.org/cp/index.html • Accessibility for the elderly, color deficient and vision impaired • Strong contrast between text and background – best is dark text on light background • Do not rely on color alone to convey information • Use test simulators to check your designs for color blind issues: http://www.vischeck.com/vischeck/vischeckURL.php

35. Website Design Elements - Photos Take Your Own Photos • Total control • Not generic • Need good photos • Well lit • Engaging • Inviting • See resources for tips and reviews of online tools Use Stock Photos • Creative Commons • Media for free use subject to certain restrictions • Flickr Creative Commons Pool • Other free photo sites

36. Budgets and vendors

37. Website Budgets • There is a significant range • Robust websites for large program (75 person staff) -- $25K - $50K using vendor for both development and design • Moderate Program Site -- $10K - $15K for using a vendor for design and development • Small Site -- $6000 minimum using a vendor • LawHelp?

38. No Budget? Don’t Give Up • Look for volunteers and staff with development and design experience • Find the easiest solutions • Download a free CMS • LawHelp • Consider blogging software

39. Blogging Software • Advanced content management system that’s designed to create a blog-style look on a website that’s easy to edit • Blogging software is capable of creating a non-bloglike feel • The result: a very simple CMS that looks like a well-built website

40. Revolution Themes for Wordpress

41. Vendors • Check with legal service programs and other nonprofits in your area • List at LSNTAP.org • Ask about nonprofit discounts • Make sure they are comfortable working with the type of webpage you want

42. Emerging Website Trends

43. Emerging Trends • GIS • RSS • Video

44. GIS – www.quickmaps.com

45. RSS • “Really Simple Syndication”

46. Online Video

47. Thank you! • Questions? • David Bonebrake – David@lsntap.org • Liz Keith – lizkeith@probono.net