SG

Web Style Guide and Standards
ChristianScience.com 2016

Updated: 16 June 2020

Basic standards

Approvals

  • All text copy, changes, and pages must be approved by the Curator.

  • P&DSG directs and approves design, image selection, and UX

  • TSG directs and approves technology & security 

Page hierarchy

  • Landing pages with wider header images are the top level parent page for all sections

    • Child pages are all text pages.

  • Page titles and headers will use sentence case

  • Text pages underneath landing pages have a thinner banner.

Type hierarchy & Header style standards

  • TOP HEAD - Page Title

  • H1 -(style option in the EZ editor)  — DO NOT USE

  • H2

    • used in promos

    • H2 used as headers of accordions (BLEND ticket submitted 2/12/16 #33666)

  • H3

    • should be used as headers within accordions

  • H4 should be used for intro quotes

------

 Examples (from EZ editor):

Header 1(ez editor — not top of page header) — DO NOT USE

Header 2

Header 3

Header 4
Header 5

Paragraph Header styles

Paragraph header styles look like header styles, but are screen reader friendly when text isn’t actually a header. Paragraph headers are <span></span> styles that won’t interfere with screen readers.

  • H1 & H2 paragraph headers should not be used as the text appears very large and will compete with the normal H1 style.

  • H3— used to mimic h2 paragraph headers, but don't need them to be read by screen readers

  • H5 should be used for intro quotes 

Examples

Header 1/paragraph.h1 (matches top of page header)— DO NOT USE

Header 2 / paragraph.h2 (matches EZ Editor H1 style) — DO NOT USE

Header 3 / paragraph.h3 (matches EZ Editor H2 style)

Header 4 / paragraph.h4 (Matches EZ Editor H3 style)

Header 5 / paragraph.h5 Matches EZ Editor H4 style)

Header 6 / paragraph.h6 (matches EZ Editor H5 style)


Use of promos

  • Promos are the main use of showcasing pages or items of interest on a page

    • Horizontal

    • Grids — using a tables (set to “Show as grid”)

      • Generally do not use more than 3 in a row, but can go up to 4 maximum. 

    • Images are used and showcased on promos, but not always

  • Promos use a “More” button in all cases — text can be unique, but must be approved by Curator

Example:

Reading Room

In this area, you'll find tools and resources to help you advance the healing mission of your branch church and Reading Room.

Reading Room Resource Center

Sunday School

Are you a Sunday School student, teacher, superintendent or parent? Check out these resources to support a richer Sunday School experience.

Sunday School Resource Center

Prison and institutional work

Christian Science branch churches around the world support prison and institutional work through volunteer chaplain programs.

Institutional Committee Resource Center


Accordions standards

Accordions can be used to help reduce the number of site pages — especially if the information is secondary, but also helpful so people can find the information without having to click to another page. 

  • A lot of sections with a lot of content and to avoid extra page clicks

    • FAQ pages are a great example — turn them into accordions

  • Heading text must be very clear within each accordion section

Example:

This is lorem ipsum place holder text (using H3 header style)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lorem quam, vulputate elementum massa ac, pellentesque mattis tellus. Aliquam euismod semper faucibus. Vestibulum at tincidunt lacus, sit amet consectetur quam. Praesent maximus mi sit amet elit volutpat dapibus. Proin finibus et magna ac vulputate. Maecenas consequat elit arcu, ac tincidunt dui interdum eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pulvinar magna quis augue facilisis cursus. In malesuada enim vel nunc varius, id ornare nibh porta. Nunc egestas nibh a justo porttitor lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec euismod in urna eget pellentesque.

This is another header using H3 style

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pulvinar magna quis augue facilisis cursus. In malesuada enim vel nunc varius, id ornare nibh porta. Nunc egestas nibh a justo porttitor lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec euismod in urna eget pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lorem quam, vulputate elementum massa ac, pellentesque mattis tellus. Aliquam euismod semper faucibus. Vestibulum at tincidunt lacus, sit amet consectetur quam. Praesent maximus mi sit amet elit volutpat dapibus. Proin finibus et magna ac vulputate. Maecenas consequat elit arcu, ac tincidunt dui interdum eget. 


Links

  • Images should be used as links, especially when on promos.

  • And “More” buttons should link to pages

  • Header text shall not be links

Buttons

  • Buttons should be used on promos 

  • Should be used to denote a specific, or important, action

  • Should be used for downloading items

Links within body copy

  • If it’s mentioned more than once on the page, link to it only once as a general rule

  • If you link to a page outside of CS.com open a new window

  • Internal page links stay on window using EZNodes 

Bible and Science and Health citation links

  • Use the custom tag titled Bible/ScienceHealth reference (aka “tomeref” tag)

  • This is really easy if you know the citation you can just say SH 495:1 and it automatically creates a link


Videos

Videos can be embedded 3 ways

  1. JW Player emebed tag

    1. ideal for YouTube/Vimeo style videos that preset a title card image on the videos)

  2. Creating a video page and embedding

    1. Works well for videos stored only on BMPS servers

      1. Videos on BMPS servers require a title card image

    2. YouTube/Vimeo videos work well in this,too

  3. Within Promos

Standards

  • Videos embeds should be embedded within wells in most cases.

  • When videos need to be smaller, they can be embedded in promos and sit on the right side of the page.


PDFs

  • PDFs should be embedded within tables that are set to default

  • Set PDFs class to “Display in table row” to display download button

Like this:

Manual Inserts 1up


Photos

Sizing

  • Masthead/Banner images

    • Landing pages: 1300x300

    • Text pages: 1300x200

  • Images across the site should be rectangular using the horizontal/landscape format and use this size & ratio: 1000x550px

Embedding photos

  • If just within text, photos should be set to appear on the right side of pages. Images should always be 1000x550px size (or using that ratio).

  • When images appear in within grids, images should be no larger than “Reference 600x600”. Images should still use the 1000x550px ratio.


Alt tags

Photos

  • Alt tags on photos when there is an editorial point and provide significant information like directions, or have text in them that a screen reader should be able to read to a someone who is sight impaired.

  • Should not be be used when photos are purely decorative.

Links

  • Alt tags should be used when say a button says "More" — it should tell visitors where they will be directed to

  • Alt tags should not be used when the link is embedded and the text of the link already tells the visitor where they are going

    • Also when information is repeated on screen readers it can be a very annoying user experience for those using screen readers. 


Media library standards

  • Images can be stored in the media library

    • Images should be stored in their respective page section folders

  • Images can also be stored as children of the pages where the image appears

    • This is preferred however you can’t save an image as a child of a page at the same time a page is being created. The page has to be published and then images can be saved as children of pages.

This is a test aliquam euismod semper faucibus. Vestibulum at tincidunt lacus, sit amet consectetur quam. Praesent maximus mi sit amet elit volutpat dapibus. Proin finibus et magna ac vulputate. Maecenas consequat elit arcu, ac tincidunt dui interdum eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pulvinar magna quis augue facilisis cursus. In malesuada enim vel nunc varius, id ornare nibh porta. Nunc egestas nibh a justo porttitor lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec euismod in urna eget pellentesque.