How to Optimize Your Website to Reach Your Goals -- Netroots Nation 2016, Cindy Phan

Extreme Makeover, Website Edition: How to Optimize Your Website to Reach Your Goals

Debra Cleaver@debracleaver

Cindy Phan@cindytphan

[email protected]

Debra CleaverMakes cool things <3 cat pictures

Cindy PhanMakes cool stuff<3 corgi pictures

Websites are one of the most common ways that people learn about your organization and for you to engage them

“But websites are crazy and I dont know what sorcery creates them”

We’re here to tell you, there is no magic. Anyone can learn some basic principles to become a website master.

This is that thing called “SEO” that everyone is always talking about.

This means writing your pages and content in a way to get it further up on searches for Google and other search engines

Make it easy to find your website and content

Some basic SEO things

● Write awesome and interesting content so that you become the place to go to learn more about an issue

● Use keywords in your content -- think about what the everyday person would be searching to find your content



● Write proper headings (<h1><h2> etc) that describe the content and use key words

● Make sure every page has a <title> and <description> tag (this is a key one Google knows what your content is about and what appears in the search results)



● Don’t use “click here” as a link, instead describe where the link is actually sending you to.

● Create an XML Sitemap and send it to webmaster.google.com. An XML Sitemap is a list of the URLs for your website that makes it easy for Google to crawl your website.

There are great free generators (xml-sitemaps.com/, a XML WordPress Plugin, etc)


https://www.xml-sitemaps.com/

Make your website fast to load

The internet has a lot of things, so websites that are slow to load means it’s more likely for folks to leave the site and go look at cat pictures.

Switch to a web hosting service that is quick and reliable.

Add Cloudflare if you have an extra $20/mon


Cool, people can find you on the internet now.

What next?

Making a website that is easy to understand.


Think of a website as a strategic way to solve a problem(and I know all of you here are great problem solvers)

The Mindset


A guiding principle in thinking about website design:

Less is more.

The Mindset


We hear the word “website redesign” thrown around a lot. If you have the time and money to do it strategically well, that is definitely something to consider.

If you do a redesign, hire the right kind of designer (web designer, UX designer). A print designer has a different skillset than a web designer (like how a digital campaigner has a different skillset than a field organizer)

You don’t always need a redesign


Sometimes, just a few basic upgrades can make a big difference.

You don’t always need a redesign


What are the goal(s) of your organization? How will you reach and measure these goals through your website?

For example, we want to

1) teach people about our issue> # of visitors per page> # of people sharing on social> Register to stay up-to-date

3) get people to donate> # of donations> total amount donated

What is your goal?Measure it.

2) engage people> # of member

signups> # of event

registrations> # of petition

signatures


Please please, add some form of analytics to your website, even if you aren’t sure what to do with analytics.At the minimum, this can tell you how many people come to read your content and which content is most popular

Most common - Google Analytics - it’s free!

All you have to do is create an account, add some code to your website, and done.

*Your website should have some analytics


Now, here comes the hard part:

What is your primary CTA? If there was only one thing you could get people to do, what would it be? (And this can change over time).

What is your secondary CTA (if you

must)?

Having too many CTAs in an area makes it unclear to folks what you want them to do, making them more unlikely to do anything at all.

What are your CTAs?


You have about 5 seconds to grab someone’s attention

Keep this in mind


The easier it is for people to understand your website, they more likely they are to stay on it.

Less is more

Above the fold

The most important piece should appear first


When you first enter your website, you should see as clear as day the primary CTA and secondary CTA.

Someone should go to your website and think “this is what they want me to do”

Make your CTAs front and center


You should have no more than 5 “categories” in your menu.

You can have then have sub-menus that provide more detailed groupings.

Keep your menu simple


One ask per pageFor Campaign, Petition, Donation, Action Pages

e.g. Ask for someone to donate, then once they do, ask them to share


Only use your brand colors (but don’t overkill it).

○ Set one color you use for all your action buttons (e.g. Orange means I want you to do something)

Less is more:Color


Keep it short, clear and easy to understand. Write for the everyday person (drop the jargon)

○ For more information, people should go to the about or other content pages.

○ Orient text around what you are trying to accomplish and its value.

Less is more:Text + Plain Language

We believe the world can be a better place. We want to do this by saving our planet through climate advocacy and pushing politicians to implement progressive climate laws. Join us and we can save the world together.

Together, we can push legislators to save our planet. Join the effort.vs


Use a good amount of “white space”. Let your elements breathe, this helps things stand out.

No one is a fan of claustrophobia, even websites.

Less is more:White Space


Make your website accessible and usable

You want your website to be accessible by everyone and usable in every situation.While accessibility focuses on people with disabilities, many accessibility requirements also improve usability for everyone such as using the web on a mobile phone when visual attention is elsewhere, in bright sunlight, in a dark room, in a quiet environment, in a noisy environment, and in an emergency.


Forms:The one time less is not more.

Have labels, not just placeholder text

Wrong Right


Make your font size readable and standout.For mobile, smallest body font-size should be 16px. For desktop 18px.No one can really read this without zooming in or become super best friends with their screen

Make your font big and readable


Text Contrast

Make sure there is contrast with your text with your background, ESPECIALLY if it’s an image

Can you read this well?

Can you read this well?

Is this better?

Is this better?


Img Alt Text

If an image doesn’t load, this is the text that appears in its place. This lets someone know what’s supposed to be there.

You set this in your html : <img alt=”a crowd of climate activists in New York” />


Again, descriptive links

Never, ever use “click here” or some variation of this for links.

Describe what the link is taking you too

E.g.


This means that the layout of your website changes based on the device/size of the browser.This entails mobile, tablet, and desktop

A MUST:Make your website responsive


Please, don’t ever ever use stock photos.All smartphones now have high quality cameras. Have a staff go out and take some photos that represent your issue.

Use photos of real people

When you see a website you like, take note of what you like, why you like it.

Later you can go back when you need inspiration or ideas.

https://pages.18f.gov/content-guide/18F Content GuideWant to

learn more?

Now, go off and do great website things.

Don’t trap your problem-solving self like this here cat.

How to Optimize Your Website to Reach Your Goals -- Netroots Nation 2016, Cindy Phan

Technology

Transcript of How to Optimize Your Website to Reach Your Goals -- Netroots Nation 2016, Cindy Phan