No matter your cause, annual revenue, staff size, event calendar, or location – having a website, a virtual presence for your nonprofit, is essential. This is where supporters come to learn of new programs, read about your latest newsworthy achievements, buy tickets for the gala, and make one-time and monthly donations that power your services.
However, in 2018, having a sleek, professional-looking site is not enough: The page also needs to look great on phones. In both the U.S. and Canada, as many people are surfing the web on their phones (about 49%) as they are on desktop.
Take out your phone or tablet and head to your website. How does it look? What kind of impression does the site make?
If the site text is way too small, the images stuck off to one side, the donate button and navigation menu nowhere to be found on mobile… you’re effectively slashing your impact in half.
The good news: You can build the essential components of a mobile-responsive nonprofit website from scratch, for free, all in one afternoon!
In today’s post, we guide you through the process of building a mobile-responsive nonprofit website in one afternoon using drag-and-drop website builder Weebly:
- Choose a website-building platform.
- Set up your account and domain.
- Utilize design tools.
- Add pages to your site.
- Check for mobile responsiveness.
Let’s get started!
Step 1. Choose a website-building platform.
There are plenty of excellent online services that allow beginners to build websites quickly and easily – no coding experience required. Plus, you can start building on almost all platforms for free; premium levels and features can be purchased depending on your needs.
Look for available features, themes, customer support, and as discussed, mobile optimization.
Here are some of the most popular options today, all of which offer templates that automatically reformat your site on mobile devices.
- Weebly. We will demonstrate this process on Weebly. Its user-friendly interface, drag-and-drop editor and right amount of customization options make it a good choice for a first-time webpage. We also like its built-in photo editing capabilities, analytics, and site portability – the ability to download the standard site server folders should you ever move to a different host. Paid plans start at $8 per month, $12 Pro Plan: You get site search, membership page creation and HD video and audio.
- Wix. Offers nearly as many features as Weebly as well as an easy-to-use free version. There’s plenty of design freedom and a marketplace of third-party widgets (like chat and social feeds). You can build the site for free, with a Wix logo at the bottom of every page, or get rid of it starting at $10 per month. Your needs might warrant upgrading to the $14 per month Unlimited Plan, which offers unlimited bandwidth, 10GB of storage, and a $300 ad voucher.
- Squarespace. Offers a ton of stylish templates plus great features like blogging and basic image editing.Their templates are also more rigid, which is an advantage for those with little design experience. No free version is offered – save a 14-day trial – and monthly plans start at $12.
Check out PCMag.com’s rankings of ‘The Best Website Builders of 2018‘ here.
Step 2. Set up your account and domain.
We’re going to build a sample site for today’s theoretical nonprofit, “Event Fundraising Education Services,” on Weebly. (Any platform you choose will have similar steps.)
First, input your name and email to create an account.
Next, choose a theme for your new site. You can change this at any time in the process.
You’ll then be prompted to register or connect your domain (link name). Your three options:
- Use a subdomain of Weebly.com. Note that actually building the site is free; you only pay if you choose to buy a custom domain name (such as www.winspireme.com versus ‘winspire.weebly.com’). Choose this option if you don’t yet have a domain and aren’t sure if you want to get one, or are just testing out the site for free before committing.
Here’s the free sample site we made for this post! https://winspire-efes.weebly.com.
- Purchase a new domain through Weebly. Given that you’ll be using this link on all your marketing materials, we highly recommend getting your own domain. It’s more professional, easily shareable, and affordable; prices range from $3 to $10 per month, and you can save by pre-paying for the domain for one or two years.
Purchasing through Weebly keeps everything conveniently centralized, but you can also shop around on other domain hosts like GoDaddy.com and Monster.com to compare rates.
- Use a domain you already own. If you do purchase your domain name through another host, this is where you connect the two.
When creating your domain, try to make the link as short and punchy as possible. Use abbreviations if necessary; bbbs.org, for example, is a whole lot easier to fit on a wristband than “BigBrothersBigSisters.org”.
Not ready to choose either option? Press the ‘X’ in the upper left corner to continue to editing. This box will pop up again once you hit “Publish”.
Step 3. Utilize design tools.
This is where the fun begins! Weebly has straightforward drag-and-drop features that make it easy to design your site cleanly. Your visitors will have a smooth experience with large, readable fonts; plenty of white space; unified theme colors; and well aligned elements.
Access all the tools in by hitting ‘Build’ in the upper navigation menus.
The basics:
- Titles. In our sample site, the organization name is the first title you see, displayed prominently in front of the main image.
We use titles throughout the pages as section headers. - Text. Drag and drop blocks of text. To edit any font, go to ‘Theme’ in the upper toolbar, then ‘Change Fonts’, then ‘Paragraph Text’. Weebly doesn’t allow you to edit fonts directly in the text box, which keeps text uniform and saves time.
- Images. To replace placeholder images, click on them and selecting ‘Replace Image’ (or ‘Edit Background’ on the main image).
Add captions, link the image to another page, and add space around the image (‘spacing’). You can turn on ‘Lightbox,’ which opens up the image on the site in a mini-popup window.
- Design Tip: If you have text on top of an image, make the text more readable by clicking ‘Edit Image’ – then darken, blur and/or zoom your image.
- Gallery & Slideshow. This module allows you to feature multiple images in a photo gallery or scrolling slideshow. If you have images of different sizes, I recommend going into each photo and cropping with the same aspect ratio (4:3 for normal images and 16:9 for wider images).
- Divider & Spacer. These two structural elements are vital for organizing and decluttering your content. Use a spacer (blank space) + divider line + another spacer in-between sections to add structure to your site, and give the eyes a break.
- Example: To bring in the left and right margins of this block of text, I used two spacers:
You can also use spacers on top of images to create negative space, like so:
- Example: To bring in the left and right margins of this block of text, I used two spacers:
- YouTube. Adding a video is the best way to convey a lot of information, and the personality of your organization, in a short period of time. Easily embed YouTube videos or upload one to the site using the Video module.
- Social Icons. Quickly link visitors to your Facebook page, Instagram and Twitter feed. Personally I check out these links on websites all the time; it’s just another way to engage brand-new visitors and faithful supporters alike.
Add captions, link the image to another page, and add space around the image (‘spacing’). You can turn on ‘Lightbox,’ which opens up the image on the site in a mini-popup window.
You can also use spacers on top of images to create negative space, like so:
The more you familiarize yourself with the features, you’ll see just how sophisticated you can get with your design.
Step 4. Add pages to your site.
Here are 3 important pages to get your nonprofit webpage started:
- Homepage. This is like your organization’s storefront display – it’s the first thing visitors see. Take care polishing it up with concise text and bold images.
- About Us. Here you can go into more details about your organization history, scope, noteworthy statistics and quotes that demonstrate your impact. We included the Vision and Mission statements and a slideshow of events.
- Donate/Get Involved. How can people support your cause? They may be able to volunteer their time, apply for jobs, donate in-kind gifts, and set up monthly and one-time gifts.
Once you’ve tackled these pages, you can create other pages like History, Events, Photo Gallery, Campaign Updates, Contact Us, Subscribe and more. Just visit the “Pages” tab to organize, add and rearrange pages.
A sample menu setup:
As long as you keep the top navigation menu clean (no more than, say, 5 ‘parent’ pages – here we have 4), you can have many more subpages for visitors that want to dig a little deeper.
Step 5. Check for mobile responsiveness.
As stated, Weebly automatically resizes and moves all the elements on your site to look great on mobile phones. That said, you still need to preview how it looks on devices.
On the top toolbar, all the way to the right, click on the icon that looks like a computer. Select ‘Mobile’ to preview and rearrange elements as necessary.
Here’s just a couple sample pages on how the site automatically resized elements to look great on phones and tablets, no extra effort on our part required…
Donate page
Desktop: 
Mobile:
Contact Us
Desktop:
Mobile:
That’s it! We built an entire free site on Weebly in just a couple hours. Check out the final product anytime, on any device:
https://winspire-efes.weebly.com
We hope you found this tutorial helpful. Please share with your team and stay tuned to Winspire News; next week we will offer the step-by-step instructions to implementing website donation tools that make it simple to give on any device.
{{cta(‘ffdba054-6164-4872-a84d-32a648ecb088’)}}
Questions or advice for web design newbies? Let us know in the comments below!
