html5-img
1 / 27

Chapter Website Content Workshop

Chapter Website Content Workshop. CHAPTER WEBSITE GOALS & USABILITY CONSIDERATIONS.

caitlinj
Télécharger la présentation

Chapter Website Content Workshop

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter Website Content Workshop

  2. 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 • Minimize distractions • Establish content hierarchy and guidance • Provide relevant actions and context • Learnability and Guidance • Create consistent tone, look • Make content findable (consider SEO and why your audience comes to your chapter pages) WEBSITE GOALS • Ruthless Content Prioritization • Present Thoughtful Contextual Action (callouts, end of page tiles) • Chapter Localization • The Right Engagement at the Right Time (homepage focus on timely topics) • Truly Mobile First

  3. 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

  4. CONTENT BASICS & DESIGN ELEMENTS

  5. USABILITY AND ACCESSIBILITY CONSIDERATIONS CONTENT | LAYOUT Content • 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 6th to 8th grade levels (Weih et al., 2008) • Limit sentence length (less than 20 words in a sentence is ideal) (Weih et al., 2008) • 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 18pt Layout • 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

  6. 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.

  7. STYLE GUIDELINES Page Titles and SubHead Styles • Page Title (H1): AP Title CaseExample: What Is Alzheimer’s? • H2: Sentence caseExample: Your role as care partner • H3: Sentence case Example:: Emotions you may experience as a care partner • H4: 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). 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 18pt AP Title Case Rules for Page Titles

  8. 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-support-groups.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

  9. WEB COLOR PALETTE PRIMARY HEX FFA400 359A8E 4A0D66 58595B 808285 BCBEC0 D1D3D4 F1F2F2 HOVER STATE HEX VALUES 37094C 256D65 E09000 Teal 34D9C3 on Dark Gray 58595B Can be used onHub Page call out area ONLY SPECIAL USE CASE 34D9C3

  10. 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

  11. 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.

  12. SITE OPTIMIZATION

  13. 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.

  14. 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

  15. 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

  16. SEARCH ENGINE OPTIMIZATION Suggested Meta DataCustomize for your chapter and add to each page via CMS > Search results simulator - make sure your meta fits visible character counts

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

  18. 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

  19. HOMEPAGE COMPONENTS HOMEPAGE FEATURE • Establish your local presence • Feature top call-to-action. This will change, and likely follow your marketing calendar • Think of this as the new era of the chapter banner

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

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

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

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

  24. ARTICLE PAGES

  25. ARTICLE PAGES MAIN NAVIGATION PAGES • HELPING YOU (template) • EVENTS • VOLUNTEER (template) • ADVOCACY • NEWS • BLOG • DONATE • ABOUT OUR CHAPTER (template) > See full article page design. > See full events page design. > See full news page design.

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

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

More Related