By Sara White
GiveCamp NWA’s mission is simple: provide the tools nonprofits need to tell their story and grow their organization. To that end, we typically build websites for nonprofits.
A website consists of coded pages on the World Wide Web and is viewable to anyone who comes across it. You usually find websites using a search engine, such as Google or Bing, or you can type in the website’s name directly (otherwise known as a URL, like www.example.com).
A website is different from a nonprofit’s Facebook or LinkedIn company page, as a website is fully customizable and can contain anything you want. We often encourage nonprofits to have both and to link them to each other.
What makes up a website?
A website contains content that a web host saves on a server, accessible to the public by way of its domain name, and managed using a content management system (CMS), like WordPress.
What is a web host, a domain name, and a CMS?
A web host is a company that owns large physical computers called servers, on which the website’s data lives. All the site content is on this server, like pictures, copy, and even the software that takes donations.
You pay a monthly fee for the hosting service, which helps the web host maintain the website’s technology and pays for the cost of holding the site. A web host is also in charge of other aspects of a website, such as customized email addresses and other technology such as donor databases.
A domain name is the basis for your URL (Uniform Resource Locator), also known as the web address. The domain name is the main portion of the URL, like example.com versus example.com/donate.
You’ll need to update your domain name registration once a year to retain your URLs. Sometimes, the web host is in charge of the domain name registration and rolls this fee into its service charges.
A content management system (CMS) is how you edit your website. A CMS is how you upload images, style the site, and add text. The CMS is the “backend” of the website, the man behind the curtain.
Content management systems, like WordPress or Weebly, make your life easier by removing the need to code the website. With a CMS, if you need to update an event or post on your blog, it’s as easy as just a few clicks of a button.
Common terms when creating a website
There are a lot of terms thrown about when GiveCamp volunteers create a website that are likely not familiar to nonprofits. These terms include:
- Hypertext markup language (HTML)
- Cascading stylesheets (CSS)
- JavaScript (JS)
- Information architecture (IA)
- User experience (UX)
- Search engine optimization (SEO)
Let’s go through these.
What is HTML?
Hypertext markup language (HTML) consists of the meat and bones of the website. It is a markup language that comprises the “what” of a website: what is an image, what is a paragraph, what is a heading, etc.
HTML also contains essential information about the website that other applications (like Google) read and note when considering the website. This information is metadata and consists of the website’s title, description, language, and associated files (such as CSS and JavaScript).
You can see a lot of this information when you search for a site. You’ll see the website’s title (e.g., GiveCamp NWA – Serving Northwest Arkansas Non Profits) and its description (e.g., GiveCamp NWA is a 501c3 nonprofit organization that focuses solely on serving other nonprofits through providing various technology tools.).
You can view the HTML of any website by right-clicking on the text and going to “View Page Source.”
HTML snippet of GiveCamp NWA’s home page
In the example above, we see a heading, a paragraph, and a bulleted list. Don’t worry, though – WordPress made all of this code automatically when we built the website. You won’t have to learn a whole new language!
What is CSS?
If HTML is the meat and bones of a website, cascading stylesheets (CSS) are the hair, skin, and makeup of a site. This scripting language is how we make the website “pretty.”
We use CSS to manipulate the way the text appears on a website. If, for example, we want a top heading to appear bolded and in pink, we use CSS to do that. We can round the corners of buttons and put borders around images.
Again, we create the CSS using a content management system like WordPress. When we pick a WordPress theme, we generate the CSS’s main components that we then alter to suit your needs, such as your colors and logo.
CSS snippet of GiveCamp NWA’s website
In the example above, we see how we would like to style an image that we’ve designated as an emoji. We’ve given it a width, a height, and a margin and determined how it should appear on the screen.
What is JavaScript?
JavaScript (JS) is the nervous system of a website. This scripting language can literally tell the HTML to move and focus the CSS on some parts and not others.
JavaScript is especially handy when it comes to forms. Have you ever encountered a form with required fields that turn red when you don’t fill them out? Likely, that was JavaScript.
JavaScript helps CSS a great deal with such libraries as JQuery or Ajax, which create “elastic” websites that are viewable on a desktop, tablet, and cell phone seamlessly.
We use JavaScript for other technological applications such as integrating with PayPal or building advanced technology such as tracking volunteers’ hours.
JavaScript snippet from GiveCamp NWA’s homepage
In the example above, the JavaScript code changes the date and time formatting for the blog post feed, specifically to display the full name of the month, then the day, and then the full year.
What is information architecture (IA)?
The information architecture (IA) of a website is how we structure the content. IA includes the navigation, categories, and even the headings.
For nonprofits, we’d break down how we want to display the “high level” information about the organization. So, for example, we’d have navigation showing:
- About Us
- Events
- Volunteer
- Blog
- Donate
- Contact
In this example, we could then add sub-categories to the navigation, such as:
- About Us
- Our Story
- Our Board of Directors
- Our Committees
With a blog, you can also add as many categories and sub-categories as you wish. For example, you may want to have posts about your recent event or to spotlight a particularly active volunteer.
What is user experience (UX)?
The user experience (UX) of a website is how your audience interacts with the site. UX is crucial as it affects the ways people go through your website.
UX considers such things as what colors go well together, which fonts are the most readable, where the calls-to-action (CTAs) will be the most visible, how many slides should go into a slideshow, and the location of the navigation.
While you may have an idea of where things should go on your website, it is the UX designer’s job to maximize engagement with your site. UX designers are also responsible for your site’s accessibility, which is how well every visitor, including those using screenreaders, can read your site.
Accessibility is vital for search engines as well, as they are just looking at the backend of your site and not the front-facing interface. In other words, they can’t “see” your images, so having code like alt tags on every image is vital. (Alt tags are the text placeholders for images.)
What is search engine optimization (SEO)?
Search engine optimization (SEO) measures how you “rank” on the search engine results page, such as Google or Bing. Ranking means how high up in the results list you are.
SEO is essential for nonprofits as it helps potential donors, volunteers, and those in need of your services to find you easily and quickly. Google and other search engines rely heavily on the copy of your website to rank it.
Website crawlers are bits of software that scour the internet looking at websites and deciding what information about them is most relevant. They read your metadata, such as your description, keywords, and title, to determine how to rank your site for a word or phrase.
For example, GiveCamp NWA wants to rank for search terms like “websites for nonprofits” and “Northwest Arkansas GiveCamp.” GiveCamp NWA does not want to rank for “websites for restaurants” or “GiveCamp Seattle,” so we don’t put words relevant to those terms on our site.
Sum up
A website is a lot of things all bundled together to create a story about a nonprofit. Web servers host the data of the website and use a domain name to display it. Content management systems allow you to edit your site with ease.
A website is made up of HTML, CSS, and JavaScript, which the CMS mainly manages. To create a great website, you’ll need intelligent and easy-to-use information architecture, an intuitive user experience, and content that you have optimized for search engines.
This all may seem like a lot, but don’t worry! GiveCamp takes care of most of it, and your project manager, designer, coder, and wordsmith will take care of the rest.
About the author
Sara White is the content coordinator for SupplyPike, a Fayetteville software startup. She has a degree in computer science and ten years’ experience as a web developer. Sara has been a writer in some capacity throughout her career, creating everything from help files to knowledge bases to a supply chain wiki. Sara has volunteered at GiveCamp since 2017.
