Skip to main content

UF/IFAS COMMUNICATIONS

UF/IFAS COMMUNICATIONS

Graphics and Identity

The UF/IFAS Web Template

It is strongly recommended and preferred that UF/IFAS websites use the current UF/IFAS web template. The UF/IFAS template already meets web policy and accessibility standards and visually conveys affiliation with UF and IFAS. The template for UF/IFAS websites is available through the TERMINALFOUR (T4) Web Content Management System (WCMS) after gaining access. An overview of the UF/IFAS template can be found here. The template will dictate other parameters to promote consistency across our web presence. All UF/IFAS T4 templates are mobile-friendly. You can use 30 pre-loaded content pieces to build your website. Before customizing these pre-loaded content pieces be sure to review the AA accessibility standards information.

UF/IFAS Web Services - mandatory website pieces- example

Header - Mandatory and persistent

UF/IFAS websites are required to include the following:

  • Header Background color - Hex#0021a5.
  • Name of the unit under the UF/IFAS logo. As an example, see The University of Florida's Department of Agricultural and Biological Engineering Unit page at https://abe.ufl.edu/. Units may substitute a unit name with a unit's graphic identity.
  • UF/IFAS logo on the left. UF/IFAS branding clearly visible in the upper left-hand area of your web page. The UF/IFAS logo should link to http://ifas.ufl.edu. (Remember that the UF/IFAS logo always needs to be surrounded on all sides by clear space that is no less than one-half the height of the “UF” monogram.) 
  • Header requirements are different for UF/IFAS Extension websites and are located in the  UF/IFAS Branding Guidelines -Web.

Footer - Mandatory and persistent

UF/IFAS websites are required to include the following:

  • Footer Background color - Hex#0021a5.
  • A way to contact persons responsible for web updates. This should be included in the footer
  • Date of last revision. This is required on the homepage but recommended for all pages.
  • An active logo or text link to the UF homepage. Please add it to the footer.
  • An active logo or text link to the UF/IFAS homepage. 
  • Other footer requirements are located in the UF/IFAS Branding Guidelines -Web. These pages include a list and explanation of required privacy and other policy links as well as placement of other graphic identity elements in the footer.

Coding and Identity

UF/IFAS Favicon

The UF/IFAS favicon is mandatory for all UF/IFAS websites and is available at https://tinyurl.com/ifasfavicon.

Other coding requirements are located in the UF/IFAS Branding Guidelines -Web. These pages include an explanation of the required meta code to improve the findability and searchability of all UF/IFAS websites.

The UF/IFAS favicon is mandatory for all UF/IFAS websites and is available at https://tinyurl.com/ifasfavicon

Mandatory Colors and Use

As of July 2022, the current UF/IFAS Web Color list guide is below. Go here to review what we swapped, replaced, or retired.

Web Colors (Meet WCAG 2.0 AA guidelines)

ColorRGBHEXWCAG  Recommended Use
Blue
(UF)
0, 33, 165 #0021A5 Yes, on white or the reverse. IFAS header and footer color.
Orange
(Screen)
250, 70, 22 #FA4616 No, do not use it unless the text is large. Acceptable on borders, or other graphical elements when on white or the reverse.
Gray (Body copy) 52, 55, 65 #343741 Yes, on white or the reverse.

*Color Notes: Large text is defined as 14 point (typically 18.66px, or 1.2em) and bold or larger, or 18 point (typically 24px, or 1.5em) or larger.

Colors to Promote Unit Individualization

Web Colors (Meet WCAG 2.0 AA guidelines)

ColorRGBHEXRecommended Use For
Purple 106, 42, 96 #6A2A60 Yes, on white or the reverse.
Green
(BRIGHT)
34, 136, 76 #22884C No, do not use it unless the text is *large. Acceptable on borders, or other graphical on white or the reverse.
Blue
(DARK)
0, 38, 87 #002657 Yes, on white or the reverse. No, not for footers.
Yellow (Alachua) 242, 169, 0 #CD8C00 No, do not use unless the text is *large and on Gray (#343741) or its reverse. Use on borders, or other graphical elements when on white or the reverse.
White 255, 255, 255 #FFFFFF Yes, on-page background color and other dark palette colors. 
Warm Gray 1 216, 212, 215 #D8D4D7 Yes, on Gray (#343741) or the reverse or other dark palette colors. For table rows/cells/site title and page backgrounds.
Gray 199, 201, 200 #C7C9C8 Yes, on Gray (#343741) or the reverse or other dark palette colors. For table rows/cells/site title and page backgrounds.

Other Colors

Some UF/IFAS initiatives have preexisting style guides. Generally, the UF/IFAS color guide should supersede preexisting style guides. Preexisting style guides should select the closest colors in the above UF/IFAS color palettes. For questions about integrating your style guide with UF/IFAS colors, contact webteam@ifas.ufl.edu.

Colors On Graphics

It is recommended that communication pieces on the web only feature our orange and blue colors and use other colors as accents. All Graphics must meet accessibility requirements.

Web Fonts

Adding Official Branding Typefaces to images: See the Fonts section to obtain or apply for licenses (https://brandcenter.ufl.edu/typography/).

UF/IFAS WEB TEMPLATE STYLES

Most UF/IFAS styles are part of the UF/IFAS Template. This page will show the styles and demonstrate the appropriate hierarchy.

How To Use This Page: Review and use the code examples, but do not copy and paste them directly from this page.


HEADINGS

Gentona Medium is used for page headers.

Heading 1

TYPECODEUSE
HEADING 1 <h1></h1> Use to start major sections on our web page. 

Heading 2

TYPECODEUSE
HEADING 2 <h2></h2> Should precede a Heading 1. Since the site title is Heading 1,
Heading 2 can be used as the first heading on a web page.

Heading 3

TYPECODEUSE
HEADING 3 <h3></h3> Should precede a Heading 3

Heading 4

TYPECODEUSE
HEADING 4 <h4></h4> Should precede a Heading 4
Heading 5
TYPECODEUSE
HEADING 5 <h5></h5> Should precede a Heading 5
Heading 6
TYPECODEUSE
HEADING 6 <h6></h6> Should precede a Heading 6

 

BODY TEXT

Gentona Light is used for body copy.

TYPECODEUSE
BODY COPY OR BODY TEXT <p></p> You can bold, emphasize, or underline the body copy.

 

LIST STYLES

There are three list styles. You can use special CSS classes on list tags to change the look of bulleted lists (linked and unlinked).

  1. Numbered list. Numbered list linked.
TYPECODEUSE
UNORDERED LIST <ul><li></li></ul>

Regular circular bulleted list.

ORDERED LIST <ol><li></li></ol>  Numbered list.
UNORDERED LIST WITH BLUE SQUARES <ul class="blue-arrow-list"><li></li></ul>  We know it says arrow list, but it will change the circular bullets to squares. To get the look, add class="blue-arrow-list" inside the opening <ul> tag. 

 

TABLES

There are two special CSS classes to use for viewing tables on mobile devices. 

Stack

Creates a vertically stacked table on cellphones from your horizontal desktop table.

TYPECODEUSE
STACK <table class="stack"></table> MANDATORY FOR ALL TABLES FOR MOBILE VIEWING. 

Scroll

For large data tables where stack is not applicable, use the scroll function. Then, users have the ability to scroll large tables when viewing on a cellphone.

TYPECODEUSE
SCROLL <div class="table-scroll"><table></table></div> MANDATORY FOR ALL LARGE TABLES FOR MOBILE VIEWING. 

Basic Table Layout

Here is a basic table and you can use any of the styles above inside tables: Headings, lists, paragraphs, and links. 

Column 1Column 2Column 3
Row 1 Some text Some text
Row 2 Some text Some text

OTHER SPECIAL CLASSES

Images

You can use special CSS classes on images, to float images left or right within a page. See how to float images.

Centering Text

You can use special CSS classes on some text and elements for centering.

TYPECODEUSE
CENTER <p class="text-center"></p>  Center text and buttons within blocks. Using this class is preferred over using the Center button on the T4 editor.

Blockquote

You can use special CSS classes on paragraphs to create blockquotes.

Here is a blockquote.
TYPECODEUSE
BLOCKQUOTE <blockquote></blockquote> Emphasize certain text.

Sidebars

There are three sidebar styles. For sidebars, we prefer that you use the following special CSS classes and add to blocks.

TYPECODEUSE
ADD A RIGHT-SIDEBAR <div class="gray-vertical-border"></div>

Adds a border for a right sidebar menu that contains large text.

ADD A RIGHT-SIDEBAR WITH SMALL TEXT <div class="gray-vertical-border" id="county-right-sidebar"></div> Adds a border for a right sidebar menu that contains small text.
ADD A LEFT-SIDEBAR <div class="gray-vertical-border2"></div> Adds a border for a left sidebar menu that contains large text.

Embeds

Social Feeds

It is preferable to use a Twitter embed, which is more stable across browsers. You can add Twitter embed code to any block.

Video

IFAS pages only track plays, pauses, and stops on video embeds. For videos, we prefer that you use one of two video content pieces you can automatically add to pages by clicking the green Create Content button. Then, you will NOT need to use the below embed code. The following special CSS classes will create a video embed that works on a mobile phone.

TYPECODEUSE
VIDEOS <div class="flex-video widescreen responsive-embed"><iframe src="https://www.youtube.com/embed/RDdbJxHYnKM" width="560" height="315"></iframe></div> Use content pieces to easily add videos to webpages. Or, embed this code in a block .

BUTTONS

The UF/IFAS Web Button Generator will help you make and use officially branded buttons. Go here to use the button generator -https://branding.ifas.ufl.edu/web-button-generator/.

AA Accessibility Standards

The WCAG AA Accessibility standards explain how to make web content more accessible to people with disabilities. WCAG defines web content as what you see (text, images, and sounds) and do not see (code or markup that defines the structure, presentation, etc.). All UF/IFAS websites, web applications, and blogs must comply with University standards and meet at least AA accessibility standards.

UF/IFAS White Web Template In TERMINALFOUR (T4)

Our latest web template meets accessibility and performance requirements. When a web moderator requests the UF/IFAS white template, the template is issued with the following *Google Lighthouse score:

*We recognize that the above scoring is only one benchmark used to measure accessibility and performance. We are making improvements behind the scenes, so the performance score is not comprised as more content pieces are added to a page. 

Resources

 

Third-party Web Builders

Information on UF/IFAS web policies and practices is found at https://ics.ifas.ufl.edu/our-services/web-services/ and may easily be found by searching for UF IFAS Web Services in any browser.

It is critical that any IFAS faculty or staff member interested in creating, editing or revamping their website first contact the web team at webteam@ifas.ufl.edu to discuss the project. Making this contact at the initial stages of the project will save time, money and frustration of all involved.

If you are considering contracting with an outside vendor to work on your website, please first contact the web team. We request that any outside vendor meet with the web team and possibly with other members of IFAS Communications to learn about web and branding standards before embarking on a project. There are preferred design templates and requirements that should be followed.

Third-party web builders should adhere to the web standards provided as UF/IFAS Web Branding guidelines and as stated on the following page sections: graphics and identity, colors, web fonts, styles, and aa accessibility standards.