Education Article Main Title (H1)


The following is a rough guideline on how to build a Zales education article. Consult this HTML file's code-base for exact structure and commenting guidelines.

Who Should Use This Guide

While the majority of this document may be of more use to developers and content populators, other content contributors can benefit from specific sections.

A Few Notes on Page Builds in SmartEdit

The hub, category and article pages make use of four shared components:

  1. Custom CSS: The very first component on every page, located above the hero. Code has been minified since AMP will toss out a <link> tag.
  2. Custom Mobile Navigation: Located directly below the hero. It's visible starting at 1280px.
  3. Custom Desktop Navigation: The left sidebar/desktop navigation.
  4. Custom JavaScript: The very last component in the right column of every page. Raw code has been placed since AMP will toss out a <script> tag.

If you'd like to build article content locally, please refer to smartedit-prepped.html to see how your HTML should be broken out and dropped into different SmartEdit paragraph components.

Note: At the time of this document's creation, the only way to use the template that allowed for custom desktop navigation had been deleted. Please clone an appropriate category/article page to start your build.

Akamai Image Asset Locations*

Currently, all visual assets (images, video, etc.) are hosted on Akamai in the following locations:

  • Hub:
  • Category:
  • Article:
    • Images:
    • Video:

* These folders contain suggested naming conventions for visual assets.

Education Body Copy Headline (H2)

The following elements are meant to demonstrate common content scenarios found in blog-style articles. If any specific content scenario hasn't been addressed in this template, please let team Wasabi know.

This a sample paragraph with a hyperlink. This is bold text. This is italicized and bold italicized text.

Smooth Scrolling Links (H3)

This is an example of a smooth scrolling internal hyperlink. These are used to jump users to specific sections of content.

Note: This specific example has a false value on purpose. Functional examples are above.

For example: <a class="custom-anchor-scroll" href="#myID"> would scroll the user to an HTML element with an id equal to myID.

* This is sample disclaimer text. You just need to add the class custom-disclaimer to the element you have text in.

Button Styles

This template has three different button styles associated with it:

  • custom-btn-black: A black button with white text (see below).
  • custom-btn-ghost-black: A ghost button with black text and a black border.
  • custom-btn-ghost-white: A ghost button with white text and a white border.

To avoid buttons overlapping each other and other content, please place each in a <div> with a class of custom-btn-container. This will ensure they have adequate spacing.

Please keep button copy limited to 25 characters (with spaces) to avoid line breaks on mobile devices.

A horizontal rule used to break up sections (if needed) is below.

Education Category Color Styles and Guidelines

Each education category (Engagement Guide, Gifting Tips, etc.) has primary and secondary background colors associated with them. This helps category and subsequent article content visually consistent.

There are a total of 13 different shades (gray and black options included). To add a background color to any element, simply add the correct CSS class to the HTML element you'd like to style.

For example: <td class="custom-bg-color-red"> would output a table cell a red background.

Color Combinations

A full list of present and suggested future color combinations is below.

Note: Each table cell contains the class needed to apply that specific background color.

Category Primary Color Secondary Color
Engagement Guide custom-bg-color-magenta custom-bg-color-blue
Gifting Tips custom-bg-color-orange custom-bg-color-magenta
Jewelry 101 custom-bg-color-blue custom-bg-color-purple
Diamond Info custom-bg-color-pink custom-bg-color-violet
Style Tips custom-bg-color-gold custom-bg-color-orange
Future Category Color Combinations
Category 06 custom-bg-color-green custom-bg-color-lime
Category 07 custom-bg-color-purple custom-bg-color-teal
Category 08 custom-bg-color-red custom-bg-color-gold
Desaturated Shades custom-bg-color-black custom-bg-color-gray

Using Subdued (Opaque) Background Colors

Each background color has a secondary version set to 80 percent opacity. These colors are primarily used when overlaying text content on images, such as unique category page CTAs. To use any of the above colors at a reduced opacity, simply add the word opaque to the classes listed in the table above.

For example: <p class="custom-bg-color-opaque-red"> would output a paragraph a red background at 80 percent opacity.

Education Image Styles and Guidelines

This is a paragraph with an image aligned to the right. Aligned images should be no wider than 40 percent of the parent container (Ex. The current site's parent container has a default width of 900px, so an aligned image should never be wider than 360px). There are no height restrictions.

There are a few different classes you can use for images. As an example, this image has the custom-img-align-left and custom-mobile-kill classes.

  • custom-img-align-left: Floats the image to the left.
  • custom-img-align-right: Floats the image to the right.
  • custom-img-align-center: Centers an image.
  • custom-img-style-border: Adds a border you specify in the stylesheet to the image.
  • custom-img-style-circle: Rounds the image. For best results, use an image with an equal width and height.
  • custom-img-style-kill: Removes any unique styling applied by other classes outside of the ones listed above.
  • custom-mobile-kill: Removes the image (and any element with this class) at a screen size of 700px.

Note: If a floated image doesn't have the mobile-kill class, it will take on the align-center properties at 700px.

To properly clear a floated image, you can add an empty <div> after all the floated content with a class of custom-clear. This method is a failsafe.

Education Article List Styles

This is a sample paragraph. If possible, use paragraphs to create separation between header and list elements.

Sample Unordered List

  • This is an unordered list.
  • List items and other elements have been tested for worst-case scenarios.
  • Below is a nested unordered list.
    • Nested ordered list item.

Sample Ordered List

  1. This is an ordered list.
  2. List items and other elements have been tested for worst-case scenarios.
  3. Below is a nested ordered list.
    1. Nested ordered list item.

Education Article Table Styles

When creating tables, it’s best to keep in mind their primary use is for tabular data, such as pricing. A good practice is to consider tables a last resort when it comes to content creation as they’re not especially mobile-friendly.

Note: All tables listed below have been optimized for mobile devices.

There are a number of table sizes that can be used in this template. For a table to render properly, it needs to be contained in a <div> with the class custom-table-container. There are a number of secondary classes you can use to set how many columns the table has and how wide the columns should be:

  • custom-table-100: A single-column table.
  • custom-table-75-25: A two-column table with the first column being 75 percent wide and the second being 25 percent wide.
  • custom-table-66-33: A two-column table with the first column being 66 percent wide and the second being 33 percent wide.
  • custom-table-50: A two-column table with each column being 50 percent wide.
  • custom-table-33: A three-column table with each column being 33 percent wide.
  • custom-table-25: A four-column table with each column being 25 percent wide.

Note: Please see the HTML example in the page's content editor as an example of how to structure a table.

Sample Column Title Sample Column Title
Sample Data Sample Data
Sample Data Sample Data
Sample Subhead (Used to break up sections)
Sample Data Sample Data
Call To Action

Calls to action (or CTAs) are separate sections of content used throughout the education section to drive users to specific, non-article pages.

Education Article Video Styles

Videos used on the site are hosted internally and can take a poster or thumbnail image. It's advised to avoid placing a "play" button on the poster/thumbnail as a few different browsers already include this. All relevant browsers display user controls.

Note: Please see the HTML example in the page's content editor as an example of how to make use of appropriate HTML video attributes.

SEO Best Practices

The following are some general guidelines to consider when creating SEO-friendly Web content.

General Content & Copy

  • Make Use of Existing User Profiles/Personas: Producing content to attract a general audience generally results in traffic from users who don't relate to the campaign. Personalized messaging tends to convert at a much higher clip, resulting in a higher-ranking page.
  • Create Keyword-heavy Content: Keywords refer to specific combinations of terms and phrases your users will likely input into search engines to find your page.
    • These are divided into short (usually one word) and long-tail (usually more than one).
    • Certain HTML tags have more weight than others. Make sure all heading tags (<h1> and <h2> tags, specifically) and <a> tags are keyword-rich.
    • A marketing team should be able to provide this data, but if not, try using Ubersuggest to do some lower-level keyword research.
  • Link Building: Always strive to create internal links within content when possible. This not only helps the ranking of the pages you're linking to, but helps your page rank better as a referrer.
  • Content Length Matters: Keep in mind Web pages with longer, high-quality content get better search rankings because users tend to get information from a single reliable source. Pages need to have at least 300 words of live copy on them to be considered relevant. Informational articles tend to rank better once they reach 2,000 words.
  • Avoid Jargon: There's a point where something can be too clever. If a user doesn't immediately understand something, they're likely to leave the page. When someone leaves your page after a single-viewing session (meaning they don't progress to a conversion point), they bounce. A page's bounce rate is an important statistical metric that factors into page ranking. If the campaign is reliant on a user moving deeper within the site, then you want to strive for as low a bounce rate as possible.

Design & Development

  • Don't Make The User Think: This may be the Web's golden rule, and applies to every phase of Web design and development. Every experience is meant to drive a user somewhere, and they want to get there as quickly as possible. Here are a few questions to ask yourself to remove any subjectivity regarding functional elements and user experience.
    • Will the user understand what do in a split second?
    • Does this get the user to a conversion point in as few steps/clicks as possible?
  • Clean Code & Semantic Markup: Pages built in proper semantic order always rank better. The location and number of certain tags also play a role:
    • Pages should have one <h1> and it should be placed as high as possible in the markup.
    • Pages should have no more than six <h2> tags.
    • Since heading tags have SEO value, they shouldn't be placed in blocks of content used on other pages to avoid duplicate content penalties. If a call-to-action has a heading in the design, consider using a <span> instead.