Website Design and Content

You may be responsible for creating and maintaining websites, web pages, or other web content as part of your job duties. Use this page as your guide for finding training resources and creating effective web content.


Resources

If you’re not a website author, editor or admin for CTSI programs and services, but you have an idea for content you’d like to post to an existing website, read through the below tip sheet and contact CTSI Communications. We can help get your information posted if it meets criteria.

Do you already manage content on a CTSI-affiliated site? You have access to the expert team at UF Health Web Services, in addition to your initial point of contact at CTSI Communications.

  • If you’re not sure how to get started with WordPress, have never used the UF Health template, or could use a refresher, Web Services offers training here.
  • The team also provides training on how to use the Gravity suite of tools, including forms for collecting non-sensitive information online, and workflow and reporting tools.
  • For troubleshooting and support requests, contact Web Services here.
  • Do you want to make sure your site serving your users in optimal fashion? Can’t decide whether to change things up or leave your site as is? Consider having web services review your site for usability and accessibility to improve the experience of your web users. You may schedule a consultation here.

When (and when not) to add a new page to your site, or launch a new site entirely

Are you thinking of adding content to the website, or launching a new site entirely for your program or service? The web seems like a good place to put information that needs to go somewhere.

Remember there is a cost associated with maintaining content on a website. Even if you have a description or photos that are already created and ready to post, the cost is associated with the time spent keeping that information updated online.

Your content might fit within the existing structure of the CTSI website, and the CTSI Communications team can maintain this content for you. Schedule a consultation with us, and we can help you draft a web strategy.

Don’t use your website to archive content. Instead, think of each piece of content on your website as a contribution to your overall goals.

Before you post on the website you should ask yourself the following questions:

  • Does this information exist somewhere else already?
  • Can it be added to an existing page?
  • Will the information become outdated?
  • Who will maintain this content?

If the content you have in mind is in the form of a PDF, Word document or media file that you’d like to upload to a page, this rule still holds, and you face the additional conundrum of how to update a file that’s not editable a few months down the road when you’d like to replace due dates and change contact information, for example.

Ready to add content?

Follow the same rules for drafting content as you would with a flyer or email blast: Highlight the value proposition and benefits to the user.

Here are some questions you should answer before creating content:

  • Who is your audience?
  • What problem does your program/service solve?
  • How would your target audience benefit from your program or service?
  • What action do you want your target audience to take and why would they want to take it?

Examples

Recruitment Center

Here’s what the page does well:

  • The very first line of the page describes the problem the recruitment center can solve.
  • A brief, succinct paragraph summarizes the center and calls attention to the target audience (UF research teams).
  • An overview of services in an easy to understand bulleted list.
  • Clear calls to action of where users can take the next step.

Clinical Research Center

Here’s what the page does well:

  • A header image adds a visual element to the webpage.
  • The phrase “Do you need facilities and equipment to conduct your research?” allows the user to understand the problem the center can solve.
  • Only a few sentences are needed to summarize the center and features.
  • Calls to action allow the user to explore more about the center.
  • Circular images are used throughout the page.
  • Contact and leadership are easy to find, as well as benefits and features.

Helpful guidelines, codes and templates

The website uses the UF Health template. Within this template, a few design elements identify and brand the CTSI website.

Content structure

Follow this content structure when creating a webpage:

  • Header image
  • Value proposition
  • Summary of service/offering
  • Any pages or content you want to link to through buttons (as seen at the top of this page)
  • When writing content use correct heading structure
    • Heading options can be found in the page editor (screenshot below)
    • H2 should be used for important headlines (such as anchored text as seen on this page)
    • From there, you prioritize the headlines from H3-H6
Heading 2

Photos

  • To add a consistent look and feel for photos, follow instructions here.
  • This includes making photos circular and including header photos where appropriate.

Call to action buttons

  • Do you want the user to take a specific action? Call to action buttons highlight this request. Keep this text to a few words, max, and use a verb highlighting the action you want the user to take, ie “Read about the CRC”, “Apply to the program.”

Anchor links

  • If you click one of the orange buttons at the top of this page, you will notice that it does not lead to another page, but rather to a different part of the page.
  • To create an anchor link, you will replace the button link (or text link) with an identifier for that content. For example, on this page, I have an anchor link for #examples that links to the “Examples” section of this page.
  • It looks like this:
Example of an anchor link in a button
  • Once that is complete, then you need to tell that link where to jump to.
  • Click on the heading you want to anchor to, then open the ‘Advanced’ drop-down menu in the block editing menu on the right.
  • Type your chosen keyword within the ‘HTML Anchor’ entry form.

Organizing content

  • Using columns is a great way to organize content which can be found using the column block within Apollo 2 :

Bios

  • When naming a physician, team member or researcher, link their name to their official bio.
  • In addition, their college and department should also be available.

Links

  • To create a hyperlink, just highlight the text that you want to turn into a link and click on the link icon in the page editor menu.
Page editing menu
  • PDFs can be embedded by uploading the file to the media library and then copying and pasting the media file link as a hyperlink.

Before you launch

There are few things to keep in mind before you publish your page.

  • Test the website using mobile dimensions
    • The easiest way to do this is through the FireFox browser
    • Click on the Menu > Developer > Responsive Design Mode
    • While it is hard to make your page look perfect on mobile, make sure that all of your important information is easy to read and access by your users
  • Test in multiple browsers
    • Most common include Internet Explorer, FireFox, Chrome and, if you have access to a Mac, Safari
  • Make sure there are no blurry images
  • Make sure all of your external links and documents open in a new tab
  • Make sure all of your links work

Website accessibility

At the federal level, all UF websites must comply with Section 508. What does this mean for your website? It means your web pages and websites need to follow specific guidelines outlined by UF here. Don’t worry, you have resources to help make sure your website meets the standards. UF Health Web Services provides a guide to accessibility, including policy, best practices, template information and resources.