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