�ǿ����޴�ý

Headings are used to break up the content into clear sections so users can easily skim and read through the content that is most relevant to them.  Headings should be succinct and clear; the simpler the language, the better. 

Headings range in size from H1 to H6 and are used to create a hierarchy to find information on the page. 

The H1 tag is reserved for the title of the page and should only be used in that instance. 

The H2 tag is used to introduction sections and can be used multiple times on a page. The H2 is for main ideas.

The H3 tag is for sub-ideas and can also be used multiple times on a page. 

H4, H5 and H6 are rarely used because it is uncommon to have enough information on a page to require their use. 

Headings should not appear as standalone text. They should always be followed by regular paragraph text.

Headings should be used only in body text on a page, in news, or in events (as needed). 

Aim for 300-700 words within the body text on each page. 

Body text should include a combination of paragraph text, headings, links, and bulleted or numbered lists.

Bolded text should be used sparingly. 

Italics are reserved for titles of compositions, papers, and other publications. Do not italicize entire sentences or paragraphs. 

Text should never be underlined.

Bulleted and numbered lists make it easier for users to read through checklists and similar lists. 

Text should be aligned to the left at all times. Do not center or right-align text.

Line breaks should be used sparingly and are not necessary when using headings properly. 

Block quotes should be used for testimonials in body text.

Links to provide a path for our users. We never want to lead them to a dead end, and properly used links help them navigate through the site with confidence and speed.

Provide relevant links when a user will need or want more information or will want to take an action. For example, when mentioning the application for admission, always link to the “Apply now” page.

Links should never be listed as a full URL. 

Links should be embedded with action verbs. Tell the user where they’re going and what they’ll find by clicking on a link. Use phrases like:

• Learn more about (subject).
• Read about (subject).
• Download the (file).
• Contact the (person or entity).

Links should never be embedded in headings. 

Link to “friendly” URLs that use readable words. Do not link to “node” URLs.

Links are automatically formatted to be the correct style and color when you create the link. 
 

If you're looking to update the photos or videos on your site, please fill out this and Creative Services will get back to you.

Photographs can be used in the body text sparingly and in Old Ragin' CMS spotlights. 

In all cases, the photographs should supplement the text and not replace it. 

Do not upload event flyers as photographs. Information on flyers must be written as text in the web page.

Photographs should be uploaded as .png or .jpg files. Gifs can be used, but do so sparingly.

As a quick guide, here are all of the image size guidelines for the new site. We recommend you try to follow these guidelines as closely as possible with the image sizes on your site. 

Embedded Images, Checkerboard Images, Gallery Images
760 x 500 px

Author Profile Images
500 x 500 px

Blog Image
760 x 400 px

Differentiator Images
600 x 600 px

News/Story Header Images, Page Header Images
1200 x 800 px

The Old Ragin’ CMS provides designated areas to display images on your site. Many homepages have the option to provide a centerpiece slideshow. Others have an area for header images. All have the option to include images in spotlight modules on the right side of your pages.

All centerpieces and top images are managed by the Office of Communications and Marketing for branding and design purposes. Photos will be taken by their staff in coordination with web ambassadors and uploaded to sites.

Below are the dimension requirements for images used within the site.

• Images in the General Purpose Slides and Basic Spotlights are 230px x 153px
• Images for News and Events are 600px x 400px (will resize automatically for thumbnails)
• Inline images for the Events/Info/Admission Updates section are 165px x 110px

Only use PDF documents when the user will need to download and print an item. They should not be used instead of text on a page. 

PDFs are not searchable and are not consistently accessible for all users, especially those on mobile devices.

Word and other documents are very difficult for mobile website users to view and should be considered a last resort.

When determining which media type to use, consult a web content strategist for guidance at website@louisiana.edu.

Webforms are a convenient way to collect information and feedback from your users.

However, webforms on our websites cannot be used to collect sensitive or financial information. 

Our webforms are not to be used to collect sensitive information, including:

• Detailed contact information (combination of email addresses, home and mailing addresses, and phone numbers)
• Information protected by FERPA (�ǿ����޴�ýIDs, GPAs, test scores, etc)
• Payment information (i.e. credit card numbers)

Webforms must be created under the supervision of the web content strategist or web trainer. 

If you need to collect sensitive information,  instead.

Program pages are meant to be an introduction to a program at the University. The program page is not a deep dive into the program.

Program pages on a site will appear in that site's program landing page.

Our program pages utilize some of our common components for specific purposes or have different restrictions than normal. 

Page Header

On our program pages, instead of a header image, we may want to feature a News/Story piece. Typically, this will be a spotlight on a current student, but in rare instances we may use a news article. This substitution would need to be approved by the Web Team.

The featured News/Story may be omitted.

Differentiators

On our program pages, our first differentiators section only pulls in one differentiator card. In the place of the other two cards is the quick info ratings. If either of these pieces of this section are omitted, both pieces need to be omitted.

There is another differentiators section where you can pull in three additional differentiator cards. Do not repeat the differentiator card that was included in the upper section of the page.

Checkerboards

When checkerboards are used on program pages, they are reserved for information about concentrations. 

Accordion

At the bottom of the program page, there is a section called Program Requirements which displays as an accordion. 

The Differentiators Section requires three Differentiator Cards. If all three spots are not filled, your page will be left with a large area of white space. While white space is not always a bad thing, we want to make sure we use it strategically and typically, this area left blank will add too much white space. 

Use this spotlight to promote an important item on your site and direct users to it. 

A basic spotlight consists of a title, text, a button, and a photograph. 

The title of the spotlight should not exceed two lines when published.

Use this spotlight to allow users to watch a video related to your content. 

The video will automatically play natively on your website in an overlay on the page.

All videos in video spotlights need to be uploaded to YouTube or Vimeo and have a unique URL.

A video spotlight consists of a video URL, text, and a button.

Slideshow spotlights are a way to showcase related information on multiple slides within one spotlight block.

Each slide should have a unique title, unique photograph, supporting text and a button. Each unique title should not exceed two lines when published.

Slides should appear in multiples of three.

Slideshows can include photo slides or video slides. You cannot create a slideshow with both. 

The quick links spotlight draws attention to multiple subpages on a website within one block. 

The links must include a short description.

The spotlight must include at least three links.

An accordion menu spotlight can showcase multiple related items with photographs and more text than a traditional basic or slideshow spotlight.

An accordion menu must have at least three pull-down fields.

Each pull-down field must include a title, 2-4 lines of paragraph text, and a link. 

Each field can include a photograph. However, if one field includes a photograph, they all must have a photograph.