Back to Docs


Purpose

This style guide contains suggestions and instructions on page layout, code formatting, and unique features you can add to regular webpage content to enhance usability and style. Please stick closely to these guidelines when adding content to HUT sites.

Navigation Headers Text Links Lists Tables Media Templates


Navigation

  • Main navigation bar should not exceed 6 items
  • Main navigation bar dropdowns should not exceed 10 items



Headers

  • The h1 is automatically added to a webpage based on the Page/Menu Title field set in the Page Properties
  • When adding a new page, start headers with h2
  • Follow proper header hierarchy when coding content: h2, h3, h4, h5, h6
  • Ensure headers conform to web standards by removing any other tags (strong, em, etc.) from within the header code
  • Capitalize the first letter of each word in a header, instead of using lowercase or all caps
  • Replace any text appearing to be a header with an appropriate header tag
  • Example: http://eirmc.com/patients/visitor-information/for-surgery-visitors.dot



Text

  • Use strong and em to highlight or delineate important information
  • Use br to format addresses and signature lines
  • Use hr to differentiate content or indicate content hierarchy
  • Use small for disclaimer and note text
  • Example: http://eirmc.com/patients/visitor-information/

Alignment

<p class="text-left"></p>
<p class="text-center"></p>
<p class="text-right"></p>

Formatting

Address

<p><strong>Location Name</strong><br />
Address, Suite/Apt #<br />
City, State, Zip<br />
<strong>Phone:</strong> (123) 456-7890<br />
<strong>Fax:</strong> (123) 456-7890</p>

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
Phone: (123) 456-7890
Fax: (123) 456-7890

The following street address standards have been adopted based on the United States Postal Service standards for State and Street Suffixes.

  • Suite = Suite
  • Road = Rd
  • Street = St
  • Boulevard = Blvd
  • Court = Ct
  • Avenue = Ave
  • Circle = Cir
  • Drive = Dr
  • Highway = Hwy
  • Lane = Ln
  • Pike = Pike
  • Plaza = Plz

Date

  • Each day of the week should use the standard abbreviation
  • Example: Sun, Mon, Tues, Wed, Thurs, Fri, Sat
  • Each month should use the standard abbreviation
  • Example: Jan, Feb, Mar, April, May, June, July, Aug, Sept, Oct, Nov, Dec

Time

  • Use lower case for Ante Meridiem and Post Meridiem
  • Do not use separating characters
  • A single hyphen with one space before and one space after should be used
  • Do not use a double hyphen, also known as an, “Em Dash” (see reference)
  • The date range is followed by a semicolon, single space, and the time range
  • Example: Mon - Thurs: 8:00am - 5:00pm

Phone/Fax Number

  • Numbers throughout entire site should be consistently formatted as (xxx) xxx-xxxx
  • Example: (555) 555-5555

Non-Text Content

All non-text content must have alternative text – alt=“something” or null alt=“”

Images

  • If the image is there only for aesthetic value, use null alt=“”
  • If the image contains text that is not in the surrounding content, alt should be the same as the text in the image – should be accurate & equivalent; succinct (short), NOT be redundant
    • If the content of the image is not on the page (like 1 huge infographic), then a link should be provided to a page that contains the content description.
  • Do not use 'image of', 'picture of', 'smiling lady', etc.
  • Alt text should not repeat a heading
  • If an image is the only thing within a link, it must always have alt text; includes image maps and buttons
  • The title attribute should not be used on images, use alt attribute instead


Links

  • When appropriate, make links into buttons and add an icon to help explain the purpose of a link
  • Any URLs appearing within content should be made active links
  • Replace verbiage within a link if it contains "click here"
  • For links directed to internal pages, do not use target=“_blank”
  • For links directed to external pages or PDFs, use target=“_blank”
  • For email addresses, use a href="mailto:jane.doe@hcahealthcare.com>email /a rather than, email a href="mailto:jane.doe@hcahealthcare.com>jane.doe@hcahealthcare.com /a



Lists

  • Use strong, em, or a within lists to highlight or link to important information
  • For unstyled lists, add class="unstyled"

Ordered

  1. This is an ordered list.
  2. This is the second item, which contains a sub list.
    1. This is the sub list, which is also ordered.
    2. It has two items.
  3. This is the final item on this list.
<ol>
  <li>This is an ordered list.</li>
  <li>This is the second item, which contains a sub list.
    <ol>
      <li>This is the sub list, which is also ordered.</li>
      <li>It has two items.</li>
    </ol></li>
  <li>This is the final item on this list.</li>
</ol>

Unordered

  • This is an unordered list.
  • This is the second item, which contains a sub list.
    1. This is the sub list.
    2. It has two items.
  • This is the final item on this list.
<ul>
  <li>This is an unordered list.</li>
  <li>This is the second item, which contains a sub list.
    <ol>
      <li>This is the sub list.</li>
      <li>It has two items.</li>
    </ol></li>
  <li>This is the final item on this list.</li>
</ul>



Tables

Accessibility

  • If tables are used, all table headers should be identified with the th element
  • Table header should have appropriate scope attribute:
    • th scope="col" for column headers
    • th scope="row" for row headers
    • There should be no empty th
  • Do not use table summary, use caption instead to describe the table’s purpose
<table class="table">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>    
    <th>Points</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>    
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>    
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>    
    <td>80</td>
  </tr>
</table>
Firstname Lastname Points
Jill Smith 50
Eve Jackson 94
John Doe 80



Media

Images

  • For image code, use: img class="" src="/util/images/" alt="" width="" height="" /
  • Use appropriate alt text:
    • img alt="joint commission seal of approval"
    • img alt="take the heart risk assessment button"
    • img alt="st. mark's hospital logo"
  • Specify correct image dimensions: img width="200" height="300"
  • Use lowercase with dashes to create descriptive filenames
  • The file path should ideally reflect the title (example: Dr. John Smith would be named dr-john-smith-md.jpg) since search engines rank images on both of these parameters.
  • Use an optimized and descriptive title that reflects what the image is portraying
  • The image alt tag should be an optimized description of what the image is portraying
  • The image should be embedded on a page with appropriate relevant content, and shouldn’t take up entire real estate on page.
View Alt Text Guidelines

Alignment

<img class="pull-left image-margin-left">
<img class="centered">
<img class="pull-right image-margin-right">

Captions

  • To add an image caption, use:

This is my caption that appears under this image.

<div class="pull-right image-margin-right">
  <img class="" src="/util/images/" alt="" width="" height="" />
  <p>This is my caption that appears under this image.</p>
</div>

Rules & Guidelines

  • Save all images for web (72 dpi, RGB, 50% compression)
  • Save as .jpg for non-transparent and .png for transparent
  • Avoid the use of outdated images
  • Encourage lifestyle photography when applicable (both long range and close up photos are allowed)
  • Typographical or illustrative components are acceptable
    • Consider the use of marketing collateral wisely and use only the main component/focus of the material(s) in the banner
    • Limit the use of extraneuos verbiage like day, time, and description in banners
    • Additional text can be added to the banner text box or to the page where banner links
  • Clear, high resolution, original images are preferred.

Specs & Sizes

The following image specs are displayed by width x height:

Interior Page Image Standards

  • Place in /util/images folder
  • Vertical images: 200 x 275px
  • Horizontal images: 250 x 200px
  • Large Group Shot: 350px (w)
  • Portrait/headshot: 150 x 200px

Physician Image Standards

  • 400 x 400px
  • Place in /util/images/physicians folder

Building/Location Image Standards

  • Place in /util/images/building folder
  • Facility (main location - about us section): 250 x 250px
  • Building 1 (full size in locations map): 215 x 174px
  • Building 2 (thumbnail, landing page): 350 x 350px (no longer 54 x 54px)
  • Background image (landing page): 700 x 400px

Awards & Accolades Image Standards

  • Place in /util/images folder
  • High resolution versions are available on the Web Services share drive: Web Services\Design Backup\Logos
  • Square: 100x100px
  • Other Configuration: 100px (w)

Slider, Feature, & Service Image Standards

  • Sliders: 1500 x 500px
    • Place in /util/images/adaptive-content folder
    • The ideal range for image size is 100kb - 300kb. Once you've selected your lifestyle photo, consider processing it through a site like: http://tinypng.org or http://minijpg.com
    • Titles: 2 lines
    • Descriptions: 3 lines
  • Home Features: 300 x 300px
    • Place in /util/images/home-features folder
    • Titles: 2 lines
    • Descriptions: less than 175 characters
  • Services: 300 x 175px
    • Place in /util/images/services folder
  • Other Image Standards
    • Favicon: 16 x 16px
    • Place in /local/images folder

Newsroom - Image File Upload Field

  • Landscape Photo or Logo - 900 px wide with variable height (Preferred Size)
  • Landscape Photo or Logo - 450 x 250
  • Portrait Photo - 200 x 200
  • Headshot or Physician Photo - 200 x 200 (Preferred Size)
  • Headshot or Physician Photo - 200 x 275
  • Award Logo - 200 x 200
  • Any additional images placed within the press release body should be added using the standard interior page image sizes.

View examples of the various newsroom sizes here: http://web-q-hospital.prod.ehc.com/about/newsroom/

Photo Unavailable/Missing Image Standards

Documents

  • For document code, use a href=" " target="_blank">Title img src="/util/images/icon-pdf.gif" alt="PDF icon" width="16" height="16" /
  • Rather than display an image of a PDF on a webpage that links over to the PDF, insert a "Download our brochure" button as shown here: http://web-q-hospital.prod.ehc.com/service/stroke.
  • Note on PDF usage: Rather than link directly to an event flyer or a service brochure from a banner or web page, create a new web page which includes the PDF content and insert a button that links to the PDF on the page (if needed).
  • All documents should be saved and upload as PDFs
  • Place in /util/documents folder
  • Prior to uploading a PDF, ensure the Description fields contain appropriate information
    • Open the PDF
    • Hit Ctrl+D
    • Enter appropriate information into the Title and Subject fields
    • Leave Author and Keywords blank
    • Hit Ok
    • Save the PDF

Videos

  • No more than two single videos will be allowed separately on a page
  • Once videos exceed this limit, they should be combined into a playlist and added to the page
  • Up to two playlists can appear on a page
  • Videos embedded within content: 300px (w)
  • Videos added to the right column: 265 x 200px
  • Services sidebar: 265 x 200px
  • For videos embedded on HUT sites, please use the responsive macros.
  • A grid size of 12 is recommended for responsive YouTube macros on HUT. This includes videos within the main content and sidebar on a regular HUT page, as well as videos within the main content and sidebar on HUT service pages. You can adjust as needed to fit video properly into the page layout.

If you receive a request to add a video to a page that already has two videos from a facility that maintains their own YouTube account, please let the marketing director know about these standards and ask if they can add the video to a playlist. If you receive this request from a facility for which we maintain the YouTube account, please add the video to an appropriate playlist within the account.




Templates

photo of HUT template photo of HUT template photo of HUT template photo of HUT template photo of HUT template photo of HUT template

Back to Top