Sometimes it’s nice to knock out a quick website without it being a part of a much larger initiative. Most of my digital work revolves around increasingly complex decoupled data infrastructure, so when I’m asked to create a website with zero budget, it feels almost like a vacation!
For this project, I was tasked with developing a website for the newly formed Sandy Springs Police Foundation. SSPDfoundation.org would serve two purposes:
- To provide interested parties with general information about the foundation.
- To educate people about a Georgia tax program that allows taxpayers to earn a state tax credit equivalent to the amount of money they donate to law enforcement foundations.
Building a Foundation
I had very little source material to work from, so I started by meeting with stakeholders and learning about their vision for the foundation. I was able to organize their initiatives into five categories:
- Recruitment
- Training
- Police Equipment
- Technology
- Operational Supplies
This would allow me to effectively communicate to potential donors what their contribution would be used to accomplish—an essential element of a philanthropic website. I decided to present this information under the heading of “Working Together for a Safer Community”.
Developing the Site
With a better understanding of the foundation and some technical information about the tax credit program drafted out, I rolled up my sleeves and began coding a website.
For this site, I would be using WordPress for the Content Management System (CMS) hosted on Pantheon. I generally use Pantheon for enterprise level hosting or DreamHost as a cost sensitive alternative.
For theming, I turned to my usual favorite theme GeneratePress which effectively turns WordPress into a blank canvas perfect for developers.
Due to the limited amount of content I had available to me, I decided it made sense to create a one-page site with content blocks for each aspect of the foundation that needed communicating to the user. I decided not to create a navigation system, for launch, but this is something I may add later if the site expands. Check out the Sandy Springs Police Foundation website to see how it all came together.
There were a couple of interesting aspects of this site that are worth expanding upon….
Responsive Frequently Asked Questions
The stakeholders with the foundation asked for an extensive FAQ section to be added to the site. In order to keep the site visually engaging, I decided to develop a responsive FAQ block that could be reused for different topics.
I utilized the Accordion Blocks WordPress plugin to quickly generate the dropdown functionality when each question is clicked. I then placed a series of Accordion Item blocks within a GeneratePress Container block (with a class of .faq-block for targeting purposes) which was in turn placed inside a WordPress Column block.
After applying some CSS styling I had a highly effective responsive FAQ section that could be easily modified to work with any number of questions, topics or layouts.
/* FAQ Headings (h3) */
.home-container5-inner h3 {
margin-bottom: 0.6em;
}
/* FAQ Questions (h4) */
.home-container5-inner h4 {
font-family: Noto Sans, sans-serif;
font-size: 1.0em;
}
/* FAQ Questions (h4) wider */
@media screen and (min-width: 376px) {
.home-container5-inner h4 {
font-size:4vw;
}
}
@media screen and (min-width: 500px) {
.home-container5-inner h4 {
font-size: 1.2em;
}
}
/* FAQ Questions (h4) - Spaces the questions appropriately.
1em + the 1em container padding-bottom creates a consistant 2em space at the bottom of the container */
.home-container5-inner h4 {
margin-bottom: 1em;
}
/* FAQ Questions - Opened - Increase font weight and reduce margin between question and answer */
.home-container5-inner .is-open h4 {
font-weight: 600;
margin-bottom: 0.3em;
}
/* FAQ Answers - Keeps a consistant 1em margin between items and at the bottom of the container */
.c-accordion__content p {
margin-bottom: 1em;
}
/* Last Answer - If you need to change the last answer, this will target it */
.faq-block .wp-block-pb-accordion-item:last-of-type p {
}
/* FAQ + & - Symbols */
.c-accordion__title:after {
color: #012e51;
content: "+";
font-weight: 500;
position: absolute;
right: 0;
top: -5px;
transform: none;
font-size: 1.2em;
}
/* Boxes - Removes column gap on mobile */
.home-container5-inner .wp-block-columns {
gap: 0em;
}
/* Boxes - Adds column gap at wider widths */
@media (min-width: 780px) {
.home-container5-inner .wp-block-columns {
gap: 2em;
}
}The resulting responsive FAQ system is likely one that I will reuse on future sites.
Slowing Same Page Scroll to Anchor Links
As the majority of users visiting the site would be looking for information about the tax credit program, I decided to call it out at the top of the page. In the parlance of newspaper editors, it would be referred to as “above the fold”— the intention being that a good number of readers would see it. I added a “Learn How” button that bounces the user down the page to the Georgia State Tax Credit Program section.
The challenge here is that this type of hyperlink moves the page almost instantaneously, which can confuse the user into thinking they have been taken to another page.
This was easily solved by slowing the scroll speed down ever so slightly.
I accomplished this with a GeneratePress Element. I created a new “Hook” element and set it to inject a short script at the wp_footer hook:
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});With this script in place, when a user clicks the Learn How button, it gives a slight sense of being scrolled down the page the tax credit section.