Web 2.0 Basics for NGOs E-engagement capacity enhancement for NGOs HKU ExCEL3

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

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-%E2%80%93-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

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/

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.

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.

How to create a website 1.Register a domain. 2.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. 3.Get web hosting. 4.Send out emails to spread the word! 5.(If applicable) Accept donations online.

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.

Website Design Company Several factors should be taken into consideration when choosing a website design company: 1.Look at their website. Do you like it? Is it updated? 2.Look through their portfolio. 3.Ask for references. 4.Have they worked with NGOs before? 5.What is their knowledge of a Content Management System (CMS)? 6.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-questions/http://www.nonprofitcms.org/nonprofits-never-hire- a-web-designer-without-asking-these-questions/ 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-in-a- nonprofit-website-design-company/

Best Practices Successful websites must 1.Be user friendly 2.Be search engine friendly 3.Be social media friendly 4.Know its audience 5.Have purpose to each page 6.Contain clear, concise, and relevant information 7.Have attractive aesthetics & visuals such as photographs 8.Have contact information 9.Be consistent 10.Have an analytics system

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. (3 rd Ed.) Web Style Guide. Retrieved November 29, 2012, from http://webstyleguide.com/wsg3/3-information- architecture/index.html

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. (3 rd Ed.) Web Style Guide. Retrieved November 29, 2012, from http://webstyleguide.com/wsg3/3-information- architecture/index.html

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. (3 rd Ed.) Web Style Guide. Retrieved November 29, 2012, from http://webstyleguide.com/wsg3/3-information- architecture/index.html

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. (3 rd Ed.) Web Style Guide. Retrieved November 29, 2012, from http://webstyleguide.com/wsg3/3-information- architecture/index.html

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/breadcrumbs-in-web-design-examples-and-best-practices-2/

Best Practices 1. User Friendly Usability: Readability Scanning: Studies show that people scan websites rather than reading them thoroughly.

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.

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.

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/

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.

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.

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.

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.

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.

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).

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.

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.

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: 1.Donors Make sure it is easy for them to donate money no matter which webpage they are on. 2.Volunteers Make it easy for them to find information and express their interest in helping. 3.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/

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.

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.

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!

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

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.

Best Practices 7. Visuals Professional layout & design

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.

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.

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.

References

Documents

Web 2.0 Basics for NGOs E-engagement capacity enhancement for NGOs HKU ExCEL3