How to Optimize Your Website to Reach Your Goals -- Netroots Nation 2016, Cindy Phan
Post on 17-Jan-2017
106 Views
Preview:
Transcript
Extreme Makeover, Website Edition: How to Optimize Your Website to Reach Your Goals
Debra Cleaver@debracleaver
Cindy Phan@cindytphan
cindy@shareprogress.org
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
Some basic SEO things
Some basic SEO things
● 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)
Some basic SEO things
Some basic SEO things
● 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)
Some basic SEO things
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
Make your website fast to load
Cool, people can find you on the internet now.
What next?
Making a website that is easy to understand.
Make your website fast to load
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
Make your website fast to load
A guiding principle in thinking about website design:
Less is more.
The Mindset
Make your website fast to load
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
Make your website fast to load
Sometimes, just a few basic upgrades can make a big difference.
You don’t always need a redesign
Make your website fast to load
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
Make your website fast to load
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
Make your website fast to load
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?
Make your website fast to load
You have about 5 seconds to grab someone’s attention
Keep this in mind
Make your website fast to load
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
Make your website fast to load
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
Make your website fast to load
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
Make your website fast to load
One ask per pageFor Campaign, Petition, Donation, Action Pages
e.g. Ask for someone to donate, then once they do, ask them to share
Make your website fast to load
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
Make your website fast to load
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
Make your website fast to load
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 fast to load
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.
Make your website fast to load
Forms:The one time less is not more.
Have labels, not just placeholder text
Wrong Right
Make your website fast to load
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
Make your website fast to load
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?
Make your website fast to load
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” />
Make your website fast to load
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.
Make your website fast to load
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
Make your website fast to load
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.
top related