Transcript Building a Website (Thanks to Larry Huynh & Jordan Higgins for some of this great content)

Building a Website
(Thanks to Larry Huynh & Jordan Higgins for some of this great content)
What We’ll Cover
• Core Principles
• Examples
• Step-By-Step Guide
Core Principles: Overarching
• Your site is a reflection on you and your organization
and you only get one chance for a first impression
• An easily-navigable website is fundamentally
important to your work
• Should be part of your overall communications and
strategy plan
• Should complement your offline program
Core Principles: Functional
•
•
•
•
•
•
•
Email signup form
Organized navigation & content
Pictures & photos
Sharability
Bio/About/Issues section
Call to action buttons (e.g., Donate, Volunteer)
Promote social network sites
Examples
• Home Page
• Landing Page / Tell a friend
• Event Map
• Donation Page
• Issue Page
Home Page
Landing Page
The Next Ask/Tell a Friend
Event Map
Donation Page
The form is on
one page. It’s
not a multiple
step process.
Issue Page
Step-By-Step Guide
1.
2.
3.
4.
5.
6.
7.
8.
Internal Organization
Goals
Information Architecture (IA)
Wireframe
Content
Design
Quality Assurance (QA)
Track & Engage
1. Internal Organization
New Media
Communications
Field
Fundraising
Exec. Dir.
Political
1. Organization
• New Media / Comms normally leads the project
• Don’t build your website in isolation
• Involve different depts from the beginning
• Successful new media requires new structures –
web design often highlights organizational
opportunities for growth
2. Goals
• Define organizational priorities
• Define the purpose and requirements for the site
• Define your audience
• Set a timeframe (with goals) for building the site
3. Information Architecture (IA)
• “Table of contents” for your website
• Logical grouping of content
• Don’t need a design to come up with IA
• Prioritize what your supporters will be looking for, not
what you think is exciting
3. Information Architecture (IA)
HOME
ABOUT
ISSUES
PAGE 1
ISSUE 1
PAGE 2
ISSUE 2
PAGE 3
ISSUE 3
ISSUE 4
ISSUE 5
VOLUNTEER
SIGNUP
FORM
THANK
YOU
PAGE
TELL A
FRIEND
THANK
YOU PAGE
(link back to
home page)
EVENTS
SEARCH
SIGNUP
FORM
THANK
YOU
PAGE
TELL A
FRIEND
THANK
YOU PAGE
(link back to
home page)
DONATE
THANK
YOU
PAGE
TELL A
FRIEND
THANK
YOU PAGE
(link back to
home page)
4. Wireframe
•
Blueprint of how your pages will be laid out
•
Allows your team to focus on the placement of
items on each page
•
Separates the design process into two steps:
1. Functional page structure
2. Look and feel
4. Wireframe Example
4. Wireframe Example
Final Design
5. Content
• Sections
– Bio / About
– Issues
– Volunteer / Get involved
– Events
– News
– Donate
– Tell a friend
5. Content
• Email signup
– Short: email address and zip code
– Long: full address and txt msg / volunteer opt-in
• Content calendar
– Helps with planning / strategy
– Should be in sync with email calendar
5. Content
• Tell your story using engaging content and pictures
• Don’t post more content/words just for the sake of
having more content
• Make sure the content/message is consistent across
website, social networks, and email campaigns
6. Design
• Visually tell your story
• Make sure your calls to action are prominent
– Donate, event signup, volunteer, email sign-up
• Promote your social networking presence(s)
• Should have a consistent design (look and feel)
across all of your mediums
– Website, flyers, rally signs, sign-up sheets
7. Quality Assurance (QA)
• QA the site before you launch
(Mac/PC, Firefox, Internet Explorer, Safari)
– Check the content/formatting on every page
– Click on all links
– Test all forms
– Get appropriate sign-off
8. Track and Engage
• Keep posting content that is interesting and
relevant to your supporters
• Monitor the site traffic and track the progress using
web analytic tools
– Google Analytics
– Crazy Egg
– Clicky
– Woopra
8. Track and Engage
• Different metrics you can track:
– Visits
– Unique Visitors
– Page Views
– Click Paths
– Entry & Exit Pages
– Time spent on your site
– Search words
– AdWords
Contact Info
New Organizing Institute
(202) 558-5585
[email protected]
www.neworganizing.com
www.twitter.com/neworganizing