Transcript PPT - lsntap

Building Program Websites
Presented by David Bonebrake
Legal Services National Technology Assistance Project
Panelists
Liz Keith, Pro Bono Net
 Kristy Boyer, Legal Assistance Foundation
of Chicago
 Jeff Naragon, Immigration Law Center of
Minnesota

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

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…
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 TO
THE WEBSITE
LANDSCAPE
What makes a good website?
Three basic components of all
websites:
Content
 Design
 Platform

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.

Statewide Websites
Provide a central portal of state-specific
legal information intended to assist lowincome 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 Your
Statewide Website

Advantages
◦ Resources for clients and advocates
◦ Efficiency
◦ Building stronger relationships

Find your public statewide website here:
www.lawhelp.org
Preliminary Steps
BUILDING A PROGRAM
WEBSITE
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

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

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?
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

HOSTING AND
PLATFORMS
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/w
ebbuilding/page5671.cfm

Platforms
LawHelp
 Open Source
 Proprietary Options
 Integrated Content Management Systems

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

How is it being used?
Program Web Sites
How is it being used?
Special services,
initiatives or events
within programs
Low-cost customizations




•
•
•
•
Flash content
RSS feeds
Embedded videos
Online donation options
Custom header graphics
Horizontal navigation bars
Contact us/volunteer forms
Other HTML enhancements
Leveraging statewide content
Leveraging statewide content
Open Source Content
Management 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.

WEBSITE DESIGN
Website Design Elements
Important design elements include:
 Layout
 Navigation
 Color
 Photos
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

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
Website Design Elements - Layout

The “Promo”
Site:
www.lafla.org/
◦ less busy than
funder style
◦ focused on
successes,
upcoming
events, news
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
Website Design Elements - Layout

The “Portal
Site”:
Yahoo.com
◦ Directs users to
a variety of
other sites and
services (on and
off your site).
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
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
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
BUDGETS AND
VENDORS
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?

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
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

Revolution Themes for Wordpress
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

EMERGING WEBSITE
TRENDS
Emerging Trends
GIS
 RSS
 Video

GIS – www.quickmaps.com
RSS

“Really Simple Syndication”
Online Video
Thank you!

Questions?
David Bonebrake – [email protected]
 Liz Keith – [email protected]
