WEB STANDARDS

Official university web properties such as websites, microsites and landing pages (including those of colleges, departments, centers and institutes) represent the university and are intended only for official business functions of the institution.

FOUNDATIONAL REQUIREMENTS  
 
WEB COLORS AND FONTS
 
WEBSITE TEMPLATES
 
SETTING UP A UF-BRANDED WEBSITE
 
ANALYTICS AND TRACKING
 
POLICIES AND STANDARDS

Foundational Requirements

To ensure brand alignment across the institution’s web properties, all properties are subject to the University of Florida’s standards. It is strongly advised that users familiarize themselves with the Acceptable Use Policy and the institution’s Digital Standards. Official University of Florida themes, templates or graphics should not be modified.

Register Your Domain

Registration is required for websites using the ufl.edu subdomain. Once registered, the University’s web administrator will include the site on the University of Florida Website Listing.

Accessibility

To provide end users a welcoming and accessible web experience, the University of Florida adopts the World Wide Web Consortium’s standard: Web Content Accessibility Guidelines (WCAG) Version 2.1, AA conformance level as the minimum accessibility standard for all Electronic Information Technology (EIT). All websites used to conduct official University business must comply with the Electronic Information Technology Accessibility Policy.

Digital Logo Standards

The official University of Florida logo is available to download as a file optimized for image displays. If you opt to use your unit lock-up or another unique brand identifier as a profile image, please review the logo usage guidelines and note that you may not alter the logo in any way.

PNG is the standard format for transparent images. These produce smaller files with crisper edges. If you are creating your own PNG files, they are best exported directly from the EPS or AI files. 

 

Headers and Footers

Header Examples:

All headers should identify the unit and its affiliation with the University. It’s recommended that the university identifier be the university monogram


website header example

 

 

 

Footer Examples:

All footers should include the university’s horizontal logo. The logo can either be placed flush left or right of the footer, per the preference of the unit. The primary logo in all instances should always be linked to the University of Florida home page at www.ufl.edu.

website footer example


Favicon

All Florida web properties should also use one of the following Favicon options. 

Favicons can be obtained from the Logos section on the Downloads page

BEST PRACTICES AND CONSIDERATIONS

Responsive Design
Mobile accounts for approximately half of the web traffic globally. Due to users increasingly accessing websites via mobile and tablet devices, all websites must be responsive. Failure to make websites responsive can result in negative user experience and even search engine ranking penalties.

Navigation
Website menus or navigation need to clearly define the resources available on a website. An excessive amount of navigation items should be avoided by leveraging proper categorization and sub-navigation items if needed.

Clear Call-to-Actions
Websites should make it easy for end users to find resources. This can be accomplished by adding visible call-to-actions within pages that prompt users to visit a resource.

Web Colors and Fonts

Web Colors

The University of Florida’s web colors and accessibility guidelines: 

University of Florida Web Colors 

(meets WCAG 2.1 AA guidelines for contrast against #FFFFFF white)

Color RGB HEX
Orange 250,70,22 #FA4616
Blue 0, 33, 165 #0021A5

 

Visit the our colors page in the Design Center to learn more about the university’s brand colors. 

Web Fonts

Web safe fonts that can be used as close replacements to the official university typography are:

  • Franklin Gothic (replacement for Gentona)
  • Georgia (replacement for Newsreader) 

 

 

Website Templates

Current Templates

For the current Terminalfour templates, please contact UF Web Services to request the template files and coordinate next steps.

Refreshed templates for Terminalfour and WordPress will be available Spring 2022. For updates, please visit the .edu redesign web page. Refreshed HTML, CSS and JavaScript files will also be made available Spring 2022  to those who do not utilize a CMS for their websites. 

 

Making Your Content and Templates Work Together

The official 2022 Florida web templates will provide visual consistency, user experience, mobile responsiveness, optimization and standardized accessible layouts. These templates will be modular and flexible, which will provide ample options to deliver different types of content. However, in order to deliver clear messaging, you need to develop a content strategy that can help you select the appropriate modules within a template. 

How to Develop a Content Strategy

  1. Streamline your content. Conduct content audits to remove content with outdated information and update content where needed. 
  2. Review your website analytics and leverage tools such as Siteimprove to identify factors such as content popularity, broken links and user flow. Following a data-driven process will identify content that needs to be removed, refreshed or repurposed to better serve the needs of your website visitors. 
  3. Use branding tools to create supporting graphics or media to accompany your written content. 
  4. When creating new content, conduct keyword research via tools such as Google Ads Keyword Planner, SEMRush or Moz Keyword Explorer to understand keyword search volumes and competition. 
  5. Keep clear call-to-actions in mind. Think about what you want your visitors to do. Your web pages are a roadmap to information. 
  6. Streamline your site’s content. Keep materials that are crucial and remove the bloat. 
  7. This process takes time. Remind your administrators that optimizing content is as essential to your goals online as installing a new template. 

The Office of Strategic Communications and Marketing strongly urges any colleges, departments and units with active web development projects to plan ahead by working on content audits, navigation audits and supporting graphics first. Following this process will ensure that you get the most out of the new templates and your streamlined content.

UF Shibboleth Templates

If you require identity authentication on your website, please contact UFIT for more information. 

Setting up a UF-Branded Website

Domains

Domains 

If your website needs a new domain, you can request a domain name by visiting the UFIT website

 

New Websites

Whenever you start a new website build, there are a few processes that need to take place: 

Strategy
Establishing a proper strategy for your website will set you on the right path toward having effective navigation, content, call-to-actions and a maintenance plan. Some strategy steps you can follow to get started are: 

  1. Benchmarking/research
  2. Setting website goals
  3. Creating a sitemap
  4. Creating a content strategy/content outline 
  5. Creating wireframes (desktop and mobile) 
    1. Functionality: When wireframing modules for a specific type of functionality (e.g. events calendar, the population of content via feeds, etc), think about how the information for that functionality will be sourced, update frequency and the technical maintenance required. 
    2. If you are not using one of the templates and want to implement a functionality that requires a third-party plugin, application or software, make sure it has passed risk assessment.
  6. Make sure you establish early on what your website’s domain will be. Once you are ready, make a registration request. Once approved, your website will be included in the University of Florida Website Listing.

Design
Once you have an established strategy for your website, you can begin thinking about aesthetics. If you are using a University of Florida web template, you will not have to worry about selecting a website color palette, header or footer style. However, this step will lay out visuals for the type of photography and content types/widgets within the templates you will use. Some things to consider as you are designing:

  1. Photography and video 
    1. Make sure photos are high quality
    2. If your website will be image-heavy, have a plan for compressing images. If you plan on having videos, then opt for embedding them from your YouTube or Vimeo profiles. An excess of large media files can compromise your website’s speed, which can impact user experience and search rankings.
    3. Think about how you will manage the photo and video content. Make sure you have an ongoing strategy to refresh photos and video on pages that are not evergreen.  
  2. Think about mobile devices.
    1. If you are not using the templates, this will be important. Make sure you always have a plan for what your website will look like on mobile. 

Copywriting
Follow your content outline to begin writing your content. Before you write, take the following steps into consideration:

  1. When creating content, implement your keyword research from tools such as Google Ads Keyword Planner, SEMRush, or Moz Keyword Explorer. 
  2. Use heading hierarchies (H1, H2, H3). The most important keywords should be in the H1. 
  3. Do not stuff your content with keywords. Only use the keywords where they make sense. If a keyword reads awkwardly in a sentence, it is okay to use a variation. At the end of the day, search engines prioritize content using natural language algorithms. Make your content sound as natural as possible. 
  4. When creating content, think about what you want your visitors to do. Your web pages are a roadmap to information. Keep clear call-to-actions in mind as a way to guide visitors through your website.  

Development and Quality Assurance
If the templates are used, development should be minimal. Once the staging site is set up: 

  1. Create all the pages outlined in the sitemap and add your content. 
  2. Add images. Always add alt text to your images. It helps with accessibility and search engine optimization. 
  3. Once all your pages and content are set up, it is time to conduct quality assurance. Some crucial steps to take during quality assurance are: 
    1. Check for spelling and grammatical errors.
    2. Check for information accuracy. 
    3. Check that you are following Florida’s brand guidelines. This includes use of colors, fonts and logos in the header, footer and favicon. 
    4. Make sure the University logo links to the homepage and that your logo in the header links to your website’s homepage. 
    5. If SEO is a priority, make sure all your pages are optimized with keywords and that you have optimized page titles and meta descriptions. 
    6. If you are linking to any other websites or web pages, make sure the links work. If you are linking to an external site, it is best practice to open that link in a new tab to not drive traffic away from your website, 
    7. If you have forms on your website, test that the forms work on the visitor’s end and that the recipient of form notifications is receiving the forms. 
    8. Test that any other functionality on the site is working as intended. (E.g. event calendar information is populating correctly, etc.) 
    9. Make sure images and videos are rendering correctly on desktop and mobile. It is also best practice to test in at least two browsers. 
    10. Test for accessibility. Tools such as Siteimprove can help identify accessibility issues. 
    11. Make sure your Google Analytics and tracking pixels are set up and capturing data.  
    12. Conduct a site speed test. Using tools such as PageSpeed Insights will identify how fast your site loads on desktop and mobile and flag items that need to be addressed to improve site speed. 

Go-Live
Once your website has passed quality assurance, it is time to go live and link the site to your approved domain. During this process:

  1. Ensure your website has an SSL certificate. This is important if you are collecting user data, but it also helps keep your website secure, maintain general credibility, and it helps prevent negative SEO impact. 
  2. Take care of redirects. If you are linking to other pages on your website that are using staging/test links, those links will either not work or link to the staging site. Make sure that the links that are on your live site link to URLs that are on your live domain. 
  3. Generate an XML sitemap and submit it to Google Search Console. Also, make sure that your website is set up to be indexed. 
  4. Conduct a post-live quality assurance check. While conducting quality assurance before site launch should have you covered, it is best practice to verify that transitioning to a live environment did not impact the website. 

Website Redesign: Migration Strategy

If you are redesigning your website, the new website steps still apply. If you are doing a complete overhaul of your website, it is important to establish a migration strategy during the strategy phase to mitigate the negative SEO impact. Resources to get you started on migration strategies are below:

Analytics and Tracking

The ability to see user behavior on a website is imperative to understanding the performance of the site so optimization and content/design improvement decisions can be made. Foundational tracking tools that should be set up on a website:

  • Google Analytics
  • Siteimprove – in addition to user behavior, this tool is primarily helpful to check a website’s accessibility status

If the website is being used for digital marketing purposes (e.g. paid social media advertising, display advertising), it is a common practice to use pixels associated with that platform. If a pixel is set up for a website, it is best practice to double check that the pixel is firing and collecting the desired data.

Types Social Media of Pixels:

If multiple pixels need to be set up on a website, it is best practice to leverage Google Tag Manager so all pixels and tags are properly organized.

Policies and Standards

Policies and Standards