{"id":8163,"date":"2016-07-25T00:00:00","date_gmt":"2016-07-25T00:00:00","guid":{"rendered":"https:\/\/www.causevox.com\/?p=8163"},"modified":"2024-05-08T20:04:08","modified_gmt":"2024-05-08T20:04:08","slug":"mobile-friendly-nonprofit-website","status":"publish","type":"post","link":"https:\/\/www.causevox.com\/blog\/mobile-friendly-nonprofit-website\/","title":{"rendered":"7 Steps To Ensure Your Nonprofit Has A Mobile-Friendly Website"},"content":{"rendered":"<p>Are you reading this post on a desktop? If so, then you\u2019re in the minority. In fact, <a href=\"https:\/\/searchenginewatch.com\/sew\/opinion\/2353616\/mobile-now-exceeds-pc-the-biggest-shift-since-the-internet-began\" target=\"_blank\" rel=\"noopener nofollow\">mobile usage was higher<\/a> than desktop usage beginning in 2014, and the gap between mobile-only and desktop-only internet usage is growing by the year.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-8165 aligncenter\" src=\"https:\/\/causevox.com\/wp-content\/uploads\/2024\/05\/Screen-Shot-2016-07-05-at-1.33.45-PM.png\" alt=\"Nonprofit mobile website\" width=\"604\" height=\"326\" \/><\/p>\n<p>Therefore, it\u2019s essential that you prepare your nonprofit\u2019s website for a mobile audience.<\/p>\n<p>To ensure that your nonprofit has a <a href=\"https:\/\/www.causevox.com\" target=\"_blank\" rel=\"noopener\">mobile-friendly fundraising website<\/a>, there are a few important steps that you need to take.<\/p>\n<h3 style=\"text-align: center; font-size: 1.75em;\"><em>&#8220;To ensure your nonprofit has a mobile-friendly website, there are a few important steps you need to take&#8230;&#8221;<\/em> <a href=\"https:\/\/ctt.ec\/ANcqM\" target=\"_blank\" rel=\"noopener\"><span style=\"font-size: .5em;\"><i class=\"icon ion-social-twitter\"><\/i>tweet this<\/span><\/a><\/h3>\n<p>Let\u2019s examine those steps in detail, and provide a few examples of nonprofit mobile websites that are doing it right.<\/p>\n<h2>1. Start With The Right Design<\/h2>\n<figure id=\"attachment_8176\" aria-describedby=\"caption-attachment-8176\" style=\"width: 576px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8176 size-large\" src=\"https:\/\/causevox.com\/wp-content\/uploads\/2024\/05\/Screenshot_2016-07-22-15-57-56-1-576x1024.png\" alt=\"mobile-friendly website\" width=\"576\" height=\"1024\" \/><figcaption id=\"caption-attachment-8176\" class=\"wp-caption-text\">United Way Mobile-Friendly Website<\/figcaption><\/figure>\n<p>You have a few options when it comes to creating a mobile-friendly website.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.causevox.com\/blog\/mobile-optimized-fundraising-site\/\" target=\"_blank\" rel=\"noopener\">Responsive Design<\/a>: This is the most common way to make your website mobile friendly. With this option, <a href=\"https:\/\/www.causevox.com\/blog\/great-nonprofit-website-examples\/\" target=\"_blank\" rel=\"noopener\">your desktop website <\/a>adapts based on the width of the browser that is accessing the site.\n<ul>\n<li>If you host your website on a platform such as WordPress, then you have access to a number of responsive design templates like these from <a href=\"https:\/\/www.elegantthemes.com\/gallery\/category\/responsive\/\" target=\"_blank\" rel=\"noopener nofollow\">Elegant Themes<\/a>.<\/li>\n<\/ul>\n<\/li>\n<li>Adaptive Design: Your website design and content are altered (HTML and CSS) based on the user\u2019s device.<\/li>\n<li>Mobile Site: This option involves the creation of an entirely different website for mobile users on a subdomain (ie. <a href=\"https:\/\/www.google.com\/mobile\/\" target=\"_blank\" rel=\"noopener\">www.m.google.com<\/a> or <a href=\"https:\/\/www.redcross.org\/mo2\" target=\"_blank\" rel=\"noopener nofollow\">www.redcross.org\/mo2<\/a>). The site\u2019s structure can be similar to a desktop website, or be changed completely depending on your preference.<\/li>\n<\/ul>\n<p>Nonprofits and charities often work with a limited budget, which is one of the reasons why responsive design is the mobile-friendly design option used by most organizations in the nonprofit field.<\/p>\n<h2>2. Keep Content At A Minimum<\/h2>\n<p>Mobile users want simplicity, which is why <a href=\"https:\/\/www.causevox.com\/blog\/5-unusual-places-find-content-ideas\/\" target=\"_blank\" rel=\"noopener\">website content<\/a> viewed on a mobile device should be kept to a minimum.<\/p>\n<h3 style=\"text-align: center; font-size: 1.75em;\"><em>&#8220;Mobile users want simplicity, which is why website content viewed on a mobile device should be kept to a minimum&#8230;&#8221;<\/em> <a href=\"https:\/\/ctt.ec\/agc9M\" target=\"_blank\" rel=\"noopener\"><span style=\"font-size: .5em;\"><i class=\"icon ion-social-twitter\"><\/i>tweet this<\/span><\/a><\/h3>\n<p>Give your mobile users the information they need from your mobile site by doing the following:<\/p>\n<ul>\n<li>Prioritize the information that you want your audience to see first<\/li>\n<li>Avoid too many words or images on any page. Keep it clean and simple (around 2-4 paragraphs is ideal).<\/li>\n<li>Arrange content (including images and any calls to action) in a single column.<\/li>\n<\/ul>\n<p>For a great example of simplified and mobile-optimized content, check out these screen shots comparing <a href=\"https:\/\/www.heifer.org\/\" target=\"_blank\" rel=\"noopener nofollow\">Heifer International<\/a>\u2019s mobile site to the desktop site. Note how the information is prioritized on the mobile site.<\/p>\n<figure id=\"attachment_8167\" aria-describedby=\"caption-attachment-8167\" style=\"width: 576px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8167 size-large\" src=\"https:\/\/causevox.com\/wp-content\/uploads\/2024\/05\/Screenshot_2016-06-29-12-56-13-576x1024.png\" alt=\"mobile-friendly website\" width=\"576\" height=\"1024\" \/><figcaption id=\"caption-attachment-8167\" class=\"wp-caption-text\">Heifer International Mobile<\/figcaption><\/figure>\n<figure id=\"attachment_8168\" aria-describedby=\"caption-attachment-8168\" style=\"width: 740px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8168 size-full\" src=\"https:\/\/causevox.com\/wp-content\/uploads\/2024\/05\/Screen-Shot-2016-06-29-at-12.56.35-PM-e1469218733931.png\" alt=\"mobile-friendly website\" width=\"740\" height=\"393\" \/><figcaption id=\"caption-attachment-8168\" class=\"wp-caption-text\">Heifer International Desktop<\/figcaption><\/figure>\n<h2>3. Simplify Forms<\/h2>\n<p>Nonprofits tend to ask for a good deal of information from website visitors, especially those that are interested in giving a <a href=\"https:\/\/www.causevox.com\/donation-page\/\">donation<\/a> or signing up for something like a newsletter. What you want to avoid is having your audience fill out an extremely long online form on their mobile device.<\/p>\n<p>Follow these tips to simplify your online forms:<\/p>\n<ul>\n<li>Require just the basic information you need to capture that donation, add someone to your email newsletter list, etc.<\/li>\n<li>Enable pre-population of information from autofill tools (like Google) or GPS-enabled location services.<\/li>\n<li>Use the<a href=\"https:\/\/uxmovement.com\/mobile\/input-types-give-users-the-right-keyboard-on-mobile-forms\/\" target=\"_blank\" rel=\"noopener nofollow\"> appropriate mobile keyboard<\/a> for each field, including phone number, email, and credit card information.<\/li>\n<\/ul>\n<p>Compare the mobile donation page for American Red Cross to their website\u2019s donation page and notice the difference.<\/p>\n<figure id=\"attachment_8173\" aria-describedby=\"caption-attachment-8173\" style=\"width: 576px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8173 size-large\" src=\"https:\/\/causevox.com\/wp-content\/uploads\/2024\/05\/Screenshot_2016-06-29-12-13-28-576x1024.png\" alt=\"mobile-friendly website\" width=\"576\" height=\"1024\" \/><figcaption id=\"caption-attachment-8173\" class=\"wp-caption-text\">Red Cross Mobile<\/figcaption><\/figure>\n<figure id=\"attachment_8169\" aria-describedby=\"caption-attachment-8169\" style=\"width: 740px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8169 size-full\" src=\"https:\/\/causevox.com\/wp-content\/uploads\/2024\/05\/Screen-Shot-2016-06-29-at-12.32.48-PM-e1469218984731.png\" alt=\"mobile-friendly website\" width=\"740\" height=\"391\" \/><figcaption id=\"caption-attachment-8169\" class=\"wp-caption-text\">Red Cross Desktop<\/figcaption><\/figure>\n<p>Remember that you can always gather more information about your audience over time through email, surveys, and subsequent donations.<\/p>\n<h2>4. Consider Sizing<\/h2>\n<p>Because mobile users aren\u2019t likely to stay on your site for very long if they have to \u201cwork\u201d at it, it is imperative that the sizing of everything from your images to call to action buttons are optimized for mobile devices.<\/p>\n<p>Do the following to make viewing your site easy for your mobile audience:<\/p>\n<ul>\n<li>Adjust font and button sizes to fit an index finger or thumb, which comes out to between <a href=\"https:\/\/www.smashingmagazine.com\/2012\/02\/finger-friendly-design-ideal-mobile-touchscreen-target-sizes\/\" target=\"_blank\" rel=\"noopener nofollow\">45-57 pixels<\/a>. And, don\u2019t forget to account for \u201cfat fingers.\u201d\n<ul>\n<li>Font should be at least 14 point<\/li>\n<li>Avoid over-stylized fonts<\/li>\n<\/ul>\n<\/li>\n<li>Adjust your site so that users won\u2019t have to zoom in or out to view the content<\/li>\n<li>Avoid page-long scroll bars and focus on making a clickable menu or a scrolling menu bar.<\/li>\n<li>You also don\u2019t want to have too many things to click in one place, such as your social media icons. Size and space your clickable buttons apart to avoid unnecessary clicks.<\/li>\n<\/ul>\n<p>The difference between the sizes of the social media icons of <a href=\"https:\/\/www.worldbicyclerelief.org\/\" target=\"_blank\" rel=\"noopener\">World Bicycle Relief\u2019<\/a>s mobile site and the <a href=\"https:\/\/spinabifidaassociation.org\/\" target=\"_blank\" rel=\"noopener\">Spina Bifida Association<\/a>, both shown below, are significant.<\/p>\n<figure id=\"attachment_8172\" aria-describedby=\"caption-attachment-8172\" style=\"width: 576px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8172 size-large\" src=\"https:\/\/causevox.com\/wp-content\/uploads\/2024\/05\/Screenshot_2016-06-29-12-23-56-576x1024.png\" alt=\"mobile-friendly website\" width=\"576\" height=\"1024\" \/><figcaption id=\"caption-attachment-8172\" class=\"wp-caption-text\">Spina Bifida Association<\/figcaption><\/figure>\n<figure id=\"attachment_8171\" aria-describedby=\"caption-attachment-8171\" style=\"width: 576px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8171 size-large\" src=\"https:\/\/causevox.com\/wp-content\/uploads\/2024\/05\/Screenshot_2016-06-29-12-24-27-576x1024.png\" alt=\"mobile-friendly website\" width=\"576\" height=\"1024\" \/><figcaption id=\"caption-attachment-8171\" class=\"wp-caption-text\">World Bicycle Relif<\/figcaption><\/figure>\n<h2>5. Optimize Images And Video<\/h2>\n<p>Images and videos are a great way to share your nonprofit\u2019s message without cluttering a site with lengthy written content. However, you don\u2019t want to slow down your page speed by overloading your mobile site with too many features. You\u2019re <a href=\"https:\/\/blog.kissmetrics.com\/loading-time\/\" target=\"_blank\" rel=\"noopener nofollow\">bound to lose visitors<\/a> if this happens!<\/p>\n<h3 style=\"text-align: center; font-size: 1.75em;\"><em>&#8220;You don\u2019t want to slow down your page speed by overloading your mobile site with too many features&#8230;&#8221;<\/em> <a href=\"https:\/\/ctt.ec\/39Xb7\" target=\"_blank\" rel=\"noopener\"><span style=\"font-size: .5em;\"><i class=\"icon ion-social-twitter\"><\/i>tweet this<\/span><\/a><\/h3>\n<p>Optimize your images for mobile viewing by<\/p>\n<ul>\n<li>Choosing<a href=\"https:\/\/www.causevox.com\/blog\/vivid-photo-storytelling-apps\/\" target=\"_blank\" rel=\"noopener\"> images <\/a>that are still clear when viewed at smaller sizes (simple pictures work best)<\/li>\n<li>Size your images to work with your website, making sure they are proportional to the rest of your site content.<\/li>\n<li>Compress your images with a photo resizer like this one from <a href=\"https:\/\/www.picresize.com\/\" target=\"_blank\" rel=\"noopener nofollow\">PicResize<\/a>.<\/li>\n<\/ul>\n<p>Optimize <a href=\"https:\/\/www.causevox.com\/blog\/5-inspirational-nonprofit-impact-story-videos\/\" target=\"_blank\" rel=\"noopener\">your videos<\/a> by using <a href=\"https:\/\/software.intel.com\/en-us\/html5\/hub\/blogs\/html5-video-on-mobile-a-primer\" target=\"_blank\" rel=\"noopener\">HTML5<\/a>.<\/p>\n<p>A great mobile-friendly website, like this one from <a href=\"https:\/\/worldhelp.net\/\" target=\"_blank\" rel=\"noopener nofollow\">World Help<\/a>, will play videos and show images seamlessly on any device.<\/p>\n<figure id=\"attachment_8174\" aria-describedby=\"caption-attachment-8174\" style=\"width: 576px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8174 size-large\" src=\"https:\/\/causevox.com\/wp-content\/uploads\/2024\/05\/Screenshot_2016-06-29-12-50-33-576x1024.png\" alt=\"mobile-friendly website\" width=\"576\" height=\"1024\" \/><figcaption id=\"caption-attachment-8174\" class=\"wp-caption-text\">World Help<\/figcaption><\/figure>\n<h2>6. Avoid These Things<\/h2>\n<p>Oddly, it\u2019s just as important to focus on the things you shouldn\u2019t be doing then the things you should be doing when creating a mobile-friendly website.<\/p>\n<p>So, avoid the following to give your users the best possible mobile experience:<\/p>\n<ul>\n<li>Overusing JavaScript<\/li>\n<li>Using Flash or other specialized plug-ins<\/li>\n<li>Pop-ups<\/li>\n<\/ul>\n<h2>7. Test It<\/h2>\n<p>When all&#8217;s said and done, it\u2019s time to test, test, and test again. Have everyone in your office take out their mobile devices and attempt to access your website. Note any issues and resolve promptly.<\/p>\n<p>There are other tests available online that will grade the mobile-friendliness of your website and offer suggestions. For example, you can ensure that your website is up-to-snuff, by doing Google\u2019s Mobile-Friendly Test.<\/p>\n<p>Do you have any other suggestions for making a <a href=\"https:\/\/www.causevox.com\/features\/design\/\" target=\"_blank\" rel=\"noopener\">mobile-friendly fundraising website<\/a>? Let us know below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you reading this post on a desktop? If so, then you\u2019re in the minority. In fact, mobile usage was higher than desktop usage beginning in 2014, and the gap between mobile-only and desktop-only internet usage is growing by the year. Therefore, it\u2019s essential that you prepare your nonprofit\u2019s website for a mobile audience. To [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":50373,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-8163","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-article"],"acf":[],"featured_image_src":"https:\/\/www.causevox.com\/wp-content\/uploads\/2024\/05\/ensure-nonprofit-mobile-friendly-site-600x400.jpg","featured_image_src_square":"https:\/\/www.causevox.com\/wp-content\/uploads\/2024\/05\/ensure-nonprofit-mobile-friendly-site-600x492.jpg","author_info":{"display_name":"Candace Cody","author_link":"https:\/\/www.causevox.com\/author\/candace\/"},"_links":{"self":[{"href":"https:\/\/www.causevox.com\/wp-json\/wp\/v2\/posts\/8163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.causevox.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.causevox.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.causevox.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.causevox.com\/wp-json\/wp\/v2\/comments?post=8163"}],"version-history":[{"count":0,"href":"https:\/\/www.causevox.com\/wp-json\/wp\/v2\/posts\/8163\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.causevox.com\/wp-json\/wp\/v2\/media\/50373"}],"wp:attachment":[{"href":"https:\/\/www.causevox.com\/wp-json\/wp\/v2\/media?parent=8163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.causevox.com\/wp-json\/wp\/v2\/categories?post=8163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.causevox.com\/wp-json\/wp\/v2\/tags?post=8163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}