Building Program Building Program WebsitesWebsitesPresented by David BonebrakeLegal Services National Technology Assistance Project

PanelistsPanelistsLiz Keith, Pro Bono NetKristy Boyer, Legal Assistance

Foundation of ChicagoJeff Naragon, Immigration Law

Center of Minnesota

Thank You to…Thank You to…Michael Bowen, Community Legal

Services of PhiladelphiaGarrick Lipscomb, Legal Aid

Society of ClevelandBryan Baker, Iowa Legal AidPat McClintock, Iowa Legal Aid

A few questions…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?

And a few more…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?

AN INTRODUCTION AN INTRODUCTION TO THE WEBSITE TO THE WEBSITE LANDSCAPELANDSCAPE

What makes a good What makes a good website?website?Three basic components of all websites:

ContentDesignPlatform

Program WebsitesProgram WebsitesA 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.

Statewide WebsitesStatewide WebsitesProvide 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.

Working with YourWorking with YourStatewide WebsiteStatewide WebsiteAdvantages

◦Resources for clients and advocates◦Efficiency ◦Building stronger relationships

Find your public statewide website here: www.lawhelp.org

BUILDING A BUILDING A PROGRAM WEBSITEPROGRAM WEBSITE

Preliminary Steps

Step 1: Build a Website Step 1: Build a Website TeamTeamEven 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

Step 2: Form a visionStep 2: Form a visionDetermine what you want to see

included on your websiteLook at what other websites have

doneAsk target audiences about what

they want to see in a websiteConsider incorporating an online

survey or web analytics software into your current site

Step 3: Evaluate what you Step 3: Evaluate what you havehaveTake 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?

Step 4: Create a Step 4: Create a Functionality Requirements Functionality Requirements DocumentDocument

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 moreSample functional requirements

document available at LSNTAP.org

HOSTING AND HOSTING AND PLATFORMSPLATFORMS

Website HostingWebsite HostingHosting 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

PlatformsPlatformsLawHelpOpen SourceProprietary OptionsIntegrated Content Management

Systems

LawHelp Program Site LawHelp Program Site TemplateTemplate

Enables stakeholder organizations to create and manage individual web sites

Hosted and supported by PBNPrograms can use unique domain nameNo technical expertise requiredResources can be published

simultaneously on the statewide LawHelp web site and on the individual program site

How is it being used?How is it being used?

Program Web Sites

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

Low-cost customizationsLow-cost customizations Custom header graphics Horizontal navigation bars Contact us/volunteer forms Other HTML enhancements

• Flash content• RSS feeds• Embedded videos• Online donation options

Leveraging statewide Leveraging statewide contentcontent

Leveraging statewide Leveraging statewide contentcontent

Open Source ContentOpen Source ContentManagement SystemsManagement SystemsOpen source platforms are free

to download, use and customizeCosts often involve paying

vendors for setup and support Popular open source content

management systems include Drupal, Joomla and Plone.

WEBSITE DESIGNWEBSITE DESIGN

Website Design ElementsWebsite Design Elements

Important design elements include:LayoutNavigationColorPhotos

Website Design ElementsWebsite Design Elements - - LayoutLayoutHome 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 layoutFocus on content instead of decoration

Website Design ElementsWebsite Design Elements - - LayoutLayout

The “Funder”: ClintonFoundation.org◦ offers a snapshot

of everything happening

◦ access to everything on the site in one click

◦ can be overwhelming

Website Design ElementsWebsite Design Elements - - LayoutLayout

The “Promo” Site: www.lafla.org/◦less busy than funder style

◦focused on successes, upcoming events, news

Website Design ElementsWebsite Design Elements - - LayoutLayout

The “News Site”: slashdot.org◦entire focus of the front page is news

◦in this case, community submitted and ranked news

Website Design ElementsWebsite Design Elements - - LayoutLayout

The “Portal Site”: Yahoo.com◦Directs users to a variety of other sites and services (on and off your site).

Website Design ElementsWebsite Design Elements - - NavigationNavigationBest 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

Website Design ElementsWebsite Design Elements - - ColorColorGeneral 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

Website Design ElementsWebsite Design Elements - - PhotosPhotosTake Your Own

PhotosTotal controlNot genericNeed good

photos◦Well lit◦Engaging◦ Inviting

See resources for tips and reviews of online tools

Use Stock PhotosCreative

Commons◦ Media for free use

subject to certain restrictions

◦ Flickr Creative Commons Pool

Other free photo sites

BUDGETS AND BUDGETS AND VENDORSVENDORS

Website BudgetsWebsite BudgetsThere is a significant rangeRobust 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?

No Budget? Don’t Give UpNo Budget? Don’t Give UpLook for volunteers and staff with

development and design experience

Find the easiest solutions◦Download a free CMS◦LawHelp◦Consider blogging software

Blogging SoftwareBlogging SoftwareAdvanced 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

Revolution Themes for Revolution Themes for WordpressWordpress

VendorsVendorsCheck with legal service

programs and other nonprofits in your area

List at LSNTAP.orgAsk about nonprofit discountsMake sure they are comfortable

working with the type of webpage you want

EMERGING WEBSITE EMERGING WEBSITE TRENDSTRENDS

Emerging TrendsEmerging TrendsGISRSSVideo

GIS – GIS – www.quickmaps.comwww.quickmaps.com

RSSRSS“Really Simple Syndication”

Online VideoOnline Video

Thank you!Thank you!Questions?

David Bonebrake – David@lsntap.org

Liz Keith – lizkeith@probono.net