1. Content Best Practices

2. Tabs & Accordions

3. Tabs and accordions help group related content together and reduce the overall length of a page.
The majority of the content is hidden by default and it relies on the end-user to know how to view more.
Additional interactions are required to see everything that the page has to offer.
GOOD
BAD

4. Never place important information in a hidden tab or accordion!
Don’t use more than 4 tabs at a time

5. Tables

6. Render data that belongs naturally in a grid
USE TABLES TO
Render data that belongs naturally in a grid
in other words, when a number of objects are comparing the same set of properties

7. Structure your content
DON’T USE TABLES TO
Structure your content
or for any reason other than rendering data that naturally belongs in a grid

8. BUT WHY? Accessibility Responsiveness Page Speed
Tables are difficult for screen readers to translate because the data doesn’t always make sense when read left-to-right and top-to-bottom. Complex tables with spanned columns and rows aren’t supported at all by most screen readers.
Responsiveness
Depending on the content, the presentation on a mobile device may not create the best user experience, especially if the content can be presented in a different way without using a table.
Page Speed
Tables typically use more lines of code than the alternative solution, which means the page will take longer to download the code. Customized widths and sizes on tables also affect page load times.
BUT WHY?

9. Headings & Links

10. H1 H2 H3 H4 The title of the page H5 Separates sections on a page
Only use one H1 per page
Separates sections on a page
Separates sections within a section
Separates even more sections within a section
Typically used more as a label for lower-level paragraphs or lists

11. Heading hierarchy is important!
Don’t skip a heading just to attain a better visual appeal.

12. Primary Button Secondary Button External Links
The primary button style should only be used for action-related links or links to pages within the same section that are directly related to the content being viewed.
The secondary button style can be used for internal links that are outside of the current section or not directly related to the page’s content/purpose.
External Links
Links to an external website or domain should use the standard link style and always be set to open in a new window.

13. Avoid Inline Styles!

14. Text EMphasis

15. Bolding
Too much bolding takes away its effectiveness and the important messages that you really want to be seen will likely be lost on most readers.
Never bold more than 10% of your total text and avoid bolding more than 10 words in a row.

16. Italics
Italic text is typically more difficult to read on the web, especially when it’s used often and when intermingled with other types of text. As long as it’s used sparingly and consistently, there should minimal negative effects.
Italics work well for special notice labels and figure or table captions.

17. Underlining
With other text emphasis options readily available, like bolding and italics, the need for underlined text has basically become obsolete.
Underlines should especially never be used in conjunction with already bolded or italicized text. Big mistake, HUGE.

18. THERE’S JUST SOMETHING ABOUT ALL CAPS THAT MAKES PEOPLE UNCOMFORTABLE.
Outside of headings, logos and abbreviations, text in all caps will likely result in your audience feeling yelled at or potentially offended.

19. Accessibility

20. ALT TEXT
Alternative text is used to provide a descriptive explanation of a link or image’s purpose. Screen readers rely on alt text to translate the information to users with disabilities.

21. Links Without Alt Text Links With Alt Text Click Here
Apply for Medi-Share benefits
Click Here
Watch Sharon’s testimonial video
Click Here
View our contact information

22. Images Without Alt Text Images With Alt Text
???
Man and woman smiling with their baby!

23. Avoid using images that contain a lot of text
Images that contain more than a sentence or two as part of the image will require a plain text alternative, otherwise, users with disabilities won’t be able to obtain the information.

24. Aliasing

25. Aliases should let the user know where the page lives in the site
Aliases should let the user know where the page lives in the site. Each level needs to match up with an actual page.
/medi-share/who-we-are/
Medi-Share > Who We Are

26. By default, Episerver builds the automatic alias based on where it’s located in the page structure. As long as the structure is set up properly and everything is named correctly, no changes should be needed.
Folder names are included in automatic aliases so custom aliases need to be assigned to override the folder name for each subpage.

27. SEO

28. Enter descriptive page titles and descriptions on every page1
Enter descriptive page titles and descriptions on every page

29. Use dashes instead of underscores2
Use dashes instead of underscores

30. Avoid page titles that are longer than 75 characters3
Avoid page titles that are longer than 75 characters