Thank you so much for tuning in today. I am really excited to
talk to you about nonprofit homepages and some steps you
can take to really make your non that page stand out.
My colleague, Sam, is here in case you have any questions,
drop some notes in there. But,
I wanna go ahead and get started because I'm gonna try
to give you a lot of information in about thirty
minutes. So let's go ahead.
Just a quick note, my name is Abby Jarvis,
and I work with me on one.
I see some familiar names in the chat,
and so I'm gonna throw this out there.
If you are a Neon One client and you're using our website platform.
If you have questions about how to do any of this in Neon Websites,
let us know Sam is on deck to answer your questions And if we
can answer your questions, we'll get someone who can.
That said, if you do not use Neon Websites,
that's totally fine.
Everything you're gonna see here today is a place to you
regardless of the platform that you're using.
So with that kind of in mind,
I wanna share a couple other little things. So just give
him how many people chimed in to let me know where you were tuning in from.
The chat is probably gonna move pretty quickly today.
That's wonderful. I would I love it when you talk to me,
and I'm gonna be asking you questions throughout the
session. So do please talk to me in the chat.
If you do have questions though,
please drop those in the Q and a box. Again,
the chat moves really quickly.. Sometimes I'm gonna miss things,
and I'm sure if you have a question other people on the
call do as well, and. I'd love to try to them.
The other question. I often get is,
are you recording this webinar? Can I have a copy?
Can I have the slides? Of course,
We are recording this webinar,
and you're gonna get an email from me tomorrow morning that
will include a link to the slide, or slides a link to the
a link to the downloadable resource that we have available for you.
So that all said, my name is Abby.
I've been talking about profit tech for a little over eleven years now.
And I'm really excited about today because I get to pull one
from my nonprofit tech background,
but I also get to pull for my marketing around.
And even though we don't love necessarily to talk about
marketing for nonprofits,
your homepage is absolutely a marketing tool and I'm excited
to share some insights that. I've picked up along the way
both in the nonprofit world and in the marketing world.
So before I get started, I wanna ask you all a question.
On a scale from the I have no idea what I'm doing dog to Ron Swanson,
How comfortable are you with homepage design and what should
be on your homepage?
Let me know in the chat.. I'm really interested
are you totally new at this?
Have you not even figured out where your login is?
That was I that's understandable.
Are you a pro Are you kind of in the middle?
Do you have a general feel for what makes a good website?
But you're not sure why those things are important
great. We have a little bit.
I love the range of
experiences here. So some of you are comfortable. Oh, Rob, I love this.
Comfort with designing apprehensive about how it will be received.
Absolutely
very, very relatable. I'm sure.
A lot of people were right in the middle a couple of newbies.
Really excited about that.
I'm gonna try to share a little bit of something for all of you
then, and I will make sure to explain, some of the,
examples that I have in here. Alright.
I also have a tool for you.. I also wanna drop this in the chat.
So, I have a checklist for you. This link will take you
immediately to the download page.
So this link will automatically download the resource for you.
I'll also make sure this is on the page that we send you
tomorrow with the the recording. So,
this is a checklist that you can use,
whether you're brand new to this,
or whether you're a seasoned designer.
If you're a seasoned designer,
you might even think of some things that we could add to it.
But keep this keep this handy
I am okay.
I just learned that Sam cannot chat to everyone. I
will try to figure that out.
We will see. Alright.
Let's go over some basics.
So the first question that I. I've come across and I came
across this recently with a nonprofit I worked with.
Does my homepage really matter? The answer is it does.
And it is the common question as this is.
It's a good one because you have limited time and resources
and that you need to know is putting a lot of time and
effort into designing a great homepage worth it.
And I'm gonna tell you that yes,
your homepage is very important.
Because it is the hub of your entire online presence, and
your homepage is going to make a really big first impression
on the people who visit your site.
It introduces people to who you are.
It helps them understand what you do.
If you're using good design elements and some good content,
it connects them to your mission.
And educate them about what you do.
And the cool part about those things is that those two
things, your mission and what you actually do,
what your mission looks like when you're working on it,
that can inspire people to get involved,
whether it's donating or volunteering or buying a
membership or whatever you want them to do.
A good homepage will also make it really easy for them to
understand not only how they can get involved,
but it makes it easy for them to take the step to get
involved. And then when they return to your website,
they will understand
where to go,
where they can learn more about your work and how they have
helped you make an impact.
So your website does all of those things.
And as a little more nebulous concept,
it also helps set the tone for the rest of their time on your
site. It will help them establish a sense of place,
and that will help them connect more on an emotional level to
the content and the pictures and all of the wonderful things
that you're sharing with them.
So with that in mind, I'm gonna share three things with you.
I'm gonna show you a high level look at some basic design best practices.
Then we're gonna look at some content best practices and then
some steps that you can take on the technical side of things to
make your homepage perform really well for the people who view.
Throughout. I'm also going to share examples.
The most
of
some free tools that you can use to make sure you're giving
your website visitors the best experience you can.
Alright. So the way your homepage looks, I'm sure, is
going to make a huge impression on the people who land on your site.
So this is where you have a really beautiful opportunity to
use visuals to introduce your nonprofit and establish who you
are and who you serve.
And then as people travel through other pages on your
site, they're gonna see, hopefully,
the same logo and the same colors on those other pages. So
I kind of alluded to it earlier.
This gives people a sense of of place online, and it also
helps create a sense of continuity.
Your site visitors will feel comfortable browsing your site,
and they will see your repeating logo and your colors,
and that will work to give them a really nice cohesive experience.
If you've ever been on a website and landed on an old
page that had like colors or fonts or even, an
outdated version of a logo,
you know that that can be really jarring. It can disrupt
your immersion in the learning experience on a site.
So that's why your homepage should establish these these
elements right up front, your brand colors,
and your brand logo,
and then that will carry through the rest of your site.
Now, and I'm gonna get into content in a minute,
but the font that you use,
the fonts that you use because you're probably gonna use more than one,
and the font colors you use are an important part of your
design. So your fonts should be two things. So first,
they should be easy to read.
And this means a few things.
So this means using a font that isn't overly complicated.
This second example here is an example of what I would
consider a complicated font.
And you also want to use colors that are high contrast. So
this text is high contrast.
This gray stands out very clearly on the white background.
This down here is an example of a lower contrast font. This
text doesn't stand out as well on this blue background and
anyone landing on a site. If you had this color text, on a
blue background like this would have a hard time reading your content.
It's also tricky to put fonts directly over a
pattern So this is an example of what that looks like.
This happens sometimes on hero images where you may have a
large image with font over top of it,
maybe contextualizing what that picture is there for or using
it to describe an event, and the font is hard to read.
So,
these are examples of things that you might not wanna do.
And if you have questions about your accessibility and how
visible your fonts bar on your site. I've included this link
here. It's an accessibility checker,
and it checks specifically your color contrast So if you wanna
make sure that you are,
presenting an easy to read font that your your visitors will be
able to easily engage with, use that tool. It's really helpful.
I also added here that your your font should be brand
appropriate, and that might sound a little funny. Right?
So this one is kind of a nebulous, a nebulous concept,
but I'm gonna use an example,
and I'm gonna pick on a common font How many of you are
familiar with the font comic sans?. Does that ring a bell to you?
Yes. Yes. LOL.
Okay. Alright. So and if you're not familiar with it,
you probably see a lot of LOLs in the chat,
and that's because comic sans has been the butt of a lot of jokes.
But it is a very cute
playful childlike font.
The silly thing is that it gets overused and a lot of times
it's used in instances that it's not necessarily appropriate.
So comic sans might be appropriate for something like
a children's literacy organization.
It might work on a flyer for, like, after school programming,
there are some instances in which comic sans can be brand appropriate.
However,
Using a a font that is considered
very light and playful and childish might not be appropriate
or an organization like a hospital foundation or a
serious theater company or someone who's doing very
serious important work. So it's kind of a silly example,
but I hope it helps you understand a little better what
I mean when I say that a brand should be or a font should
be brand appropriate. Little silly, but. I I hope you get it. Alright.
So this is an example.
This font here is a good size It is high
contrast. It's easy to read.
This is the same organization that I showcased here,
the sense of security.
And it's very easy for people to to read and understand. So
this is a great example of what these best practices look like
in in actual real life.
Okay.
Cover fonts. We've covered logos and colors.
The next thing I wanna cover are some high level guidelines
for choosing good images.
So you're gonna wanna have a hero image If you're not
familiar with the term hero image, your hero image is a
large image that stretches across most or all of the
screen on your homepage.
These are two examples here.
And the I want to really just reiterate that This is gonna be
the first thing, really,
that catches people's eyes when they land on your website.
So I would encourage you to make sure the images you choose
are related to your mission and help visitors connect with the
community that you serve.
These are great examples here.
I also want to encourage you to look for images that are high quality.
So the snapshots that you took on your phone may be appropriate,
but,
I would encourage you to look for something that is
nicely framed. It's not really blurry or out of focus.
It's maybe had some editing done,
so everything is high contrast and professional looking,
and it most importantly doesn't look stretched out or kind of awkward.
On your site.
If you do have other images that you think are really
special that don't necessarily work well for your hero images,
There are lots of opportunities to use those images on other
parts of your site.
The high quality thing is important, but more
importantly, the word ethic is important to me here.
And just out of curiosity, does the word ethical? Like,
do you know what do you know what I'm talking about when I
say ethical or is that kind of confusing for you?
Just let me know in the chat.
Yes. Michelle nailed it, operate with integrity.
The the images that you choose should be uplifting and
empowering not only to the to the viewer,
but also to the subject of the picture.
It shouldn't feel manipulative or exploitative.
So if you want another kind of silly example of what an
exploitative image could be, think of the old Sarah
McLaughlin, like ASPCA,
commercial with the sad dogs.
The dogs are sad and they're dirty,
and they're looking mournfully at the viewer while Sarah
McLaughlin sings in the background.
Oh, good, Devon.
Devon is in the chat.. This is their organization. Devon, I
love your website so much. I took a couple of screenshots,
so you're gonna see this throughout,
amazing job on your site, by the way.
But the yeah. You wanna have uplifting empowering photos.
It's okay to use sad dogs sometimes because a dog isn't
like a human being.
But it's not okay to put people in that position.
You want to use an image here, like Devon did, where this is
an uplifting empowering photo
not something that feels manipulative or exploitative.
I included this little tool tip here at the bottom
when you are choosing your hero images,
they're gonna be large files,
especially if you're just using them right off of your camera.
They're probably gonna be a huge in size and a huge file
size. Those really large file sizes can cause your page to
load slowly. We're gonna talk about that in a minute.
But you are probably gonna wanna use something like an
image compressor or an image resizer or both, to turn
those very large images into smaller files that will still
work for your design.
I use Compressed JPEG dot com all the time.
Really for anything I put on me on one's website,
but there are other options out there.
That's just my favorite one. Okay.
So you've got great pictures.
The next thing you're gonna wanna do is look at the design
for the buttons that you use throughout your site.
Your homepage, especially if you've got those great pictures,
and especially if you if you touch on some of the content best practices,
we're gonna go over in a minute. Your homepage is gonna make
people want to engage with you,
and it is important that they be able to do so easily.
And that's where the design of your buttons come in.
Your buttons should be easy to use. So we've gotta have that
high contrast font, the easy easy to read font,
but also easy to use in that someone should be able to tap
on or click on any of those buttons regardless of the
device they're using.
So you see here I took this screenshot on my phone.
I could very easily tap these buttons on my phone.
I can click on them easily on my desktop.
They're very easy to use.
So that's an important thing to keep in mind.
I would really highly suggest you testing any buttons you
include on your site on a phone.
And maybe even an Android and an iPhone just so you make sure
it works on everybody's device.
The other point I have here is that they should be clearly
labeled and these buttons are a great example.
When you read this text here, and then you see the text
how we can help on the button,
you know pretty much exactly what you're gonna see when you
click on that button.
So use your button text
to help people understand what they're clicking on and what
they're gonna see once they actually click on it.
And I probably could have folded this next point into the button slide,
but I it's important enough that. I wanted to give it its
own slide. This does also include your donate button.
Or if you're a membership organization like Devon here,
your your membership buttons.
You really want those
those two types of buttons to be easy to find and
easy to get to. And one of the best ways you can do this is
to make it a contrasting color. So it should, of course,
compliment your other brand colors it should be a
contrasting color that stands out from the rest of your
navigation menu. This is a really great example here.
We've got these navigation items here,
but donate button is a contrasting color. It stands
out. It's very easy to locate.
Most people will look to the top right of your navigation to
find these and it's easy to click to.
Now you'll notice here the third the third thir thir butt
bullet I have here is that it shouldn't be a menu.
So if you've got many different ways for people to give to you,
whether it is by being a member or buying something
from your shop or giving to a specific campaign or
putting a a consideration for you and their will.
You may want to have a ways to give page,
but Someone should always be able to access either your
donate button or your membership button in a single click.
Don't make people click through lots of menus to get to where
they can actually support you financially,
the more clicks it takes,
the less likely they are to actually complete a transaction to support you,
and as much as we don't love using the word transaction
there, it is an important thing, to consider.
So This is another thing. Again,
I would really encourage you to test your donate or membership
button on your phone to make sure that it's easy for people
to navigate to that page regardless of the device they're using.
Okay. A lot of content there.
I'm gonna try to to give you some more content about
content. Now you understand these design
elements.
The next step is to consider what content you're gonna put
on your page. As a general rule,
I'm using content in one of two ways.
We're mostly gonna look at text here,
but this can also include things like videos and,
and some maybe infographics and things like that. So
we looked at some things that your homepage should do at the beginning.
When you are considering the content you're gonna place on your homepage,
these are some of the things that content should do for the
people who visit you.
Again, it should share who you are and what who you serve. It
should talk about what you do.
It should help people understand the impact that you
make and by in doing that.
It can help them understand the impact they can make when they get involved.
It can get people excited about supporting your work.
It should give them next steps when they do wanna support your work,
and it should make it easy for them to move into different
parts of your site. So instead of really dwelling on this,
I'm gonna just show you some examples mostly because I love
content. It's my job, and I would keep you here all day.
So this is a really great page from the oh, I don't have this
written down. But from the nap DMA International
Agriculture Association.
And I wanted to point out something that they do really
well. One, they have these really great
call the action buttons up here, easy to find, high
contrast, easy to click on on my phone,
I know because I did it.. And then right here, they just very
clearly sum up who they are, what they do, why their work is important,
and then it immediately gives visitors a way to get involved.
This is a great example.. It's short, sweet, to the point,
and very comprehensive. So this is a great example.
I also love that they included a video here.
I am not a huge video watcher, but a lot of people are, and we
know that videos are a powerful way to connect with your community.
If you have a video, consider adding it to your homepage.
This is a great example of that.
This is Devon's organization again.. The content on this page
is wonderful.
And I wanted again to point out a couple of things that is
beautiful about this page. So one,
I love that they have this get involved,
header, and I love that they have a big event that's coming up.
It's front and center. It's easy to get involved with, and
it is also easy to get to the rest of their site from this
home page. Now here. I've scrolled whoops.
Here I've scrolled down a little bit and the the
navigation bar has stayed visible to me.
The other thing that I love is that there are a bunch of
different ways for people to get involved with the National
Association of Women lawyers and it's not confusing to
figure out which I wanna do.
I'm not a lawyer,
but maybe I'm past about supporting women lawyers.
In that case, I can support them with a sponsorship. If I
am a woman lawyer, I can become a member.
These are easy to find.
They're not nested under a lot of different navigation pieces.
And again, I tested this one on my phone too. I was able
to get a feel for what they do, understand who they support,
and very easily find where I can get involved all from my
phone. So this is a great example.
If you are one of the many organizations that has
different segments of people visiting your site,
this example I hope is interesting to you.
So the Southern Conservation Trust has a number of different
groups of people who are probably visiting their site.
There are people who are passionate about child
education around conservation.
There are people who are passionate about conservation itself
maybe they wanna donate, they have a membership program.
And from their site,
it's really easy to figure out not only what they do because
they've got this really nice succinct descriptive tagline,
but it's also easy for me to select not only, like, what I'm interested in,
but select what I'm interested in participating in.
I can become a member.
I can learn about environmental education.
I can look into more serious conservation efforts.
I have a lot of different options here,
but it's presented very neatly. It's not overwhelming.
There's not a block of text that I have to wade through to
figure out what I wanna do.
Everything is very nicely presented to me.
And then I also wanted to point out the the images that they chose here.
They have the you can't tell because is a screenshot,
but this is a really beautiful moving image.
And then as I scroll down,. I can see some of these more,
intimate snapshots that people have taken at classes or while
they're out paddling.
So this is a great example.
Maybe if you're an organization that has more than one audience
of how you might want to organize your site so everyone
who visits can easily get to where they wanna go.
So that's a high level overview of content.
If if you're really interested in this and that you want to
dig more into the best practices around content
creation, in the follow-up email you're gonna get from me,
I have a resource that can help you do that. It's the website
optimization action plan and it has a whole long module just on
content writing, for your website. So take a look there.
Alright. In the last few minutes,
I wanna share some technical things that can give your site
visitors a a good experience.. And if you're like me,
you probably kinda bristle it a little bit when I use the word technical.
If you did, that's okay. Don't worry.
I also don't love technical optimizations.
So I looked into some of these things and I included some
tools that you can use for each of these technical
optimizations. Alright.
So the first thing you wanna do is make your make sure your
homepage lobes quickly.
Now when I saw this line down here,
that the ideal load time for a website is about two seconds.
My heart stopped a little bit.
I, as a grumpy older millennial,
mourn the whole, like,
short attention span that happens on the internet a lot
of times, And I might be showing my age here a little
bit, but, do y'all remember, like,
when the internet was new and AOL was the internet service
provider of choice you would sometimes wait, like,
three to five minutes for a site to load.
That that is where I come from.. So The two second load time
is really startling.
But that is the case.
Some things you might wanna try if you visit your your website
and you notice that your page is glowing loading slowly.
One, make sure that you don't have really large files.
So you can use that file compressor I shared You may
also notice that you have, like,
old files that are down at the bottom of the page that you can
clean up. The other thing that you can do is make sure
your CMS is up to date. Now your CMS, CMS stands for
content management system.
So, like,
all of these examples the. CMS are using is Neon Websites.
Other common ones are like WordPress or Wix or
if, and I don't know if any of you are using Squarespace,
that's another CMS.
If you have a CMS that's out of date, if you have updates that
you need to run, but you've been putting it off,
that can begin to slow down your load time.
So make sure your. CMS is up to date.
Make sure you don't have really large files.
If you're if you are adding files like pictures,
compress them or resize them so they don't take up so much space.
This this thing down here,
the page speed dot web dot dev is a Google tool, and you
can plug in your your home page's. URL, and it will tell you, like,
what your load time is. I believe it also makes
suggestions for how you can kind of improve it. So use
that. It's a really handy tool,
it doesn't cost anything to use.
The other thing I would encourage you to do and I kind
of alluded to it a couple of times is to make sure your your
website works on your phone.. Now this is something that is
probably handled on your on your CMS's end. So if you're
using something like Neon Websites,
everything is is gonna work on on a mobile phone.
Most WordPress works on mobile phones.
Honestly, mobile optimization is standard and most CMS right now.
So if you look at your page on your phone and you notice that
you're it's not responding well and you have to pinch in zoom,
get in touch with your web developer or with your
marketing person or with someone at your CMS to figure
out how to how to get it optimized.
Again, the load time on a phone is about two seconds.
That's that's the ideal,
which can feel intimidating,
but you now have some tools at your disposal to help you get
there. So I would encourage you to again test
your homepage and other pages on your phone. And again
test it on different mobile devices.
So I've noticed,
like, I I have I use Android.. I have a a pixel phone. One of
my best friends is an iPhone girly. It's all she uses,
and sometimes websites will look slightly different because
we have different size screens.
We have different operating systems.
So if you can check your homepage, your buttons, the
design, and everything,
and make sure it works on all kinds of devices, not just yours.
The other thing you wanna check for is to make sure that your
site is accessible to the different people who visit you.
This means so this can mean I'll just use an example.
If someone is is has some site issues,
they may be using a screen reader.
And making sure that they have a good experience when they're
using a screen reader is a really important way not only
to make them feel welcome on your site,
but it make it easy for them to navigate your site.
And learn about what you do and get involved in your work.
Another could be,
if someone is hard of hearing, you don't wanna rely on
a lot of video content.
You don't want to and if you do use video content,
you wanna have captions there so they can read it.
When your site is accessible,
not only is it great for people who need those accommodations,
but it also just generally gives other people a better experience
you want captions on your videos for those who can't
hear, but it's also nice for people who browse without their
phone on or your their volume on.
If you make any updates,
it's important that you recheck to make sure that your updates
are also accessible and you can use,
this accessibility checker dot org. It's a free tool,
and they will tell you what you can do to fix your site and
make it more accessible.
The last thing I would encourage you to do,
it seems kinda silly, but. I see it all the time.
Check your links on your home page and then even your
navigation to make sure that the links aren't broken,
and then make sure that it's easy to use your menu.
If you have lots of nested menus,
it can be kind of clunky to use on a phone or if you've ever
done that thing where you have to hover over a navigation item
to unfurl another menu,
and then you have to move over there to unfurl another menu.
The menus keep collapsing, like, that's really frustrating.
So so check that as well as you are periodically updating your site.
No one loves a broken link,
and that can be a really disruptive experience for people.
That gonna see if I can answer some few questions,
a few questions. I know it is one thirty.
So if you have to jump,. I'm gonna send you a recording of
this. And,
you'll be able to see the Q and A there if you want to.
Some of you, I know,
are also participants in the Neon One Connected Fundraising
Community on Slack. If you're not, you're welcome to join us.
This QR code will take you to where you can you can join us and hang out.
I'm gonna be in the marketing channel after this session for
a little while to answer questions.
Yeah, drop some questions in the Q & A box.
I see this one from Erica Will we be emailed all of these
links to the tester sites, etcetera?
I don't have actual
URL hyperlinks in the email, but you're gonna get a link
to the recording and the slides, and these tester sites
are also included on that homepage checklist that you'll
also receive a copy of.
So yes, you will get those.. It just won't be immediately
in the email.
Alright.
Okay.
I'm gonna stick around for another couple of questions.
If you all have any, if you don't,
I'm just gonna assume that this very high level overview is so
comprehensive that you have no questions about it.
Darla, thank you so much for being here,
and thank you for having such a great site.
I spent quite a long time on your site. And it was fantastic.
Thank you all so much for being here today.
I know how busy you are, and. I know that it can be a big
commitment to join a session,
especially when there's so much going on.
So thank you for being here.
I'll hang out and Slack channel for a little while to see if I
can talk to any of you.
You will get an email from me tomorrow with a link to the
recording, the slides, and the checklist.
And, I will talk to you all soon. Have a great Monday.