Creative Guidelines for Web Production Projects

Anytime you’re wondering if a design is possible, be sure to loop in a Web Strategist. A Web Strategist should always be looped in as early as possible in order to provide guidance on how to achieve a design that creative may be looking for. 

Submitting the Staging Ticket to Web

  • Once the comps are approved by web, brand, and the school a MKTGWEB ticket for staging can be created in Jira.
  • Web production tickets should contain all final comps, copy, and image files, even if they have already been included in the project’s epic.
  • Ticket turnaround time for a web producer will vary depending on the type of page update we are making and how many other projects we currently have. Please refer to our ticket turnaround times on the Jira Submission page.

Designing for WordPress

  • Designs: All designs should be finalized before ticketing and sending to the web production team.
    • If you have any questions about layout possibilities or would like comps/wireframes to be reviewed prior to school review and final design comps, feel free to reach out to a web strategist.
  • Content Examples: There are different ways of styling content such as CTAs, background images, curriculum pages, profile pages, and more!
  • Layouts: Layouts including fluid-width pages, full-width pages, and pages using a sidebar should all use the 12-column grid.
  • Content containers: When creating a full/fluid width page, please refer to content containers for the 3 width options we use to display content. Container large (max-width 960px) and medium (max-width 780px) are used to constrain the width of a block of text on a page without a sidebar.
  • Accessibility: Please consult accessibility guidelines regarding color contrast, images, etc. Before final designs are delivered to the web production team, please review to ensure they meet accessibility requirements.
  • Desktop & Mobile Comps: For all layouts, both a desktop and mobile comp should be provided. (Unless otherwise specified, desktop comps will be used for tablet as well).
    • The mobile comp should be optimized for mobile. Header and margin sizes should be decreased in order to show more content above the fold and reduce the amount of scrolling.
    • We will need different sized images for both desktop, tablet, and mobile. Standard sizes will be:
      • 440 pixels wide (under 20 kilobytes)
      • 767 pixels wide (under 50 kilobytes)
      • 1440 pixels wide (under 100 kilobytes)
    • Please refer to our Image Sizes guide for more information.

Working with Images

  • Images should be optimized appropriately.
  • File names should be descriptive and should indicate desktop/mobile use when applicable. Do not include jira ticket number or pixel dimensions as part of the filename, and avoid naming images with a sequence of numbers (ex: icon01, icon02).
    • Example of good image filename: admissions-hero-desktop.jpg

Text on Images

  • Text should be minimal. Due to the responsive nature of the page, a large amount of text will fall off the image at smaller screen widths. 
  • Text should never be part of an image. We will use classes to overlay the text on the image. This will allow users to tab through text and allow screen readers to read the copy vs an image.

Copy

  • All copy added to the web production ticket should be finalized.
    • For new pages, any comments and tracked changes should be hidden unless it is specifically for the web production team (such as a link URL).
    • For existing pages, tracked changes should be shown as it is easier to update the page correctly. Comments should not be visible.
  • If using “|” symbol in text, use actual symbol and not uppercase “I” letter.
  • Please consult accessibility guidelines regarding all copy guidelines such as link text, semantic header structure, etc.
  • Copy docs should indicate the accessible header structure

Next Steps:

  • Once the comps are approved by web, brand, and the school, a MKTGWEBOPS ticket for staging can be created in Jira.
  • Web production tickets should contain all final comps, copy, and image files, even if they have already been included in the project’s epic.

Ticket turnaround time for a web producer will vary depending on the type of page update we are making and how many other projects we currently have. Please refer to our ticket turnaround times on the Jira Submission page.