MedNet

Website Guidelines

Learn about the Faculty's recommended guideline​s and standards for websites. 

The web is the primary mode by which the external community accesses information about the Faculty of Medicine. As a result, it is important that a site is well organized, easy to use, and useful.

This page outlines widely accepted standards for website design and usability. These standards have been derived from “best practices” outlined by several major web design/development experts.

We encourage all websites in the Faculty to adhere to these standards to the best of their ability.  Many of these standards are automatically handled by using the UBC CLF. For support with any of these topics, email Digital Communications.

Audience

Websites are intended for external or public-facing audiences. The audience of your site should be your primary concern with every decision you make about the site. Ultimately, the choices you make with your site—be it content or design—should take into account both your intended and current audience.

New Site

Thinking about the intended audience will influence choices about content, navigation, and layout. Some questions you can ask to help narrow the focus of your site include:

  • What is the average age of the intended audience? What level of education? What level of technological familiarity?
  • What are the desired outcomes from someone visiting the site?
  • What level of knowledge is expected from your audience?

Existing Site

If your site already exists and you have data about your site usage (see metrics​ below for more information), you will already have some knowledge about the existing audience. This type of information is valuable for developing new content and initiatives related to your site. These metrics may include:

  • What technologies people use to access the site (browsers, operating systems, etc.)
  • Methods by which people find the site (searching, social media, direct access, etc.)
  • Frequently visited pages on the site
  • Navigation flow (i.e., how users traverse your site from page to page using links on the pages)

Content Quality 

A site’s content is paramount — the most visually compelling site in the world is not helpful if it doesn’t contain the information that people need or expect to discover on that site, laid out in a way that’s easy to find and read.

Copy

  • Content should be concise and written with a web audience in mind (bullet points, short paragraphs, links to definitions and references)
  • Internal jargon or acronyms are either not used or are clearly defined / explained
  • All copy should be spell-checked and use proper grammar

Font

  • ​It is recommended that you use the default font (including colour) provided by the UBC Common Look and Feel (CLF), which is Arial (regular and bold).
  • Font should be used consistently across a site.
  • Limit a site to two web-friendly fonts: one serif and one sans-serif. No more than three different fonts should be used.
  • Regular content text should be 14px with a line-height of 20px. This is handled by default when using the CLF.
  • Whenever possible, font should be applied via CSS so that can easily be changed in the future.
  • Bold and italics should be used sparingly. Proper HTML tags (<strong> and <em>) should be used within body text for bold and italic text, respectively.

Photos, Logos, Graphics (link to web image basics)

  • Images should be relevant to the content of the page on which they are placed.
  • Use standard file types for images, logos, and graphics: jpg/jpeg, gif, and png are all acceptable formats.
  • Images should be properly sized and edited before they are uploaded to the site. 
    • ​​WordPress (the Faculty's recommended CMS) can help crop and resize your images.
    • ​​Crop and resize images as much as possible before uploading them to the site to increase site-loading performance.
    • Images should be of a large enough size and resolution that they do not appear pixelated or blurry.
    • Images should be well lit and (if necessary) colour-corrected and edited.
  • Images should include an “alt” tag in their HTML markup that describes the image. Alt tags will be used when the image cannot be displayed (for example, on screen readers or other devices for people with vision impairments)
  • The CLF includes a comprehensive set of icons.

Files

  • Content from PDFs and Word documents are not searchable. 
  • Ideally, content from PDFs and documents should also exist on the site.
  • To increase the searchablity of your content, file attachments should be used sparingly.
  • All downloadable file attachments (PDFs, Word documents, etc.) should be accompanied by relevant descriptions explaining the purpose of the file.
  • Wherever possible, file attachments should not be treated as downloadable versions of site content or as a replacement for content itself.

Information Design

The site’s information design and information architecture (IA) should be mapped out well in advance of actual site development, and ideally should be augmented by good usability practice (see below for more on usability testing).

  • Standard page elements should exist on every page (e.g., complete header information, link to home page, navigation to major site sections). The UBC CLF supports this.
  • Pages should be laid out in a consistent and sensible manner across the site. The CMS and CLF accomplish this by providing selectable templates for the layout of pages. 
  • Limited scrolling should be required (a good rule of thumb: a page should be no more than three screen lengths long). Page layout should encourage important content appearing “above the fold” (i.e. visible without scrolling down).
  • Balance usage of copy and images.
  • Adequate white space around content for easier readability
  • Links to external sites should open in a new browser window
  • Target of each link is clearly identified.
  • Copy and page design optimized for search engines; in general, this means proper semantic usage of HTML tags. Some examples: A <title> tag and a “description” metatag should be included in the HTML header (the code hidden at the top of an HTML document, inside the <head> tag). In the CLF, these values can be set in the theme options (Appearance >> Theme Options >> SEO).

Navigation should be easy to find and understand. Navigation is important in allowing users to traverse your site and also plays a large part in how easily search engines such as Google can find specific pages on your site.

  • No more than seven top-level navigation links. Conduct a content inventory to develop your navigation structure. When using the CMS service, a default menu structure is provided for you, and you can edit it to fit the individual needs of your site.
  • Navigation link text should be as short as possible; limit to no more than a few words (2 words maximum is recommended).
  • There should be no more than four levels of navigation in the menu structure. If your navigation has more than four levels, it may be worth re-examining and reorganizing your content into a shallower structure.
  • Your standard page header should always contain a link to your home page (often, the logo or name of your organization in the header will be the home page link)
  • Top-level navigation should be available from all pages. The CLF provides this by default.
  • Contextual links (“breadcrumbs”) used to locate where user is in the site and increase search engine optimization
  • Links, both in your navigation menus and in content, should all work.
  • Links should be checked on a regular basis to ensure they still work properly.

Visual Design & Branding

The visual design of the site should match the intended audience and should follow the Faculty’s visual identity guidelines.

  • UBC websites must use the UBC CLF and a UBC subdomain​. The CLF incorporates the visual guidelines outlined here.
  • The Faculty's name and the unit and/or program name and purpose should be clearly identified.
  • Both the UBC and Faculty of Medicine brand and logo should be applied consistently on all pages. Logos and templates can be found on MedNet 

Colours

  • Colour palette should reflect the branding of the Faculty and the UBC CLF. The Faculty of Medicine uses UBC Blue (Hex #002145) as its primary colour, with UBC Grey [web use variant] (Hex #2F5D7C) as its secondary colour. More information about the colors can be found on the CLF site.
  • Font colours should be simple: black font when on a light or white background, and white when on a dark background.
  • The colour palette should be consistent across every element of the site, including links, fonts and navigation menus.
  • Colours must provide sufficient contrast between text and background. This tool can help you test foreground and background colours against the Web Content Accessibility Guidelines (WCAG).
  • For accessibility reasons, information conveyed by colour should also be indicated in a colour-neutral way (e.g., if links are displayed in a different colour, they should also be underlined to indicate their purpose in a colour-independent manner).

Technology

Pages should meet World Wide Web Consortium (W3C) code standards for HTML5 and CSS. The CLF​ is designed with these standards in mind and factors the points below into its structure.

  • Avoid using frames/framesets; they are now deprecated in HTML5.
  • The use of Flash is discouraged due to its incompatibility with a number of mobile technologies. If used, it should be sparingly and as augmentation for a site, not as a replacement for page content.
  • CSS (Cascading Style Sheets) should be used; the use of inline styles on HTML elements is discouraged.
    • If possible, place all custom CSS in an external file or (if using the CMS) in the provided “Custom CSS” areas.
  • A print-friendly version of the page view should be provided (either the page itself is print-friendly or an alternate print view is provided; this can be done by using a separate CSS styelsheet for print or other CSS media types; see here for a more in-depth explanation of the CSS @media rule)
  • Database-driven sites, such as those running on Wordpress, should use human-readable URLs (e.g., www.somesite.med.ubc.ca/urlThatMakesSense rather than www.somesite.med.ubc.ca/?page=123). Details on enabling this in Wordpress can be found here.
  • Pages should load in a reasonable amount of time. Ideally, page load should be less than two seconds. See Google Webmaster Tools for advice on speeding up your site.

Usability

A site should be easy to use from an end-user perspective. Whenever possible, usability practices should be incorporated throughout the entire design / redesign process, from before the project starts to the time it launches and beyond. Each section of the website guidelines  are provided with usability and accessibility in mind. However, user testing is still a vital component in making sure your site navigation, content and layout are usable.

How to:

  • Simple surveys (“What do you think of this site?”)
  • Focus groups
  • User feedback sessions
  • Advanced user experience testing methods (think-aloud protocol or eye tracking) can also be useful. See this article for a breakdown of these methods.

A site should also be tested on all relevant browsers. Metrics (see section below​) allow you to understand which browsers are most frequently used to access your site; however, all common browsers on both Mac and PC (Internet Explorer, Chrome, Firefox, Safari) should be taken into account. User testing on multiple browsers can help catch browser-specific errors and quirks.

Metrics

There are many web analytics services in existence; we recommend using Google Analytics

Benefits:

  • Understanding your audience
  • Narrowing the focus of your content
  • Supporting different web technologies (e.g., if the majority of your site’s visitors are using a specific web browser, you should make sure to test thoroughly with that web browser).
  • Determining which pages are getting viewed most
  • How long visitors are staying
  • What IP visitors are using to access pages
  • How visitors have found your site
  • Where visitors enter and exit your site, etc.

How to:

The CMS Support Manual has an introduction for setting up Google Analytics for your site. If you need assistance, email Digital Communications​.

Understanding Basic Google Analytics

Once the analytics code is set up and working, when you sign in to Google Analytics, click the name of your site to enter the Analytics dashboard. The left sidebar contains a number of options for viewing your reports, such as Audience, Traffic Sources, and Content.

  • Audience: This section gives reports on the users that are visiting your site. It breaks down the traffic on your site by language, country/territory of origin, city of origin, browser and operating system, etc.
  • Traffic Sources: This section breaks down the traffic by web origin (whether the user typed the URL directly or found it via a search engine, for example), search query (if the traffic came from a search engine), etc.
  • Content: This section segments the traffic by which pages were visited. You can create reports to show traffic on individual pages, average time on page, etc.
  • Dashboards: You can use dashboards to construct a custom view of relevant metrics to your site. Use the “add widget” button in the top menu on the dashboard page to add a metric and how it should be displayed.

Analytics is a very detailed, in-depth web application. Google does offer walkthroughs and FAQs at http://support.google.com/analytics. If you have any questions about specific usage, please email Digital Communications.