Web 2.0 Basics for NGOs

1
Web 2.0 Basics for NGOs

• E-engagement capacity enhancement for NGOs
• HKU ExCEL3

2
Content

• The Internet Web 2.0
• Is your organisation ready for Web 2.0?
• How to start a website
• Choosing a website design company
• 10 best practices

3
Web 2.0

• The Internet is indispensable for NGOs and major
  benefits include
• Cost-effective
• Timely
• Has a wide reach
• Can increase participation / interaction
• Available anywhere, anytime

Reference Spell, T. (2010). Internet
technologies a must for nonprofits. Nonprofit
CMS. Retrieved November 29, 2012, from
http//www.nonprofitcms.org/internet-technologies-
E28093-a-must-for-nonprofits/ Grannell, C.
(2012). The challenge of designing for
non-profits. .Net Magazine. Retrieved November
29, 2012, from http//www.netmagazine.com/features
/challenge-designing-non-profits
4
Web 2.0

• Web 2.0
• a class of Internet tools and technologies that
  have been developed with a view to involve
  Internet users and make their role more active
• - (Spell, 2010)
• Critical aspect of Web 2.0 interactive

Reference Spell, T. (2010). Web 2.0 tactics for
non-profits. Nonprofit CMS. Retrieved November
29, 2012, from http//www.nonprofitcms.org/web-2-0
-tactics-for-nonprofits/
5
Web 2.0 Are you ready?

• Management issues
• Senior management Are they clear about the
  purpose behind and supportive of using Web 2.0 /
  social media?
• Entire organisation are they in the loop?
• Lifelong commitment maintenance is necessary,
  inevitable and continuous.
• Has sufficient resources been (or will be)
  allocated to this cause?
• Create a maintenance plan.

6
Web 2.0 Are you ready?

• Privacy / Security issues
• Anything posted on the Internet will leave a
  trace. Dont post anything you are not
  comfortable with becoming public!
• Security is very important. If you have a
  membership system such as an email list or
  registration system, then care must be taken to
  protect that information.

7
How to create a website

• Register a domain.
• Decide between designing in-house or finding a
  web design company with experience working with
  NGOs.
• Ask about a Content Management System (CMS)
• CMS allows NGOs to upload and update their own
  content on the website. Also, if company who
  designed the website eventually closes, you can
  still update the website with or without them.
• Get web hosting.
• Send out emails to spread the word!
• (If applicable) Accept donations online.

8
Website Design Company

• Despite the commonly lean budget of NGOs, a
  well-designed website can have many long term
  benefits. E.g.,
• Survive the growth of an organization,
• Present a professional online presence for the
  organization,
• Create a sustainable system that can be easily
  managed by the NGO,
• Attract your audience,
• etc.

9
Website Design Company

• Several factors should be taken into
  consideration when choosing a website design
  company
• Look at their website. Do you like it? Is it
  updated?
• Look through their portfolio.
• Ask for references.
• Have they worked with NGOs before?
• What is their knowledge of a Content Management
  System (CMS)?
• What is their knowledge beyond just web design?
  Are they able to integrate social media or search
  engine principles into their designs?

Reference Spell, T. (2010). Non profits never
hire a web designer without asking these
questions. Nonprofit CMS. Retrieved November 29,
2012, from http//www.nonprofitcms.org/nonprofits-
never-hire-a-web-designer-without-asking-these-que
stions/ Spell, T. (2010). 7 things to look for in
a non profit website design company. Nonprofit
CMS. Retrieved November 29, 2012, from
http//www.nonprofitcms.org/7-things-to-look-for-i
n-a-nonprofit-website-design-company/
10
Best Practices

• Successful websites must
• Be user friendly
• Be search engine friendly
• Be social media friendly
• Know its audience
• Have purpose to each page
• Contain clear, concise, and relevant information
• Have attractive aesthetics visuals such as
  photographs
• Have contact information
• Be consistent
• Have an analytics system

11
Best Practices

• Successful websites must
• Be user friendly
• Be search engine friendly
• Be social media friendly
• Know its audience
• Have purpose to each page
• Contain clear, concise, and relevant information
• Have attractive aesthetics visuals such as
  photographs
• Have contact information
• Be consistent
• Have an analytics system

12
Best Practices 1. User Friendly

• Usability is how easy a website is to use.
• The following will help improve a websites
  usability
• Easy navigation
• Readability hyperlinks
• Testing

Reference P.J., Lynch S. Horton. (2009).
Information Architecture. In P.J., Lynch S.
Horton. (3rd Ed.) Web Style Guide. Retrieved
November 29, 2012, from http//webstyleguide.com/w
sg3/3-information-architecture/index.html
13
Best Practices 1. User Friendly

• Usability Easy navigation
• Information architecture the process of
  organising content on a website
• Keep a hierarchical format of all your websites
  pages, generally from general to specific and in
  decreasing priority.
• Information should be organized so that each page
  should only have a maximum of 3 purposes / focus.
• As your site grows, there must be a balance
  between menus and content webpages.

Reference P.J., Lynch S. Horton. (2009).
Information Architecture. In P.J., Lynch S.
Horton. (3rd Ed.) Web Style Guide. Retrieved
November 29, 2012, from http//webstyleguide.com/w
sg3/3-information-architecture/index.html
14
Best Practices 1. User Friendly

• Usability Easy navigation
• Information architecture the process of
  organising content on a website
• Wide vs. Deep

Reference P.J., Lynch S. Horton. (2009).
Information Architecture. In P.J., Lynch S.
Horton. (3rd Ed.) Web Style Guide. Retrieved
November 29, 2012, from http//webstyleguide.com/w
sg3/3-information-architecture/index.html
15
Best Practices 1. User Friendly

• Usability Easy navigation
• Information architecture the process of
  organising content on a website
• Choose the right site structure.

Reference P.J., Lynch S. Horton. (2009).
Information Architecture. In P.J., Lynch S.
Horton. (3rd Ed.) Web Style Guide. Retrieved
November 29, 2012, from http//webstyleguide.com/w
sg3/3-information-architecture/index.html
16
Best Practices 1. User Friendly

• Usability Easy navigation
• Breadcrumbs
• Suitable for websites with more than one level.
• Leave a visual / text trail so that users will
  know how they came to each webpage and can easily
  go back to any previous section.
• Make sure that no webpage ends up as a dead end.
  At least have a link back to home.

Reference Gube, J. (2009). Breadcrumbs in web
design examples and best practices. Smashing
Magazine. Retrieved November 30, 2012 from
http//www.smashingmagazine.com/2009/03/17/breadcr
umbs-in-web-design-examples-and-best-practices-2/
17
Best Practices 1. User Friendly

• Usability Readability
• Scanning Studies show that people scan websites
  rather than reading them thoroughly.

18
Best Practices 1. User Friendly

• Usability Readability
• Scanning Studies show that people scan websites
  rather than reading them thoroughly.
• Prioritize your information to place them in the
  areas that will receive more attention.
• Hyperlinks make sure hyperlinks stand out as
  links so readers can scan for them easily.

19
Best Practices 1. User Friendly

• Usability Readability
• Typography
• It is important to choose fonts that will be easy
  to read on a computer screen.
• Font size is important too. Make it big enough to
  be comfortably read especially if your readers
  may be older in age.
• Headings
• Use headings to separate sections of text.
• Headings can be a different typeface.
• White space
• Having enough white space is important to make
  text readable. Pay attention to the spaces
  between letters as well as the spaces between
  lines.

20
Best Practices 1. User Friendly

• Usability Testing
• In order to make sure the website is error free
  and easy to use, ask friends and family to help
  test the website.
• Studies have suggested that 5 website testers is
  enough to find most of the problems that a
  website may have.

Reference Spell, T. (2010). Web 2.0 tactics for
non-profits. Nonprofit CMS. Retrieved November
29, 2012, from http//www.nonprofitcms.org/web-2-0
-tactics-for-nonprofits/
21
Best Practices 1. User Friendly

• Page load speed
• How quickly a webpage loads is actually one of
  the most crucial factors for whether someone will
  visit your site.
• Mobile or tablet friendly sites
• With the popularity of smartphones and tablets,
  it is important to consider how your webpage will
  look on these devices.
• If necessary, a mobile version of the website can
  be made.
• Accessibility
• Websites made in a way that those with
  disabilities will still be able to use it.
• E.g., easily enlargeable font, images with a
  short description for the visually impaired.

22
Best Practices

• Successful websites must
• Be user friendly
• Be search engine friendly
• Be social media friendly
• Know its audience
• Have purpose to each page
• Contain clear, concise, and relevant information
• Have attractive aesthetics visuals such as
  photographs
• Have contact information
• Be consistent
• Have an analytics system

23
Best Practices 2. Search Engine Friendly

• The most important aspect of a website is that it
  can be found.
• Users will most likely find websites via a search
  engine.
• Search rankings Studies have shown that the
  higher your website is in the search rankings,
  the more likely people will click your site
  therefore, you should aim to rank highly in the
  search results of keywords that are relevant to
  your website.

24
Best Practices 2. Search Engine Friendly

• Search Engine Optimization (SEO)
• Improving a website to increase visits from
  search engines.
• Major search engines in Hong Kong
• Yahoo!, Google, Baidu, soso /QQ Bing
• Traffic from search engines are based on search
  queries therefore, focus on optimizing your
  keywords.

25
Best Practices 2. Search Engine Friendly

• Search Engine Optimization (SEO)
• Search engines will
• Scan and index your website
• Determine its relevance and rank regarding some
  keywords
• Keywords These are the words that represent the
  focus of your webpage or site. Determine these
  strategically and carefully.

26
Best Practices 2. Search Engine Friendly

• Search Engine Optimization (SEO)
• Crawlability how easy it is for a search
  engine to scan are record your website.
• Make sure your website has a search engine
  friendly design by
• Good link structure
• Tagging (for headings, images etc.)
• URL structure
• Shy away from flash technology since that cannot
  be scanned by search engines.

27
Best Practices 2. Search Engine Friendly

• Search Engine Optimization (SEO)
• Relevance
• Make sure your content is relevant for your
  audience.
• Specifically, make sure your content is relevant
  for the keywords that you are aiming to target.
• Keep your content fresh as a way to show
  relevance (blogs or new is a good way to do this).

28
Best Practices 2. Search Engine Friendly

• Search Engine Optimization (SEO)
• Rank
• Have targeted keywords and a focus on each
  webpage.
• It is recommended to aim for no more than 3
  keywords per webpage.
• Keep content fresh and relevant.
• Link Building Having a link network e.g., links
  from other websites and links to other websites.
• Swap links with reputable webpages.
• Submit URL to reputable directories.
• Create great content so others will link to you.

29
Best Practices

• Successful websites must
• Be user friendly
• Be search engine friendly
• Be social media friendly
• Know its audience
• Have purpose to each page
• Contain clear, concise, and relevant information
• Have attractive aesthetics visuals such as
  photographs
• Have contact information
• Be consistent
• Have an analytics system

30
Best Practices 3. Social Media Friendly

• Social media may include
• Facebook, Twitter, Weibo, LinkedIn, Google, etc.
• Integrate social media into each webpage so that
  users can share your content quickly and easily.

31
Best Practices

• Successful websites must
• Be user friendly
• Be search engine friendly
• Be social media friendly
• Know its audience
• Have purpose to each page
• Contain clear, concise, and relevant information
• Have attractive aesthetics visuals such as
  photographs
• Have contact information
• Be consistent
• Have an analytics system

32
Best Practices 4. Know Your Audience

• Determine the audience that your website is meant
  for as well as potential audience who are likely
  to visit.
• Remember that your website needs to appeal to and
  engage them so keep their needs in mind as you
  develop your website.
• Some of the potential audiences of your website
  may include
• Donors
• Make sure it is easy for them to donate money no
  matter which webpage they are on.
• Volunteers
• Make it easy for them to find information and
  express their interest in helping.
• Media
• Have a downloadable media kit available and at
  least a link to your organisations latest news.

Reference http//www.npengage.com/web-design/the-
1-reason-nonprofit-websites-fail-and-how-fix/
33
Best Practices

• Successful websites must
• Be user friendly
• Be search engine friendly
• Be social media friendly
• Know its audience
• Have purpose to each page
• Contain clear, concise, and relevant information
• Have attractive aesthetics visuals such as
  photographs
• Have contact information
• Be consistent
• Have an analytics system

34
Best Practices 5. Purpose of Each Page

• Landing page the webpage that users first get to
  after clicking on a search result link or online
  advertisement link.
• Most landing pages should have one main goal and
  everything on that page should work towards that
  goal.
• Above the fold the area on a website that can be
  seen without scrolling.
• Call-to-action prompts (e.g., buttons, banners,
  copy) on a webpage for users to make a certain
  action e.g., click somewhere, sign-up for
  something, buy something etc.
• Conversion the action that you want your user to
  take.

35
Best Practices 5. Purpose of Each Page

• Landing page optimization
• Decide on the goal of each landing page
• Everything on each landing page should work
  towards guiding the user to fulfilling that
  pages goal.
• E.g., sign-up for your newsletter, donate money
  to your organisation etc.
• Create urgency and tell users what to do with
  calls-to-action. Dont be afraid to repeat those
  calls-to-action.
• Use big fonts and big buttons.
• Test changes on landing pages to see which
  changes lead to more conversions.
• Keep everything important above the fold.

36
Best Practices 5. Purpose of Each Page

• Homepage
• Although a homepage may have more goals than a
  simple landing page, the same principles apply.
• Prioritize your content to keep important content
  above the fold
• Figure out your goals and focus your content and
  design around those goals.
• Besides making your organisations cause clear,
  incorporate calls-to-action that users can take
  to support your cause.
• Keep testing!

37
Best Practices

• Successful websites must
• Be user friendly
• Be search engine friendly
• Be social media friendly
• Know its audience
• Have purpose to each page
• Contain clear, concise, and relevant information
• Have attractive aesthetics visuals such as
  photographs
• Have contact information
• Be consistent
• Have an analytics system

38
Best Practices 6. Content

• Use simple language
• Get straight to the point
• Cut out the unnecessary
• Use short paragraphs and sentences
• Shy away from too much technical / scientific
  jargon
• Relevant information should fit in with your
  keyword strategy

39
Best Practices

• Successful websites must
• Be user friendly
• Be search engine friendly
• Be social media friendly
• Know its audience
• Have purpose to each page
• Contain clear, concise, and relevant information
• Have attractive aesthetics visuals such as
  photographs
• Have contact information
• Be consistent
• Have an analytics system

40
Best Practices 7. Visuals

• Studies have shown that a professional /
  attractive website increases the trust that users
  have towards that website.
• If a picture can replace a thousand words, do it.
• Especially for NGOs, include pictures of your
  staff / events as this can put a face to your
  organisation.

41
Best Practices 7. Visuals

• Professional layout design

42
Best Practices 7. Visuals

• Professional layout design

43
Best Practices 7. Visuals

• Professional layout design

44
Best Practices 7. Visuals

• Professional layout design

45
Best Practices

• Successful websites must
• Be user friendly
• Be search engine friendly
• Be social media friendly
• Know its audience
• Have purpose to each page
• Contain clear, concise, and relevant information
• Have attractive aesthetics visuals such as
  photographs
• Have contact information
• Be consistent
• Have an analytics system

46
Best Practices 8. Contact information

• Make it easy for users to reach out to you.
• Minimum phone number / email address.
• Can also include
• Address
• Hours of operation (If applicable)
• If you have social media accounts, remember to
  include those links too.

47
Best Practices

• Successful websites must
• Be user friendly
• Be search engine friendly
• Be social media friendly
• Know its audience
• Have purpose to each page
• Contain clear, concise, and relevant information
• Have attractive aesthetics visuals such as
  photographs
• Have contact information
• Be consistent
• Have an analytics system

48
Best Practices 9. Consistency

• Your website is an extension of your
  organisation.
• Everything within the website must be consistent
  with the rest of your organisation. E.g.,
• Purpose / Mission / Message of the organisation
• Tone
• Visual style etc.

49
Best Practices

• Successful websites must
• Be user friendly
• Be search engine friendly
• Be social media friendly
• Know its audience
• Have purpose to each page
• Contain clear, concise, and relevant information
• Have attractive aesthetics visuals such as
  photographs
• Have contact information
• Be consistent
• Have an analytics system

50
Best Practices 10. Analytics

• In order to keep track of your websites
  performance and potential problems or
  improvements, it is crucial to make the site
  analytics friendly.
• Google analytics can be used for free and can
  track various indicators of your websites
  performance.
• Determine the relevant performance indicators for
  your website.

51
References