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 ...
Core Principles: Functional •   Email signup form •   Organized navigation & content •   Pictures & photos •   Sharability...
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                ste...
Issue Page
Step-By-Step Guide1.   Internal Organization2.   Goals3.   Information Architecture (IA)4.   Wireframe5.   Content6.   Des...
1. Internal Organization                     New Media    Communications                  Field      Fundraising          ...
1. Organization • New Media / Comms normally leads the project • Don’t build your website in isolation • Involve different...
2. Goals • Define organizational priorities • Define the purpose and requirements for the site • Define your audience • Se...
3. Information Architecture (IA) • “Table of contents” for your website • Logical grouping of content • Don’t need a desig...
3. Information Architecture (IA)HOME   ABOUT      ISSUES      VOLUNTEER        EVENTS           DONATE         PAGE 1     ...
4. Wireframe•   Blueprint of how your pages will be laid out•   Allows your team to focus on the placement of    items on ...
4. Wireframe Example
4. Wireframe Example
Final Design
5. Content• Sections   – Bio / About   – Issues   – Volunteer / Get involved   – Events   – News   – Donate   – Tell a fri...
5. Content• Email signup   – Short: email address and zip code   – Long: full address and txt msg / volunteer opt-in• Cont...
5. Content• Tell your story using engaging content and pictures• Don’t post more content/words just for the sake of  havin...
6. Design • Visually tell your story • Make sure your calls to action are prominent   – Donate, event signup, volunteer, e...
7. Quality Assurance (QA) • QA the site before you launch   (Mac/PC, Firefox, Internet Explorer, Safari)    – Check the co...
8. Track and Engage• Keep posting content that is interesting and  relevant to your supporters• Monitor the site traffic a...
8. Track and Engage• Different metrics you can track:   – Visits   – Unique Visitors   – Page Views   – Click Paths   – En...
Contact InfoNew Organizing Institute(202) 558-5585info@neworganizing.comwww.neworganizing.comwww.twitter.com/neworganizing
Upcoming SlideShare
Loading in...5
×

Building Websites

1,214

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,214
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Building Websites

  1. 1. Building a Website(Thanks to Larry Huynh & Jordan Higgins for some of this great content)
  2. 2. What We’ll Cover• Core Principles• Examples• Step-By-Step Guide
  3. 3. 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
  4. 4. 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
  5. 5. Examples• Home Page• Landing Page / Tell a friend• Event Map• Donation Page• Issue Page
  6. 6. Home Page
  7. 7. Landing Page
  8. 8. The Next Ask/Tell a Friend
  9. 9. Event Map
  10. 10. Donation Page The form is on one page. It’s not a multiple step process.
  11. 11. Issue Page
  12. 12. Step-By-Step Guide1. Internal Organization2. Goals3. Information Architecture (IA)4. Wireframe5. Content6. Design7. Quality Assurance (QA)8. Track & Engage
  13. 13. 1. Internal Organization New Media Communications Field Fundraising Exec. Dir. Political
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 3. Information Architecture (IA)HOME ABOUT ISSUES VOLUNTEER EVENTS DONATE PAGE 1 ISSUE 1 SIGNUP SEARCH THANK FORM YOU PAGE 2 ISSUE 2 PAGE SIGNUP THANK FORM PAGE 3 ISSUE 3 TELL A YOU FRIEND PAGE ISSUE 4 THANK YOU THANK TELL A ISSUE 5 PAGE YOU PAGE FRIEND (link back to TELL A home page) THANK FRIEND YOU PAGE (link back to home page) THANK YOU PAGE (link back to home page)
  18. 18. 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
  19. 19. 4. Wireframe Example
  20. 20. 4. Wireframe Example
  21. 21. Final Design
  22. 22. 5. Content• Sections – Bio / About – Issues – Volunteer / Get involved – Events – News – Donate – Tell a friend
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. Contact InfoNew Organizing Institute(202) 558-5585info@neworganizing.comwww.neworganizing.comwww.twitter.com/neworganizing
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×