{"id":23909,"date":"2021-03-30T11:33:27","date_gmt":"2021-03-30T15:33:27","guid":{"rendered":"https:\/\/www.qgiv.com\/blog\/?p=23909"},"modified":"2025-07-31T19:59:00","modified_gmt":"2025-07-31T23:59:00","slug":"nonprofit-website-design-best-practices","status":"publish","type":"post","link":"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/","title":{"rendered":"5 Nonprofit Website Design Best Practices for 2021"},"content":{"rendered":"<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/Meredith-Warner-circle-headshot.jpg\"><img decoding=\"async\" src=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/Meredith-Warner-circle-headshot.jpg\" alt=\"Headshot of Mereidth Wanner, Art Director at Achieve Agency\" class=\"wp-image-23594\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/Meredith-Warner-circle-headshot.jpg 398w, https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/Meredith-Warner-circle-headshot-298x300.jpg 298w, https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/Meredith-Warner-circle-headshot-150x150.jpg 150w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a><\/figure><\/div>\n\n\n<p><strong><em>About Meredith Wanner<\/em><\/strong><\/p>\n\n\n\n<p><em>Meredith Wanner oversees a team of creatives as the Art Director at <a href=\"https:\/\/www.achievecauses.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Achieve<\/a>, where she specializes in nonprofit and eCommerce digital experiences with a focus on user strategy and engagement. Meredith has worked closely with national and regional organizations like the Boys &amp; Girls Club, United Way, and the YMCA, as well as major brands such as New Balance, Earthbound Farms, and Ancient Harvest.<\/em><\/p>\n\n\n\n<p><strong><em>About Achieve<\/em><\/strong><\/p>\n\n\n\n<p><em>At <a href=\"https:\/\/www.achievecauses.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Achieve<\/a>, we help you investigate, activate, and motivate people for your purpose. We leverage our expertise in research, digital marketing, and web technology to understand and inspire your audience to take action.<\/em><\/p>\n\n\n\n<p><a href=\"https:\/\/www.achievecauses.com\/qgiv\">A well-designed website<\/a> is more than a pretty face. Incorporating web design best practices into your organization\u2019s website can improve your visitors\u2019 overall experience, their perceptions of your nonprofit (and your story), and increase conversions such as online donations.<\/p>\n\n\n\n<p>There are entire books written on effective <a href=\"https:\/\/www.sayenkodesign.com\/industries\/nonprofit-website-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">nonprofit website design<\/a> and best practices, but to get you started we\u2019ve listed five of our favorites below.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Alert Banners<\/strong><\/h3>\n\n\n\n<p>For many nonprofits, alert banners can help inform your visitors and stakeholders of emergencies or urgent information in adverse situations.<\/p>\n\n\n\n<p>Since pop-ups might be blocked or inadvertently dismissed, alert banners are a preferred option that can be implemented to remain persistent from page to page.<\/p>\n\n\n\n<p>A well-designed alert banner should grab your visitors\u2019 attention without distraction.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/Alert-Banner.png\"><img decoding=\"async\" width=\"725\" height=\"525\" src=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/Alert-Banner.png\" alt=\"Example of an effective alert banner on a nonprofit website\" class=\"wp-image-23583\" srcset=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/Alert-Banner.png 725w, https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/Alert-Banner-300x217.png 300w\" sizes=\"(max-width: 725px) 100vw, 725px\" \/><\/a><\/figure><\/div>\n\n\n<p><strong>Benefits:<\/strong><\/p>\n\n\n\n<ul>\n<li><strong>Can you hear me now? <\/strong>Relying on your homepage slideshows to inform your visitors of urgent information isn\u2019t always reliable. During times of emergencies or in rural areas, low-bandwidth conditions might cause slideshows to fail to load.<\/li>\n\n\n\n<li><strong>Accessibility.<\/strong> When properly implemented, positioning alert banners near the top of your website prioritizes that information earlier for screen readers.<\/li>\n\n\n\n<li><strong>Acting fast in an emergency.<\/strong> Alert banners are easily editable so updates can be made as fast as conditions might require.<\/li>\n<\/ul>\n\n\n\n<p><strong>Alert Banner Best Practices:<\/strong><\/p>\n\n\n\n<ul>\n<li><strong>Place it at the top.<\/strong> Placing your alert banner at the top of a page above the menu ensures that your visitors (and your visitors\u2019 screen readers) are informed of urgent news first. This is especially true on mobile devices where an alert banner placed below other content might be lost below the fold and may require your visitors to scroll to see the message.<\/li>\n\n\n\n<li><strong>Don\u2019t be afraid of making it stand out.<\/strong> While incorporating other design elements from your website like colors and fonts might be visually appealing, a banner styled to alert your visitor to urgent information should visually differentiate it from other elements on your page.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/alerts2.png\"><img decoding=\"async\" width=\"725\" height=\"434\" src=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/alerts2.png\" alt=\"Example of an effective alert banner from the City of Tampa\" class=\"wp-image-23585\" srcset=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/alerts2.png 725w, https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/alerts2-300x180.png 300w\" sizes=\"(max-width: 725px) 100vw, 725px\" \/><\/a><\/figure><\/div>\n\n\n<ul>\n<li><strong>It\u2019s not what you say. It\u2019s how you say it.<\/strong> Even in the worst of times, or <a href=\"https:\/\/www.qgiv.com\/blog\/resources\/donor-communications-to-see-you-through-every-crisis\/\">especially in the worst of times<\/a>, your messaging can help your visitors feel positively towards your organization.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/alert-3.png\"><img decoding=\"async\" width=\"512\" height=\"147\" src=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/alert-3.png\" alt=\"Example of an alert banner from the Lowe's website\" class=\"wp-image-23586\" srcset=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/alert-3.png 512w, https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/alert-3-300x86.png 300w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/a><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Donate Buttons<\/strong><\/h3>\n\n\n\n<p>For many nonprofits, <a href=\"https:\/\/www.qgiv.com\/blog\/giving-campaign\/\">donations are their main source of funding<\/a> for programs and services offered to the communities they serve. Asking for donations and converting website visitors often starts with the basic \u201cDonate\u201d button.<\/p>\n\n\n\n<p>While fundraising calls-to-action can be strategically placed throughout your website, placing a \u201cDonate\u201d button on the top of your nonprofit website and making it \u201csticky\u201d lets your donation appeal follow your visitor as they navigate throughout the site.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/donate.png\"><img decoding=\"async\" width=\"725\" height=\"454\" src=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/donate.png\" alt=\"Effective nonprofit donation button example\" class=\"wp-image-23587\" srcset=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/donate.png 725w, https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/donate-300x188.png 300w\" sizes=\"(max-width: 725px) 100vw, 725px\" \/><\/a><\/figure><\/div>\n\n\n<p><strong>Benefits:<\/strong><\/p>\n\n\n\n<ul>\n<li><strong>Never lose sight of your donate button. <\/strong>The donation button is always visible to your website visitors as they travel through your website, regardless of how far they scrolled down a page.<\/li>\n\n\n\n<li><strong>Just a click away.<\/strong> Website visitors can easily navigate to your donate page from anywhere on the website<\/li>\n<\/ul>\n\n\n\n<p><strong>Donate Button Best Practices:<\/strong><\/p>\n\n\n\n<ul>\n<li><strong>Make it pop!<\/strong> Visually differentiate the donate button design from the main menu navigation to grab your visitors\u2019 attention.<\/li>\n\n\n\n<li><strong>Don\u2019t make your visitors think.<\/strong> Design your button to look like, well, a button. A donation button designed to look like a clickable button reduces their cognitive effort.<\/li>\n\n\n\n<li><strong>Make it sticky.<\/strong> \u201cStick\u201d your donation button to the top of the header of your home page and don\u2019t let it out of your visitors\u2019 sight.<\/li>\n\n\n\n<li><strong>Don\u2019t forget mobile!<\/strong> Chances are, many of your visitors are accessing your website from a mobile device. Make sure they don\u2019t forget they can donate on mobile too!<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3.&nbsp; Accessible Design<\/strong><\/h3>\n\n\n\n<p>Accessible design is good design. According to the CDC, 26% of adults in the United States have some type of disability. That means <strong>1 out of 4 of your website visitors might not have access to your website information or the ability to donate on your website<\/strong> if your website isn\u2019t designed and implemented for accessibility.<\/p>\n\n\n\n<p>Web accessibility encompasses all disabilities that affect access to the Web, including:<\/p>\n\n\n\n<ul>\n<li>Auditory<\/li>\n\n\n\n<li>Cognitive<\/li>\n\n\n\n<li>Neurological<\/li>\n\n\n\n<li>Physical<\/li>\n\n\n\n<li>Speech<\/li>\n\n\n\n<li>Visual<\/li>\n<\/ul>\n\n\n\n<p>Creating and properly implementing an accessible and inclusive website is essential to provide equal access and opportunity for all your visitors. Following WCAG 2.1 (Web Content Accessibility Guidelines) ensures ALL your visitors can access the content on your website.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/wcag.png\"><img decoding=\"async\" width=\"725\" height=\"445\" src=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/wcag.png\" alt=\"Screen shot of the WAVE (web accessibility evaluation tool) being used on a nonprofit website  \" class=\"wp-image-23588\" srcset=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/wcag.png 725w, https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/wcag-300x184.png 300w\" sizes=\"(max-width: 725px) 100vw, 725px\" \/><\/a><\/figure><\/div>\n\n\n<p>Accessible web design can also improve the user experience for your visitors. For example:<\/p>\n\n\n\n<ul>\n<li>People using mobile phones, smart watches, smart TVs, and other devices with small screens, different input modes, etc.<\/li>\n\n\n\n<li>Older people with changing abilities due to aging.<\/li>\n\n\n\n<li>People with \u201ctemporary disabilities\u201d such as a broken arm or lost glasses.<\/li>\n\n\n\n<li>People with \u201csituational limitations\u201d such as in bright sunlight or in an environment where they cannot listen to audio.<\/li>\n\n\n\n<li>People using a slow internet connection or who have limited bandwidth.<\/li>\n<\/ul>\n\n\n\n<p><strong>Benefits:<\/strong><\/p>\n\n\n\n<ul>\n<li><strong>Three out of four isn\u2019t good enough. <\/strong>If 1 out of 4 adults have some kind of disability, that\u2019s potentially 25% of your visitors who might have difficulty accessing your website\u2019s content.&nbsp;<\/li>\n\n\n\n<li><strong>Make it easy to donate. <\/strong>Ensuring your nonprofit website is accessible and inclusive for all your visitors is not only the right thing to do ethically, it also can increase your web-based donations. Potential donors who are unable to access your website might also be unable to access your donation tools.<\/li>\n\n\n\n<li><strong>Minimize Legal Risk. <\/strong><a href=\"https:\/\/www.natlawreview.com\/article\/when-good-sites-go-bad-growing-risk-website-accessibility-litigation\" target=\"_blank\" rel=\"noreferrer noopener\">Website accessibility litigation is on the rise<\/a>. Don\u2019t put your nonprofit at risk.<\/li>\n<\/ul>\n\n\n\n<p><strong>Web Accessibility Best Practices*:<\/strong><\/p>\n\n\n\n<ul>\n<li><strong>Engage a certified web accessibility expert to audit your website and remediate if necessary. A certified web accessibility professional will start with checking for design and implementation errors such as:<\/strong>\n<ul>\n<li>Include alt image tags.<\/li>\n\n\n\n<li>Ensure sufficient color contrast.<\/li>\n\n\n\n<li>Do not include text on images.<\/li>\n\n\n\n<li>And much more&#8230;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Relying on a certified web accessibility professional is key to ensuring your website meets the required standards.<\/p>\n\n\n\n<p><em>*This list is meant to represent a sample of the WCAG 2.1 requirements set forth by the <\/em><a href=\"https:\/\/www.w3.org\/Consortium\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>The World Wide Web Consortium (W3C)<\/em><\/a><em> and is not a comprehensive guide. <\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Optimize Design for Mobile<\/strong><\/h3>\n\n\n\n<p><a href=\"https:\/\/www.broadbandsearch.net\/blog\/mobile-desktop-internet-usage-statistics\" target=\"_blank\" rel=\"noreferrer noopener\">In 2019 mobile internet usage outpaced desktop<\/a>, and based on trends we\u2019re likely to see mobile usage continue to grow. Since more and more people are using their mobile devices to access the internet, it\u2019s becoming more and more important that your website not only functions well on mobile devices, but also looks good. In a lot of instances, function and design go hand in hand.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/mobile.png\"><img decoding=\"async\" src=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/mobile.png\" alt=\"Example of mobile-friendly website design from Boys &amp; Girls Clubs of Broward County\" class=\"wp-image-23590\" width=\"314\" height=\"544\" srcset=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/mobile.png 419w, https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/mobile-173x300.png 173w\" sizes=\"(max-width: 314px) 100vw, 314px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Benefit:<\/strong><\/p>\n\n\n\n<ul>\n<li>Tucking the main menu into a hamburger menu reduces the size of the header and frees up screen space for other content.<\/li>\n\n\n\n<li>Linkable contact info lets your visitor contact you easily without leaving your website.<\/li>\n\n\n\n<li>Optimized images allow for faster page load.<\/li>\n\n\n\n<li>Reduce frustrating unintentional clicks with a larger touchable target.<\/li>\n<\/ul>\n\n\n\n<p><strong>Mobile Design Best Practices:<\/strong><\/p>\n\n\n\n<ul>\n<li><strong>Hamburger menus.<\/strong> Hide your menu items in a hamburger menu to reduce the height of your mobile header (high-value content like donation buttons and search functionality can be positioned next to your logo outside of the hamburger menu).<\/li>\n\n\n\n<li><strong>Don\u2019t be a stranger.<\/strong> Link phone numbers and addresses so your visitors can contact you directly by clicking on your phone number or open maps with your address.<\/li>\n\n\n\n<li><strong>Make it fast.<\/strong> Optimize your images for screen viewing (reduce the resolution and dimensions of your images).<\/li>\n\n\n\n<li><strong>Implement a finger-friendly design. <\/strong>Place touchable targets like links and buttons with enough space to avoid an unintentional click. Recommended minimum target sizes range between 28 and 44 pixels.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5. Don\u2019t Count Your Menu Items<\/strong><\/h3>\n\n\n\n<p>While too many options can overwhelm a user and cause them not to read the options, too few menu items can make for vague categories and may not offer a strong information path and lack clear guidance of what the menu items contain.<\/p>\n\n\n\n<p>A popular menu best practice belief is that 7 is the max number of menu items a navigational system should contain. This belief is based on a 1956 classic study by George Miller called \u201cThe Magical 7, Plus or Minus 2\u201d which found that humans on average can only retain about 5-9 items in their short-term memory. However, menus are persistent and do not require the user to memorize them.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/menu.png\"><img decoding=\"async\" width=\"725\" height=\"450\" src=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/menu.png\" alt=\"Example of a nonprofit website navigation menu for Live United\" class=\"wp-image-23591\" srcset=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/menu.png 725w, https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/menu-300x186.png 300w\" sizes=\"(max-width: 725px) 100vw, 725px\" \/><\/a><\/figure><\/div>\n\n\n<p><strong>Benefits:<\/strong><\/p>\n\n\n\n<ul>\n<li>Well recognized label naming conventions help your visitor navigate throughout your website.<\/li>\n\n\n\n<li>Organized menu layout helps your visitor understand what your website and organization offers.<\/li>\n<\/ul>\n\n\n\n<p><strong>Menu Best Practices:<\/strong><\/p>\n\n\n\n<ul>\n<li><strong>List high-level categories. <\/strong>Your website visitors will use your menu items to get a sense of what your website and organization offer before they begin to scroll.<\/li>\n\n\n\n<li><strong>Don\u2019t get creative.<\/strong> Create meaningful, common menu labels that your visitors will recognize.<\/li>\n\n\n\n<li><strong>Organize your menu.<\/strong> Prioritize your most popular or common items at the beginning and end of a menu. Organize your content in logical buckets and name those clearly. That will \u201cadvertise\u201d what you offer on your site.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Since <a href=\"https:\/\/www.ripemedia.com\/best-practices-nonprofit-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">nonprofit website best practices<\/a> and standards continue to evolve, it\u2019s important that your website design and implementation does too. Keeping your website current helps support your organization\u2019s efforts by better informing your community of who you are and what you do.<\/p>\n\n\n\n<p>An easily navigable website with compelling storytelling content and well-designed calls to action can improve conversions, and the community\u2019s perception of your organization.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Final Thoughts<\/h2>\n\n\n\n<p>Does your nonprofit website need some love? <a href=\"https:\/\/www.achievecauses.com\/webinar-rescue-your-website-for-fundraising-success\" target=\"_blank\" rel=\"noreferrer noopener\">Check out this free on-demand webinar<\/a> to learn simple tips and tricks to improve your website design for better engagement and donation conversion (no fancy designer tools required &#8211; we promise)!&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-1\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-qgiv-green-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/www.achievecauses.com\/qgiv\" style=\"color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\">Get a Special Offer from Achieve!<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>About Meredith Wanner Meredith Wanner oversees a team of creatives as the Art Director at Achieve, where she specializes in nonprofit and eCommerce digital experiences with a focus on user strategy and engagement. Meredith has worked closely with national and regional organizations like the Boys &amp; Girls Club, United Way, and the YMCA, as well [&hellip;]<\/p>\n","protected":false},"author":38,"featured_media":23912,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[262,261],"tags":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>5 Nonprofit Website Design Best Practices for 2021 - Fundraising Blog for Nonprofit, Educational, and Faith-Based Organizations<\/title>\n<meta name=\"description\" content=\"Here are five great tips on effective nonprofit website design and best practices from Meredith Wanner at Achieve Agency.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 Nonprofit Website Design Best Practices for 2021 - Fundraising Blog for Nonprofit, Educational, and Faith-Based Organizations\" \/>\n<meta property=\"og:description\" content=\"Here are five great tips on effective nonprofit website design and best practices from Meredith Wanner at Achieve Agency.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/\" \/>\n<meta property=\"og:site_name\" content=\"Fundraising Blog for Nonprofit, Educational, and Faith-Based Organizations\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-30T15:33:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-31T23:59:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/man-working-on-web-site-design-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Guest Post\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Guest Post\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/\"},\"author\":{\"name\":\"Guest Post\",\"@id\":\"https:\/\/www.qgiv.com\/blog\/#\/schema\/person\/1c62402926e8307f7b51fa1fd4622587\"},\"headline\":\"5 Nonprofit Website Design Best Practices for 2021\",\"datePublished\":\"2021-03-30T15:33:27+00:00\",\"dateModified\":\"2025-07-31T23:59:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/\"},\"wordCount\":1666,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.qgiv.com\/blog\/#organization\"},\"articleSection\":[\"Marketing and social media\",\"Nonprofit strategies\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/\",\"url\":\"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/\",\"name\":\"5 Nonprofit Website Design Best Practices for 2021 - Fundraising Blog for Nonprofit, Educational, and Faith-Based Organizations\",\"isPartOf\":{\"@id\":\"https:\/\/www.qgiv.com\/blog\/#website\"},\"datePublished\":\"2021-03-30T15:33:27+00:00\",\"dateModified\":\"2025-07-31T23:59:00+00:00\",\"description\":\"Here are five great tips on effective nonprofit website design and best practices from Meredith Wanner at Achieve Agency.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.qgiv.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Nonprofit strategies\",\"item\":\"https:\/\/www.qgiv.com\/blog\/category\/nonprofit-strategies\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"5 Nonprofit Website Design Best Practices for 2021\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.qgiv.com\/blog\/#website\",\"url\":\"https:\/\/www.qgiv.com\/blog\/\",\"name\":\"Fundraising Blog for Nonprofit, Educational, and Faith-Based Organizations\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.qgiv.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.qgiv.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.qgiv.com\/blog\/#organization\",\"name\":\"Bloomerang Fundraising, formerly Qgiv\",\"url\":\"https:\/\/www.qgiv.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.qgiv.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2025\/09\/Bloomerang-Product-Lockup-Pos-Fundraising-Digital.png\",\"contentUrl\":\"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2025\/09\/Bloomerang-Product-Lockup-Pos-Fundraising-Digital.png\",\"width\":1425,\"height\":515,\"caption\":\"Bloomerang Fundraising, formerly Qgiv\"},\"image\":{\"@id\":\"https:\/\/www.qgiv.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.qgiv.com\/blog\/#\/schema\/person\/1c62402926e8307f7b51fa1fd4622587\",\"name\":\"Guest Post\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.qgiv.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4968a387e9133217baa87f10d59b1447?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4968a387e9133217baa87f10d59b1447?s=96&d=mm&r=g\",\"caption\":\"Guest Post\"},\"description\":\"We love featuring work from our friends in the nonprofit industry! Interested in being a guest author on our blog? Email us at marketing@qgiv.com!\",\"url\":\"https:\/\/www.qgiv.com\/blog\/author\/guest-post\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"5 Nonprofit Website Design Best Practices for 2021 - Fundraising Blog for Nonprofit, Educational, and Faith-Based Organizations","description":"Here are five great tips on effective nonprofit website design and best practices from Meredith Wanner at Achieve Agency.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/","og_locale":"en_US","og_type":"article","og_title":"5 Nonprofit Website Design Best Practices for 2021 - Fundraising Blog for Nonprofit, Educational, and Faith-Based Organizations","og_description":"Here are five great tips on effective nonprofit website design and best practices from Meredith Wanner at Achieve Agency.","og_url":"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/","og_site_name":"Fundraising Blog for Nonprofit, Educational, and Faith-Based Organizations","article_published_time":"2021-03-30T15:33:27+00:00","article_modified_time":"2025-07-31T23:59:00+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2021\/03\/man-working-on-web-site-design-1.jpg","type":"image\/jpeg"}],"author":"Guest Post","twitter_misc":{"Written by":"Guest Post","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/#article","isPartOf":{"@id":"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/"},"author":{"name":"Guest Post","@id":"https:\/\/www.qgiv.com\/blog\/#\/schema\/person\/1c62402926e8307f7b51fa1fd4622587"},"headline":"5 Nonprofit Website Design Best Practices for 2021","datePublished":"2021-03-30T15:33:27+00:00","dateModified":"2025-07-31T23:59:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/"},"wordCount":1666,"commentCount":0,"publisher":{"@id":"https:\/\/www.qgiv.com\/blog\/#organization"},"articleSection":["Marketing and social media","Nonprofit strategies"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/","url":"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/","name":"5 Nonprofit Website Design Best Practices for 2021 - Fundraising Blog for Nonprofit, Educational, and Faith-Based Organizations","isPartOf":{"@id":"https:\/\/www.qgiv.com\/blog\/#website"},"datePublished":"2021-03-30T15:33:27+00:00","dateModified":"2025-07-31T23:59:00+00:00","description":"Here are five great tips on effective nonprofit website design and best practices from Meredith Wanner at Achieve Agency.","breadcrumb":{"@id":"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.qgiv.com\/blog\/nonprofit-website-design-best-practices\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.qgiv.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Nonprofit strategies","item":"https:\/\/www.qgiv.com\/blog\/category\/nonprofit-strategies\/"},{"@type":"ListItem","position":3,"name":"5 Nonprofit Website Design Best Practices for 2021"}]},{"@type":"WebSite","@id":"https:\/\/www.qgiv.com\/blog\/#website","url":"https:\/\/www.qgiv.com\/blog\/","name":"Fundraising Blog for Nonprofit, Educational, and Faith-Based Organizations","description":"","publisher":{"@id":"https:\/\/www.qgiv.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.qgiv.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.qgiv.com\/blog\/#organization","name":"Bloomerang Fundraising, formerly Qgiv","url":"https:\/\/www.qgiv.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.qgiv.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2025\/09\/Bloomerang-Product-Lockup-Pos-Fundraising-Digital.png","contentUrl":"https:\/\/www.qgiv.com\/blog\/wp-content\/uploads\/2025\/09\/Bloomerang-Product-Lockup-Pos-Fundraising-Digital.png","width":1425,"height":515,"caption":"Bloomerang Fundraising, formerly Qgiv"},"image":{"@id":"https:\/\/www.qgiv.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.qgiv.com\/blog\/#\/schema\/person\/1c62402926e8307f7b51fa1fd4622587","name":"Guest Post","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.qgiv.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4968a387e9133217baa87f10d59b1447?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4968a387e9133217baa87f10d59b1447?s=96&d=mm&r=g","caption":"Guest Post"},"description":"We love featuring work from our friends in the nonprofit industry! Interested in being a guest author on our blog? Email us at marketing@qgiv.com!","url":"https:\/\/www.qgiv.com\/blog\/author\/guest-post\/"}]}},"_links":{"self":[{"href":"https:\/\/www.qgiv.com\/blog\/wp-json\/wp\/v2\/posts\/23909"}],"collection":[{"href":"https:\/\/www.qgiv.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.qgiv.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.qgiv.com\/blog\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qgiv.com\/blog\/wp-json\/wp\/v2\/comments?post=23909"}],"version-history":[{"count":10,"href":"https:\/\/www.qgiv.com\/blog\/wp-json\/wp\/v2\/posts\/23909\/revisions"}],"predecessor-version":[{"id":40002,"href":"https:\/\/www.qgiv.com\/blog\/wp-json\/wp\/v2\/posts\/23909\/revisions\/40002"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.qgiv.com\/blog\/wp-json\/wp\/v2\/media\/23912"}],"wp:attachment":[{"href":"https:\/\/www.qgiv.com\/blog\/wp-json\/wp\/v2\/media?parent=23909"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.qgiv.com\/blog\/wp-json\/wp\/v2\/categories?post=23909"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.qgiv.com\/blog\/wp-json\/wp\/v2\/tags?post=23909"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}