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

 

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.”

Orange button

  • The orange button should be used as “parent buttons”.
  • These parent buttons are used on the top of webpages (like this one you are looking at now) as a way to direct the user to child pages or anchored content.
  • This is helpful to give users a central place where you have additional related content instead of having it linked within the text, which can make it hard to find.
  • The code for this button can be found below. You will paste this in the text editor, not the visual editor. Replace the bold text with your desired URL and the italicized text with what you want your button to say.
  • The target=”_blank” part of the button means it will open in a new tab which is best practice for external links and documents. If you are linking to an internal page, you can remove that section of the code.
  • A separate section will review how to make an anchor link.

<a href=”https://www.google.com/” target=”_blank” class=”apv1-button bordered orange”>Button text</a>

Blue button

  • The blue button should be used for actions such as “Download” or “Contact”.
  • This button can be used throughout text and page content.
  • The code for this button can be found below. You will paste this in the text editor, no the visual editor. Replace the bold text with your desired URL and the italicized text with what you want your button to say.
  • The target=”_blank” part of the button means it will open in a new tab which is best practice for external links and documents. If you are linking to an internal page, you can remove that section of the code.

<a href=”https://www.google.com/” target=”_blank” class=”apv1-button solid green”>Button text</a>

 

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: href=”#examples”
  • Once that is complete, then you need to tell that link where to jump to.
  • You will place the following code above the headline you want to link to.

<a id=”examples” name=”examples”></a>

  • You want to place this a line above because anchor links tend to jump a bit below the headline. You can see how I did that for this page in the screenshot below.

 

Organizing content

  • Using columns is a great way to organize content which can be found right in the WYSIWYG editor (screenshot below)

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

  • All external links (including media files such as PDF’s) should open in a new tab.
  • You can do that by clicking on the gear icon when adding a link (screenshot below) and checking the box to “Open link in a new tab”.

 

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.