Formatting in T4 - Headlines, Paragraphs, Lists, and Images

Typography

See guidance and best practices page

Images

Typography - Headlines, Paragraphs, Lists, Infobox, Numbers, Blockquotes, and Buttons

Images - Standard Sizes and Aspect Ratio

1000px x 560px

Aspect Ratio: 16:9.
Note: the focal point - the sublect's face - is near the horizontal center of the image. This is best pratice for mobile display.

Images - Hero Sizes and Aspect Ratio

1800px x 450px

Aspect Ratio: 16:4.
Note: This hero image size is used as a standalone without text.

1800px x 800px

Aspect Ratio: 16:7

1800px x 1000px

Aspect Ratio: 16:9.

Images - Optimization, saving for web

Step 1: Size the image

Crop and set your image size. At this stage, you can also set the resolution to 72dpi. You will see the new image size displayed at the top of the dialog box. See typical image sizes

Step 2: Export the image

To begin the optimization steps, select File > Export > Save for web. See above.

Step 3: Optimize the image

1Select the 2-Up tab. This allows you to preview and compare the weight and quality of the original and optimized versions of the image.

2Select a built-in JPG medium or JPG high preset. You can also adjust all of these settings manually.

3The quality can also be manually adjusted. Try different settings to get the lightest image file without compromising the quality too much.

4If you haven’t set the width to the chosen format, you can set it now. This is important as it will produce the lightest file size possible. Keep the W and H linked.

Important: It’s a good practice to keep the original version of your image and not write over it when saving your optimized image.

Images - Resizing for Mobile

Image resize Understanding the grid

There are sixteen horizontal increments and eight vertical increments. The red numbers identify the horzontal grid lines 00 through 16 and the vertical grid lines 00 through 08.

Image resize Identifying the focal point

In this case the student's face is the focal point. Notice the grid lines intersect at the 10 and 01.

Image resize Adding classes for mobile display

Three attributes are controlled by three sets of classes. The attributes are container height, image size, and image position.

In this case, the three added classes are hero-wrapper-height-100, enlarge-200, and horizontal-10-vertical-01

Wrapper class

This group of classes control the height of the wrapper in 15% inrements from 25% to 300% and 25% increments from 400% to 600%. The class is written in the pattern of the following examples.

In the example above, using the class hero-wrapper-height-100, the height of the wrapper is 100% or 1:1.

• hero-wrapper-height-25 = 25% - 4:1
• hero-wrapper-height-50 = 50% - 4:2 or 2:1
• hero-wrapper-height-75 = 75% - 4:3
• hero-wrapper-height-100 = 100% - 4:4 or 1:1
• hero-wrapper-height-125 = 125% - 4:5

Enlarge class

This group of classes control the size of the image in 25% inrements from 100% to 1000%. If the image is 100%, the width of the image is equal to the width of the screen. The class is written in the pattern of the following examples.

In the example above using the class enlarge-200, the image is twice the width of the screen.

• enlarge-100 = 100%
• enlarge-125 = 125%
• enlarge-150 = 150%
• enlarge-175 = 175%
• enlarge-200 = 200%

Position classes

These two groups of classes control the position of the image. The class name is derived from where the horzontal and vertical grid lines intersect. The class name always begins with the horizontal grid line, horizontal-10 in this example, followed by the corresponding vertical grid line, vertical-01 in this example.

In this example, the complete class is horizontal-10-vertical-01. Notice the hyphen between the classes.

There are 16 horzontal classes in increments of 01 - horizontal-00 through horizontal-16. The class is written in the pattern of the following examples.

• horizontal-00
• horizontal-02
• horizontal-02
• horizontal-03
• horizontal-04

There are 8 vertical classes in increments of 01 - vertical-00 through vertical-08. The class is written in the pattern of the following examples.

• vertical-00
• vertical-02
• vertical-02
• vertical-03
• vertical-04

The two classes - one from horizontal group and one from the vertical group - are always combined with a hyphen to make one class name, horizontal-10-vertical-01 for example.

Padding - Sizes, placement, and backgrounds

Panels - General

Panel - Hero Image

Direction and Guidance

Usage - Standalone image usually positioned at the top of a page.

Panels - General

Panel - LGS Buttons

Direction and Guidance

Usage - Direct targeted audiences to specific content.

Panels - Image Combinations

Panel - Lead Image

Direction and Guidance

Usage - Link to a timely story or content.