Chapter Website Content Workshop CHAPTER WEBSITE GOALS USABILITY

Chapter Website Content Workshop

CHAPTER WEBSITE GOALS & USABILITY CONSIDERATIONS Usability is defined by the ease of use of a website for its visitors: the presentation of information and choices in a clear and concise way, a lack of ambiguity, and the placement of important items in appropriate areas. Important Aspects of Usability & Accessibility: ● ● Clarity WEBSITE GOALS 1. Ruthless Content Prioritization ○ Minimize distractions ○ Establish content hierarchy and guidance 2. Present Thoughtful Contextual Action (callouts, end of page tiles) ○ Provide relevant actions and context 3. Chapter Localization Learnability and Guidance ○ Create consistent tone, look ○ Make content findable (consider SEO and why your audience comes to your chapter pages) 4. The Right Engagement at the Right Time (homepage focus on timely topics) 5. Truly Mobile First

INFORMATION ARCHITECTURE/ CONTENT TREE Notes: ● Templates available for Chapter Home, Helping You, Volunteer, About Our Chapter ● Events will be filled with a dynamic database ● State Advocacy will link to your current dynamic State Advocacy page (new design implemented with no chapter action) ● News (future training) ● Blog (future training) ● Donate will hooked up for you

CONTENT BASICS & DESIGN ELEMENTS

USABILITY AND ACCESSIBILITY CONSIDERATIONS Content ● Layout Use plain language written at an appropriate reading level for the page’s intended audience ○ The mean reading ability of people living with dementia or older people tends to fall between 6 th to 8 th grade levels (Weih et al. , 2008) ○ Limit sentence length (less than 20 words in a sentence is ideal) (Weih et al. , 2008) ○ ● CONTENT | LAYOUT Information framed as expert opinion may be more persuasive (but don’t abuse this bias) Utilize in-page linking where appropriate Fonts & Typography ● Use headings in title case ● Use a readable san-serif font, Houschka or Arial ● Use bold font sparingly, and avoid using h italics ● Body copy should not be used smaller than 18 pt ● Maintain consistency in page layouts ● Use clear line breaks. Clearly define sections with styles built into the new CMS ● Use related content widget at the end of pages as another navigation element

TOP 5 WEB WRITING TIPS 1. Use Headings: Headings help break up the monotony of simple text, and they make your writing easier to scan. Remember, on the web, attention is in limited supply. You want to make your work scan-friendly. Headings help you organize your thoughts into a logical outline, which improves the quality of writing. 2. Write Short Paragraphs: Avoid long paragraphs. A good rule of thumb is to keep your paragraphs three to five lines in length. This same rule applies to sentences. Keep them short. 3. Get the important information upfront (inverted pyramid): Readers should be able understand what information they will find on a page from the opening few paragraphs. Start with this key top level information, then move onto the additional detail and a more in-depth explanation. 4. Stick to active voice: Use active rather than passive verbs, and specify the subject of the sentence. Instead of saying “Information and resources can be found on our website, ” say “You can find resources and information on our website. ” Active voice helps create succinct, reader-friendly sentences 5. Use Bullet Points and Numbered Lists: Even if each item is a paragraph, a bullet-point list can be very effective. Just put a line break between each item.

STYLE GUIDELINES Page Titles and Sub. Head Styles ● Page Title (H 1): AP Title Case Example: What Is Alzheimer’s? ● H 2: Sentence case Example: Your role as care partner ● H 3: Sentence case Example: : Emotions you may experience as a care partner ● H 4: ALL CAPS *When writing headlines and subheadlines, keep SEO top of mind. This is an opportunity to feature keywords (where appropriate to the page content). AP Title Case Rules for Page Titles

USABILITY AND ACCESSIBILITY CONSIDERATIONS PHOTOGRAPHY & VIDEO Photography & Video ● Use engaging and positive imagery and stories of people living with dementia ● Image file name should ideally include keywords for search engine optimization (i. e. alzheimers-supportgroups. jpg) ● Images should be used with alternative text for screen readers ● Use consistency with photos so that the teaser image follows through the experience ● Employ easy-to-use video features (avoid very small buttons, and embed videos rather than link out to them on other platforms) ● Use autoplay on a page where audio or video is the only focus, but not immediately on the landing page of the site as this may shock or surprise the reader. ○ Minimize use of auto-play or auto-animating elements

WEB COLOR PALETTE PRIMARY HEX 4 A 0 D 66 359 A 8 E FFA 400 37094 C 256 D 65 E 09000 HOVER STATE HEX VALUES SPECIAL USE CASE Teal 34 D 9 C 3 on Dark Gray 58595 B Can be used on Hub Page call out area ONLY 34 D 9 C 3 58595 B 808285 BCBEC 0 D 1 D 3 D 4 F 1 F 2 F 2

BUTTON STYLES Primary button should be used in most cases Secondary button should be used sparingly High-contrast ratio button mostly used on I Have ALZ section

FONTS STYLES & TEXT LINKS Houschka Alternatives is the primary font. Using an incorrect version of Houschka will result in the capital A being rounded. When Houschka Alternatives is not available, Arial should be used as a substitute.

SITE OPTIMIZATION

SEARCH ENGINE OPTIMIZATION Chapter Site Optimization ● Priority keywords to incorporate are highly searched “Alzheimer’s” and “dementia as well as related terms most topical to page content. ● Keywords should be incorporated into various on-page elements that are crawled by search engines, including: ● ○ Content - within html, not compressed into graphics – the first 156 characters of page copy are most beneficial, often driving visible search results ○ Titles and subtitles ○ Links ○ Image file names and alt tags and video names Home pages are most important but all pages can benefit from optimization.

SEARCH ENGINE OPTIMIZATION Chapter Site Optimization – Localization Local results prioritize cities versus counties, regions or states, often used in chapter sites. Try to highlight largest local cities within your site wherever contextually relevant: • Content • Event pages • Support Group listings • Educational workshops • Resources

SEARCH ENGINE OPTIMIZATION Chapter Site Optimization – Meta Data • Meta code in each page conveys relevance to search engine and often specifically informs visible organic search results. • Meta can be easily updated via the CMS. • Character count is critical for visibility: • Title: max. 68 char. (w/spaces) • Description: max. 156 char. (w/spaces) • Topical keywords should be included. • Copy should be consumer friendly and actionable to draw response. Page meta informs search results

SEARCH ENGINE OPTIMIZATION Suggested Meta Data Customize for your chapter and add to each page via CMS Page Chapter Home Title (<68 characters) ___ Chapter | Alzheimer's Association Helping You Help in Your Area | Alzheimer's Association Support Groups (Optional) Programs & Services (Optional) Support Groups In Your Area | Alzheimer's Association Events In Your Area | Alzheimer's Association Volunteer at Your Local Chapter | Alzheimer's Association News ___ Chapter News | Alzheimer's Association Blog (Optional) ___ Chapter | Blog | Alzheimer's Association About Our Chapter | Alzheimer's Association Programs & Services In Your Area | Alzheimer's Association Description (<156 characters) Our chapter is here to help people in state/region facing Alzheimer's and dementia with education programs, support groups and local resources. Learn the many ways the ___ Chapter can help people with Alzheimer's and dementia and their caregivers and families. Find support groups offered by the ___ Chapter for caregivers, families, and anyone living with Alzheimer's and dementia. Learn how the ___ Chapter helps people with Alzheimer's and dementia and their caregivers and families. Find local Alzheimer's Association events in list top cities in your service area. Learn the many ways you can volunteer with the Alzheimer's Association ___ Chapter. Get the latest news on Alzheimer’s and dementia care, research, treatments and more. Visit your local Alzheimer's Association blog for the latest information on Alzheimer's and dementia. Learn how the ___ Chapter provides help to people with Alzheimer's and dementia and their families and caregivers. > Search results simulator - make sure your meta fits visible character counts

CHAPTER HOMEPAGE Thanks to https: //www. fightdementia. org. au/ Additional Sources: Smashing Magazine, Dementia Voices

HOMEPAGE COMPONENTS Hub Page Main Image 1600 x 350 Hub Routing Area Cards 400 x 140 > See full homepage design. Slider Card 600 x 210

HOMEPAGE COMPONENTS HOMEPAGE FEATURE 1. Establish your local presence 2. Feature top call-toaction. This will change, and likely follow your marketing calendar 3. Think of this as the new era of the chapter banner

HOMEPAGE COMPONENTS FEATURE SLIDER 1. Use slider for second priority calls-to-action, core content, featured local content 2. Look to toolkits in Insite for evergreen options

HOMEPAGE COMPONENTS INTRO COPY Introduction copy, which lands right below the slider, is key to local search engine optimization (template available)

HOMEPAGE COMPONENTS HIGHLIGHTS SECTION 1. Local, Local 2. Make your the programs and community support you provide easy to find 3. Use thumbnail photos that are consistent with the pages each tile links to

HOMEPAGE COMPONENTS Consistent Imagery 1. When selecting a photo for a page, consider what image will be appropriate to highlight this page in other places 2. In Kentico, the “teaser” image will be used in multiple places. Because of this, consider the “safe zone. ”

ARTICLE PAGES

ARTICLE PAGES MAIN NAVIGATION PAGES 1. HELPING YOU (template) 2. EVENTS 3. VOLUNTEER (template) 4. ADVOCACY 5. NEWS 6. BLOG 7. DONATE 8. ABOUT OUR CHAPTER (template) > See full article page design. > See full events page design. > See full news page design.

OTHER IMAGE TYPES Timeline Card with Image 180 x 150 (minimum) Image Gallery 800 x 533 Low image size is important here. Biography Card 280 x 280 Thumbnails 78 x 50

QUESTIONS? For content strategy, contact lblaney@alz. org For SEO, contact, hklein@neverwithout. net For CMS technical questions, contact cmssupport@alz. org