Website Documentation

Resource

Included in link:

• Introduction
• Quick Start
• Logos
• Color
• Typography
• Graphic Elements
• Photography & Video
• Layout Examples

All web images must follow the current Web Image Guidelines.

For hero images, follow the current Hero Image Specs.

Web Image Guidelines:

General Web Image Guidelines:

• All images must be large enough to be at least 96 ppi when resized to the web dimensions.
  • Use full size, high-res images as base image whenever possible. Never manually increase the ppi to 96.
• No text included in any images, including hero images.
  • Only exception is label text if absolutely necessary for a diagram. In this case there must be a separate image created for each language – English, French, German, Dutch, Italian.
• All images should have square corners.
  • For any images that are shown on the website with rounded corners, these are added dynamically by the website styling and do not need to be added manually to the image itself.
• No design elements added to photos.
• No animated GIFs (new site does not support any GIF files).
• All icons must be SVG files. All other images must be either JPG/JPEG or PNG files.
• Any questions or image types not covered here should be brought to Monique (m[email protected]).

Image file names:

• No spaces – replace all spaces with either a hyphen - or an underscore _
• No special characters – &, %, ( ), etc.
• Start with image type – hero, pod-shape, 1-column, 2-column, 3-column, icon, blog-hero
• Include podder’s name if a podder is included o Include unique identifying information
• Add pixel dimensions to end – width x height x ppi
• Examples: 
  • image type + podder and podder name if a podder is in photo + shoot location if known and meaningful + single or group if people in photo + objects or location types or other unique identifying info + pixel dimensions 
  • hero_podder-myrthe_barcelona_single_camera-ocean_1600x640x96.jpg 
  • pod-shape_podder-lea_barcelona_group_cafe_330x422x96.jpg

Standard Page Column Images

• These are any images that are not hero images or pod shape images.
  • Width for images in 2 cols: 1200 pixels min, max is +10%
  • Width for images in 3 cols: 680 pixels min, max is +10%
  • Width for images in 1 col: 2000 pixels min, max is +10%
• For any images that will use parallax the image needs to be vertically 10% larger than what should be seen
  • It is important for the focal point to be
  • For images without parallax the height should just be based on what looks good in the page design

Hero Images

• This is the image at the top of the page with the headline on the left. There are two layout options:
  • Taller without curve – Can also have smaller banner text and a CTA button on the left, below the headline. Primarily used for homepages.
  • Shorter with curve – Will have only the headline on the left. Bottom right corner will be rounded.
• No duplicate hero images within regions.
• Follow current hero image specs.

Pod Shape Images

• This is for all images that are displayed in the pod shape on the website (applies to both sizes of pod shape seen on the site).
• Image size:
  • o Minimum/suggested = 330 x 422 pixels
  • o Maximum = 363 x 464 pixels
  • o 96 ppi
• Image layout:
  • Keep all important points (face/pod) within the pod shape. Everything shown in the red will not be visible when on the website.
• Example of file name for sample image: pod-shape_podder-lea_barcelona_group_cafe_330x422x96.jpg

Blog Hero Images

• Landscape hero orientation:
  • Full width above the body copy
  • Minimum/suggested width = 2000 pixels
  • Maximum width = 2200 pixels
• Portrait hero orientation:
  • Indented at top left of body copy, displayed at 1/3 the width of the body copy area
  • Minimum/suggested width = 680 pixels
  • Maximum width = 748 pixels
• NOTE: minimum/suggested width is for image clarity purposes – but knowing that you may only have smaller images from phones for some blogs, if they’re not large enough to meet the minimum width just make them as wide as possible with them still being at least 72 ppi, then you can judge how they look once you’ve added them – by checking on your computer and on your phone – to see if you need to try and get a different image

Square Icon SVG File

• Because they're SVGs, exact size doesn’t matter. Icons just need to be square files to avoid awkward spacing things.
• 80x80px is safe if you need a setting.

Hero Image Specs:

Below are updated hero image specs that apply to all Pages, Campaign Pages, and HCP Pages. All future hero images should follow the below specs, and any existing hero images that don’t work well should be updated to these specs.

Pages can now have separate desktop and mobile image files uploaded. The purpose of this is so that the important part of the image will always be shown on both desktop and mobile and will be less likely to be cut off at certain browser/mobile sizes due to the responsive behavior of the site.

• If both desktop and mobile image files are added then they will be used as such.
• If a desktop image file is added and no mobile image file is added, then the right 600 px width (by 400 px high max) of the desktop image file will be used for mobile.
• If no image files are added then desktop will have a mango background and mobile will have no background and no image.
  • Visit https://www.omnipod.com/is-omnipod-right-for-me/coverage/medicare on your computer and on your phone to see an example of this.

Please share these specs and the accompanying Photoshop template document with any designers that may be creating hero images. Both this PDF and the Photoshop template document are saved at https://insuletmy.sharepoint.com/:f:/p/emorgan/Eo-6ISG2e_JBnmKgo9Ix5QMBRe6w1-Vevr4fySSLlR_Irw.

• Note: if any of your designers do not have access to this location, please send their email address to [email protected] and they will be given access.

Desktop image specs:

For both hero layouts - ‘shorter with curve’ (no subheading and no CTA button) and ‘taller without curve’ (with subheading and/or with CTA button) - 2000 pixels wide by 400 pixels high is the minimum size.

Resource

Links

• Accessible links - example: replace "Download the Spanish Patient Information Form here." with "Download the Spanish Patient Information Form."
  • See this guide for why and other guidelines.
• Never paste an absolute link or use an internal link like /what-is-omnipod when you're linking to a page on the website. 
  • To create a link, you should always be using the Link icon on the toolbar of a wysiwyg field, or a button in the CTA field of a Text/CTA block, or a menu item. For all of these, start typing the title of the page you want to link to, let it drop down a list of matches, then choose it from the list. Don't worry about the language of the link -- it will be the same as the language of the page the link is on.
    • [Note for Drupal team: for wysiwyg links, need to install Linkit module for this to be true.]
• All phone numbers should be tel links (so you can tap to call on a phone), with country codes included in link. 
  • <a href="tel:11234567890">(123) 456-7890</a>
• All email addresses should be mailto links (so you can tap to open an email to that address). Reference. 
  • <a href="mailto:[email protected]?subject=Hello,%20world">[email protected]</a>
     

CTA buttons

• use Title Case Capitalization only (no ALL CAPS, or all lowercase, or Sentence case)
• keep button text short and imperative (Learn More, not Learn more about Omnipod DASH)
• only one ‘important’ style CTA button per inner pages, only one below hero image on homepages
   

Alt Text

• All non-decorative images must have descriptive alt text. See the linked article for why that is and for suggestions on what to put. Note that we make you put alt text for all images, even if they don't add meaning. 
   

Registered Marks / Trademarks

• Use ™ and ® characters. You can use the special character toolbar icon to insert them.
  • Both ™ and ® will automatically superscript, do not add the html tags for superscripting or they will look too small. The font of the page editor may not show them superscripted.
  • Always use the actual ™ symbol instead of superscripting TM (^TM) and always use the actual ® symbol instead of (R) or ^(R)
  • Where to put the symbols for our trademarks
    • Omnipod® System
    • Omnipod DASH®
    • Omnipod® 5
    • PodderCentral®
    • Podder Talk™
       

Navigation menu

• Managing Menus
• Note: Nav items for the dropdown menu deeper than a 3rd level will not be shown in main menu but will show in breadcrumb
   

URL alias rules

• If "generate automatic URL alias" is checked then the page title will be used as the alias, preceded by the page titles of any parent pages from the menu structure, if it needs to be customized uncheck this option and edit as needed, following these guidelines:
  • All lowercase
  • Translate for the language of the page
  • Separate all words with hyphens
  • Reduce labels if it makes sense (can leave out small words like of/the)
  • Replace & with and
  • No special characters including accented characters and registered marks/trademarks
  • HCP pages will get /hcp/ added automatically
  • You don't need to put the language prefix (like en-gb)
     

Disclaimers and source material references

What NOT to do!

• Do not bake any text into images
  • Only exception is diagrams that need labels –  and for all diagrams a desktop and mobile version needs to be created so that labels are readable on mobile
  • If image has text it will have to be replaced on any translations with a translated image if in a different language than original
• No animated GIFs anywhere
• Never include MLR approval ID's/ Veeva part numbers anywhere on the site
   

Text Alignment

• Don't right-align CTA blocks that contain multi-line text in the body (it's difficult to read).
• Avoid centering CTA blocks that contain longer, multi-line text in the body (it's also difficult to read).
   

Heading capitalization

• Don't ever make your headings ALL CAPS.
  • We've made a design decision that headings (<h1>, <h2>, etc.) are differentiated by font size and weight (bold or not).
• If the heading makes sense as a sentence, use Sentence case capitalization with question marks/exclamation points as needed, but only use an ending period if it is a two part sentence.
  • Examples: 
    • Try Omnipod DASH® for free*
    • Systems built for simplicity
    • Is Omnipod right for me?
    • Pod-tastic! Your form has been submitted.
• If the heading does not make sense as a sentence, use Title Case capitalization.
  • Examples:
    • Meet the Omnipod DASH® Insulin Management System
    • Discover Omnipod DASH®
       
• For the headings in Text/CTA blocks or content types with a Body field (like blog posts):
  • Make your heading numbers follow an outline format for the whole page. The primary heading (Heading 1, <h1>) of the page is the one in the banner/hero at the top. Blocks in sections have headings that start at Heading 2, <h2>.
    • If you've got any headings inside text within a Text/CTA block, they should be Heading 3,<h3>, etc. (You can use the WYSIWYG editor to select text and turn it into a heading. Don't use bold in text where you should use a heading because keywords in headings have increased SEO value.)
  • If you don't like the way the styling of the headings looks, you can override that with the "Heading level displayed" option. In a body field, you're going to have to switch to Source and put <h2 class=".h4"> to override.
     

Standard style for common words:

• ZIP Code (not Zip code)
• Email (not e-mail)

Resource

• PDF file names:
  • NO spaces, separate all words by hyphens - or underscores _ (no spaces in file name as this can cause broken links in certain scenarios)
  • No special characters – &, %, ( ), etc.
  • Start with ‘Omnipod_’ if product generic or product name if product specific
    • ‘Omnipod-System_’ (for EROS)
    • ‘Omnipod-DASH_’
    • ‘Omnipod-5_’
  • Brief title/content description, unique identifying information
    • ‘Pod-Placement-Guide’
    • ‘user-guide’
  • Region(s) where it has been approved for use on the website
    • '_Canada'
    • '_UK-Germany-Belgium'
  • Language
    • ‘_English’
    • ‘_Espanol’
  • Example PDF names:
    • Omnipod_Pod-Placement-Guide_Canada_English.pdf
    • Omnipod-DASH_User-Guide_US_Espanol.pdf
• Image file names:
  • NO spaces, separate all words by hyphens - or underscores _ (no spaces in file name as this can cause broken links in certain scenarios)
  • No special characters – &, %, ( ), etc.
  • Start with image type – hero, pod-shape, 1-column, 2-column, 3-column, icon, graphic 
  • Include podder’s name if a podder is included
  • Include unique identifying information, such as photo shoot location, single or group if people in photo, objects or location types
  • Add pixel dimensions to end – width x height x ppi
  • Examples:
    • hero_podder-myrthe_barcelona_single_camera-ocean_1600x640x96.jpg
    • pod-shape_podder-lea_barcelona_group_cafe_330x422x96.jpg

Resource

Resource

Resource

Resource

Resource

Resource

Resource

Resource

Pages: 21-28.

General Notes For Using Colors

Before diving in, it’s important to note some considerations for using color throughout brand materials:

1. Brand colors should never deviate from the specified color breakdowns stated in this guide
2. Never mix color spaces within an execution. You should only use one color space (HEX, RGB, or CMYK) throughout the piece. This applies to all tactics and materials, including presentation decks
3. Always utilize CMYK or PMS for all printed materials
4. Gamut warnings occur when colors can’t convert to identical CMYK. When working with RGB, and not considering printing or converting to CMYK, you can ignore these warnings

FOR FURTHER INFORMATION OR QUESTIONS, CONTACT [email protected]

Approved Colors Overview:

• Omni-Mango (Primary)
  • PMS: 
    • 4008
  • Hex:
    • FFA700
  • RGB:
    • R: 255
    • G: 167
    • B: 0
  • CMYK:
    • C: 0%
    • M: 36%
    • Y: 100%
    • K: 0%
• White (Primary)
  • PMS:
    • N/A
  • Hex:
    • FFFFFF
  • RGB:
    • R: 255
    • G: 255
    • B: 255
  • CMYK:
    • C: 0%
    • M: 0%
    • Y: 0%
    • K: 0%
• Raspberry (Secondary)
  • PMS:
    • 7625
  • Hex:
    • F75E4C
  • RGB:
    • R: 247
    • G:94
    • B:76
  • CMYK:
    • C: 2%
    • M: 81%
    • Y: 75%
    • K: 0%
• Grape (Secondary)
  • PMS:
    • 266
  • Hex:
    • 743DBC
  • RGB:
    • R: 116
    • G: 61
    • B: 188
  • CMYK:
    • C: 68%
    • M: 78%
    • Y: 0%
    • K: 0%
• Arctic Blue (Secondary)
  • PMS:
    • 319
  • Hex:
    • 1AD1DB
  • RGB:
    • R: 26
    • G: 209
    • B: 219
  • CMYK:
    • C: 62%
    • M: 0%
    • Y: 20%
    • K: 0%
• Omni-Beige (Secondary)
  • PMS:
    • 7527
  • Hex:
    • #F1EFE9
  • RGB:
    • R:  241
    • G: 239
    • B: 233
  • CMYK:
    • C: 15%
    • M: 12%
    • Y: 18%
    • K: 0%

Resource

Pages: 29-40

Items Covered in Resource:

• Our Fonts
• Logo and Tagline Fonts
• Hierarchy
• Print Copy
• Website Typography Hierarchy 
• Website & Digital CTA Structure
• Footers & Signatures
• Capitalization & Punctuation

Approved Fonts:

• IBM Plex Sans (Headline)
• Open Sans (Body)

Getting started:

• Use the Layout tab to make edits to a page.
• To add a new page: Content > Add content > [Select appropriate choice]
• To add an image: Content > Media > Add Media > Image
  • Please follow file naming guidelines when adding a new image.
• To add a URL redirect: Configuration > search and metadata > URL redirects > Add redirect

Types of blocks (seen in Layout):

• Accordion
  • Commonly used for FAQ style sections or pages.
• Icon/Text
  • Commonly used for icons with text underneath.
• Image
  • Commonly used for any images within the body sections.
• Text/CTA
  • Commonly used for blocks of text and inserting a CTA button underneath.
• Video
  • Commonly used for adding a YouTube video or a video that's in our content library already.
    • Note: We have moved away from using YouTube to Wistia.
• Webform Block
  • Commonly used for adding one of our many contact forms.

A few best practices:

• Add a space below each section, as seen in Configure Section menu. Only disregard this if you're doing a special workaround design that requires no-space below.
• Don't have multiple neighboring sections in the same color that don't match in overall design
• Don't add extra spaces between sections and blocks unless absolutely required for design. We try to keep things as succinct and consolidated as possible.
• When copy and pasting text, paste it into the Source field, rather than the default text editor field. This removes any extra formatting that may have been carried over.
• Always test unsure design choices for mobile compatibility.
• Don't center-align long blocks of text, but use left-align.

Resource

Included in Resource:

• General Web Image Guidelines
• Image File Names
• Standard Page Column Images
• Hero Images
• Pod Shape Images
• Blog Hero Images

When naming an image file, start with whether it's a 1, 2, or 3 column image. Example: "3-col_pod-starter-kit_680x400".

• These are any images that are not hero images or pod shape images.
  • Width for images in 1 col: 2000 pixels min, max is +10%
  • Width for images in 2 cols: 1200 pixels min, max is +10%
  • Width for images in 3 cols: 680 pixels min, max is +10%

Resource

For Hero Layout with Curve:

• 2000 pixels wide by 400 pixels high is the minimum size.

For Hero Layout without Curve:

• 2000 pixels wide by 700 pixels high is the minimum size.

For Hero Layout on mobile

• 600 pixels wide by 400 pixels high is the minimum size

• PDF file names:
  • NO spaces, separate all words by hyphens - or underscores _ (no spaces in file name as this can cause broken links in certain scenarios)
  • No special characters – &, %, ( ), etc.
  • Start with ‘Omnipod_’ if product generic or product name if product specific
    • ‘Omnipod-System_’ (for EROS)
    • ‘Omnipod-DASH_’
    • ‘Omnipod-5_’
  • Brief title/content description, unique identifying information
    • ‘Pod-Placement-Guide’
    • ‘user-guide’
  • Region(s) where it has been approved for use on the website
    • '_Canada'
    • '_UK-Germany-Belgium'
  • Language
    • ‘_English’
    • ‘_Espanol’
  • Example PDF names:
    • Omnipod_Pod-Placement-Guide_Canada_English.pdf
    • Omnipod-DASH_User-Guide_US_Espanol.pdf
• Image file names:
  • NO spaces, separate all words by hyphens - or underscores _ (no spaces in file name as this can cause broken links in certain scenarios)
  • No special characters – &, %, ( ), etc.
  • Start with image type – hero, pod-shape, 1-column, 2-column, 3-column, icon, graphic 
  • Include podder’s name if a podder is included
  • Include unique identifying information, such as photo shoot location, single or group if people in photo, objects or location types
  • Add pixel dimensions to end – width x height x ppi
  • Examples:
    • hero_podder-myrthe_barcelona_single_camera-ocean_1600x640x96.jpg
    • pod-shape_podder-lea_barcelona_group_cafe_330x422x96.jpg

Resource

• Accessible links - example: replace "Download the Spanish Patient Information Form here." with "Download the Spanish Patient Information Form."
  • See this guide for why and other guidelines.
• Never paste an absolute link or use an internal link like /what-is-omnipod when you're linking to a page on the website. 
  • To create a link, you should always be using the Link icon on the toolbar of a wysiwyg field, or a button in the CTA field of a Text/CTA block, or a menu item. For all of these, start typing the title of the page you want to link to, let it drop down a list of matches, then choose it from the list. Don't worry about the language of the link -- it will be the same as the language of the page the link is on.
    • [Note for Drupal team: for wysiwyg links, need to install Linkit module for this to be true.]
• All phone numbers should be tel links (so you can tap to call on a phone), with country codes included in link. 
  • <a href="tel:11234567890">(123) 456-7890</a>
• All email addresses should be mailto links (so you can tap to open an email to that address). Reference. 
  • <a href="mailto:[email protected]?subject=Hello,%20world">[email protected]</a>

Resource

• use Title Case Capitalization only (no ALL CAPS, or all lowercase, or Sentence case)
• keep button text short and imperative (Learn More, not Learn more about Omnipod DASH)
• only one ‘important’ style CTA button per inner pages, only one below hero image on homepages

Resource

All non-decorative images must have descriptive alt text. See the linked article for why that is and for suggestions on what to put. Note that we make you put alt text for all images, even if they don't add meaning. 

Resource

Use ™ and ® characters. You can use the special character toolbar icon to insert them.

• Both ™ and ® will automatically superscript, do not add the html tags for superscripting or they will look too small. The font of the page editor may not show them superscripted.
• Always use the actual ™ symbol instead of superscripting TM (^TM) and always use the actual ® symbol instead of (R) or ^(R)
• Where to put the symbols for our trademarks
  • Omnipod® System
  • Omnipod DASH®
  • Omnipod® 5
  • PodderCentral®
  • Podder Talk™

Resource

• If "generate automatic URL alias" is checked then the page title will be used as the alias, preceded by the page titles of any parent pages from the menu structure, if it needs to be customized uncheck this option and edit as needed, following these guidelines:
  • All lowercase
  • Translate for the language of the page
  • Separate all words with hyphens
  • Reduce labels if it makes sense (can leave out small words like of/the)
  • Replace & with and
  • No special characters including accented characters and registered marks/trademarks
  • HCP pages will get /hcp/ added automatically
  • You don't need to put the language prefix (like en-gb)

Resource

• Don't right-align CTA blocks that contain multi-line text in the body (it's difficult to read).
• Avoid centering CTA blocks that contain longer, multi-line text in the body (it's also difficult to read).

Resource

• Don't ever make your headings ALL CAPS.
  • We've made a design decision that headings (<h1>, <h2>, etc.) are differentiated by font size and weight (bold or not).
• If the heading makes sense as a sentence, use Sentence case capitalization with question marks/exclamation points as needed, but only use an ending period if it is a two part sentence.
  • Examples: 
    • Try Omnipod DASH® for free*
    • Systems built for simplicity
    • Is Omnipod right for me?
    • Pod-tastic! Your form has been submitted.
• If the heading does not make sense as a sentence, use Title Case capitalization.
  • Examples:
    • Meet the Omnipod DASH® Insulin Management System
    • Discover Omnipod DASH®
       
• For the headings in Text/CTA blocks or content types with a Body field (like blog posts):
  • Make your heading numbers follow an outline format for the whole page. The primary heading (Heading 1, <h1>) of the page is the one in the banner/hero at the top. Blocks in sections have headings that start at Heading 2, <h2>.
    • If you've got any headings inside text within a Text/CTA block, they should be Heading 3,<h3>, etc. (You can use the WYSIWYG editor to select text and turn it into a heading. Don't use bold in text where you should use a heading because keywords in headings have increased SEO value.)
  • If you don't like the way the styling of the headings looks, you can override that with the "Heading level displayed" option. In a body field, you're going to have to switch to Source and put <h2 class=".h4"> to override.

Resource

• ZIP Code (not Zip code)
• Email (not e-mail)

Resource: Brand Guidelines

CLEAR SPACE FOR HEADLINES AND LOGOS

Logos, headlines, and copy must contrast from the background image to ensure legibility and accessibility for all users.

Accessibility in Digital and Print

Font and type play a crucial role in communications and readability must always be kept in mind. Text should always utilize colors that create ample contrast from their background, particularly when displaying color on color. Effective color combinations and appropriate font size help to keep content legible and accessible for our users.

In line text link

Used within body of paragraphs on website or emails. Keeping accessibility best practices in mind, please do not use “click here” as a text link—instead, use language that’s more descriptive about the content or where the link will take the user.

Ratio	Dimensions
1:1	1080x1080
4:5	1080x1350
9:16	1080x1920
16:9	1920x1080