The University’s website content management systems have a number of features used to display various types of content and information across all websites.
This guide outlines how best to use these features to make your content easier to read and to understand, as well as giving it broader reach and appeal across the web.
All University websites must follow official policies described by University Policies. Relevant policies include but are not limited to:
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:
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.
Different media types serve different purposes on the University of Louisiana at Lafayette websites.
Before uploading media to the website, determine if it is best to leave it as a media file or if it should be replaced with native web content, such as text on a page or a webform.
In all cases, the media file name (before uploading to the website) should be descriptive without including special characters.
If you're looking to update the photos or videos on your site, please fill out this Project Request Form 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.
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:
Webforms must be created under the supervision of the web content strategist or web trainer.
If you need to collect sensitive information, use Microsoft Forms 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.
Spotlights act as call-out boxes on various pages of our websites. They can be configured to appear in the right- or left-hand column on one or multiple pages of a website.
Spotlights are intended to showcase different elements of your website and to guide your users toward these elements. They’re also used to supplement the body text of a page.
The length of the entire right- and left-hand columns should not exceed the length of the page content in the center column.
Spotlight requirements:
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.