Optimizing Your Website/Being Smartphone Friendly Presented by Hilda Bustos

Optimizing Your Website/Being
Smartphone Friendly
Presented by
Hilda Bustos
Director of Communications
Laura Calderón
Project Coordinator
1
Mission
To build financial and real estate assets as
well as human and technology resources for
Latino families, communities, and
organizations.
2
Overview: Fair Housing
Grant
•
NALCAB was awarded funding by HUD to conduct a National Fair
Housing Media Campaign utilizing traditional and social media with a
boots-on-the-ground approach to link HUD with consumers who face
discriminatory housing practices.
•
This campaign will specifically target populations in protected classes in
the following markets:
•
•
•
•
•
•
•
•
Los Angeles, CA
San Antonio, TX
McAllen, TX
Birmingham, AL
Chicago, IL
Brooklyn, NY
Metro Washington, DC
Metro Denver, CO
3
Today’s Agenda
• Assess your website for userfriendliness
• The nonprofit website
• Search Engine Optimization (SEO)
• Social Media Optimization (SMO)
• Be mobile-friendly
4
5
Assessing Your Website
•
•
•
•
•
•
•
•
Page layout
Browser Compatibility
Navigation
Color and Graphics
Multimedia
Functionality
Accessibility
Content Presentation
6
Assessing Your Website
• Page Layout
– Consistent site header and logo
– Consistent navigation area
– Informative page title with organization name
– Page footer has copyright, last update, contact
information
– Displays without horizontal scrolling
– Home page has compelling information “above
the fold”
– Rapid home page download
7
Webpage Design
8
NALCAB “Above the Fold”
9
Assessing Your Website
• Navigation
– Links are clearly and consistently marked
– Easy to use for target audience
– Links at bottom of page too
– Site map
• Color and Graphics
– Color scheme limited to 3-4 colors + neutral
– Consistent color scheme
– Text color contrasts with background color
– Animated images don’t distract
10
Assessing Your Website
• Multimedia
– Enhances rather than distracts
– Serves a clear purpose
– Links to media-plug ins provided
• Functionality
– Internal and external links work
– Forms work as expected
11
Assessing Your Website
• Accessibility
– Navigation aids such as site map,
breadcrumbs
– Color is not used alone to convey
meaning
– Text color contrasts with background color
– If graphics or media are used, alternate
text equivalent is provided
12
Assessing Your Website
• Content Presentation
–
–
–
–
–
–
–
Common fonts used (Arial, Times Roman)
Consistent fonts, sizes and colors
Easy to find information (minimal clicks)
No outdated material
No typos or grammatical errors
Links to other useful sites
Hyperlinks use consistent colors for visited and
non-visited sites
– Avoids use of “click here”
13
The Nonprofit Website
14
The Nonprofit Website
1. Know your audience
2. Know the purpose of your
website
3. Highlight your mission on
homepage
4. Prominent “Contact Us”
information
5. Use compelling images
6. “Call to action”
7. Be donor-friendly
8. Be volunteer-friendly
9. Be media-friendly
10. Consistent with other
organizational materials
11. Showcase your
stewardship
12. Be social media friendly
13. Email sign-up
14. Use multimedia
15. Search function and site
map
15
The Nonprofit Website
1.
2.
3.
4.
5.
Know your audience
Know the purpose of your website
Highlight your mission on homepage
Prominent “Contact Us” information
Use compelling images
16
The Nonprofit Website
6. “Call to action”
7. Be donor-friendly
8. Be volunteer-friendly
9. Be media-friendly
10. Consistency with organizational materials
17
The Nonprofit Website
11. Showcase your stewardship
12. Be social media friendly
13. Email or newsletter sign-up
14. Use multimedia
15. Search function and site map
18
Increase Visits to Your Website
•
•
•
•
•
•
•
Include URL on all printed materials
Incentives to visit website
Press releases to online and offline media
Email links
Online communities and forums
Advocacy campaigns—media links
Social media links
19
Writing for Websites
•
•
•
•
•
Keep sentences short
Keep paragraphs short
Key phrases in headlines for SEO
Plain conversational English
Brief headlines--6-8 words
20
Writing for Websites
• Easy to scan pages
–Avoid left-flush paragraphs
–Highlight by bolding
–Use sub-headings
–Use bulleted lists
• Use internal links
21
SEARCH ENGINE
OPTIMIZATION (SEO)
22
SEARCH ENGINE
OPTIMIZATION (SEO)
Search engine optimization (SEO)
is the process of improving the
volume and quality of traffic to a
website from search engines via
"natural" (aka organic) search
results.
Source: www.searchenginewatch.com, April 8, 2013
23
What Search Engines
Look For
•
•
•
•
Content
Performance
Authority
User experience
24
Tips for SEO
• Keyword research is #1
• Content is also #1
• Build a website that search
engines can understand
• Make navigation easy
25
Tips for SEO
• Get links from trusted, relevant
sources
• Don’t forget the technical stuff
• Track progress with web analytics
• Submit website details to search
engines
26
SOCIAL MEDIA
OPTIMIZATION (SMO)
27
What’s the Difference?
SEO: Make website search-engine friendly
SMO: Raise website visibility through social
media
Both: Drive traffic to your website
28
The REALSMO Model
Reputation
Engagement
Authority
Leadership
Social
Media
Optimization
Source: Joshua Berg, realsmo.com
29
The REALSMO Model
• Reputation: build your reputation as a
reliable qualified source
• Engagement: encourage
engagement, sharing & reciprocate
• Authority: become a notable authority
in your field of expertise
• Leadership: harness originality &
creativity, be a Thought Leader
Source: Joshua Berg, realsmo.com
30
The REALSMO Model
• Social: be social, find and engage
sociable experts in your field
• Media: know your social media
platforms to maximize influence
• Optimization: improve technical
aspects to increase optimization
Source: Joshua Berg, realsmo.com
31
Be Mobile-Friendly
Source: blog.Kissmetrics.com
32
The Mobile-World
• Mobile = 13% of the
world’s Internet traffic
• May 2013:
– 56% of U.S. adults use
smartphone
– 63% of owners access
the Internet
– 9% donated
• 2016: 80% of U.S. will
use mobile phones
33
Poll Question
When it comes to having a mobile-friendly
website:
 We have not considered it at all.
 We are thinking about it.
 Our website is now mobile-friendly or will
be soon.
34
Be Mobile-Friendly
• Commit to going mobile—smartphones,
tablets, large flat screen TVs
• Start by checking website’s mobile traffic
on Google Analytics
• Start by looking at your website on
– Gomez Mobile Readiness Test
– MobiReady
– W3CmobileOKChecker
35
Be Mobile-Friendly
• 3 ways to go mobile:
– 1. Simplify your current website design
– 2. Create a mobile version of your
website
– 3. Rebuild website for display on any
device
• Adaptive theme
• Responsive theme
36
Tips for Going Mobile
• Audience-centered content = limited content
– Contact information front and center
– Links to maps and directions
– Link to main website
• Talk and present information in “sound bites”
–
–
–
–
–
Concise writing
Short descriptive phrases for retweets
Scroll Menus (keep your content in lists)
Bullet Points (instead of paragraphs)
Action buttons (instead of words)
37
Tips for Going Mobile
• Appearance “speaks” too
– Focused landing page
– Clean backgrounds
– Avoid harsh/clashing colors for your image or
background
– Large, legible font size
– Mimic website’s visual brand: color, logo
– Use images that speak
38
Tips for Going Mobile
• Easy Navigation
–
–
–
–
–
–
Consistent navigation features
Single column lay-out
Modular structure
Clear path to action
Search function
Limit forms to 6 fields
• Set Up Your Own Analytics
– No 3rd party cookies allowed on 2/3 of mobile phones
– Use 1st party cookies to track visitors
39
Tips for Going Mobile
• Make Usability a Priority
– Scroll down; no pinch and zoom and not across
– Design for clumsy fingers
– Use dropdown menus, checkable boxes and other
“touch” options
– Scale for landscape and portrait
– Avoid Flash
• Make Interface Actions Easy
– Use well-placed icons, clicks and action
buttons
40
Be Mobile-Friendly
Source: blog.Kissmetrics.com
41
Be Mobile-Friendly
What experience will your
audience have when they try
to find and connect with you?
Take 5 minutes today and
search for your website in
mobile as a consumer would.
Discuss the result with your
organization.
42
Resources
Web Design Best Practices Checklist
• http://terrymorris.net/bestpractices/
Google Analytics
• http://blog.kissmetrics.com/50-resources-for-getting-themost-out-of-google-analytics/
• http://www.verticalresponse.com/blog/a-beginners-guideto-google-analytics/
Google Rank and Authorship
• http://www.forbes.com/sites/brentgleeson/2013/09/30/ev
erything-you-need-to-know-about-google-authorship/
NALCAB Fair Housing Resources (webinars, posters, etc.)
• http://nalcab.org/FairHousing#webinars
43
Resources
Check website for “above the fold”
• http://www.whereisthefold.com/
Web Style Guide (shows page components)
• http://webstyleguide.com/wsg3/6-page-structure/3site-design.html
44
Resources
Test website for mobile-friendliness:
• http://validator.w3.org/mobile/
• http://ready.mobi/launch.jsp?locale=en_EN
• http://www.gomez.com/mobile-readiness-test/
Test loading speed of website onto mobile device
• http://developers.google.com/speed/pagespeed/insights/
Going mobile:
• http://socialmediatoday.com/tribalcafe/1537651/how-make-your-sitemobile-friendly
• http://premium.docstoc.com/article/156835885/Mobile-Marketing-in3-SimpleSteps?utm_source=email&utm_medium=email&utm_campaign=293
&utm_content=6058
• http://www.google.com/think/articles/developer-articlesresources.html
45
Resources
Search Engine Optimization
• http://searchengineland.com/figz/wpcontent/seloads/2013/03/Google-one-pageSEO-Guide.pdf
• http://www.clickminded.com/seo-checklist/
• http://www.clickz.com/clickz/column/2297162/
website-analytics-for-seo-introduction-forbeginners
46
Resources
Social Media Optimization
• http://blog.heyo.com/what-is-social-mediaoptimization-12-tips-to-make-it-happen/
• http://www.slideshare.net/dnnsoftware/10social-media-optimization-tips
• http://socialtimes.com/social-mediaoptimization-tips_b18921
47
Contact
Laura Calderon
Project Coordinator
[email protected]
48
Questions?
49
Stay Connected
Facebook
Like us at facebook.com/NALCAB
Share your comments and photos on our timeline
page.
Twitter
Follow us at @nalcab
Join in on the conversation
Website
Stay up to date with the latest news on NALCAB
at nalcab.org.
50