Websites

The UBC Common Look and Feel (CLF) theme is a web design framework that supports the university’s brand identity and online reputation by providing a common look, feel and functionality to UBC websites. It includes a header, footer and background that appears on every page of the site.

If your site is to be hosted through CMS (WordPress) at UBC Faculty of Medicine, the CLF is provided by default.

All websites using the CLF are required to use a UBC subdomain.

Benefits

The UBC CLF initiative is administered by UBC Brand & Marketing team, and addresses some important goals regarding the overall quality and functionality of UBC websites:

• ensuring that HTML code meets appropriate standards
• allowing users to navigate easily from one UBC site to another
• providing some consistency in user interface elements across UBC sites
• providing easy access to standard website tools (e.g., Search and Directories)
• avoiding duplication of cost and effort in developing UBC websites
• ensuring that UBC websites consistently support the brand identity of the university.

The latest version of the UBC CLF was released in September 2012.

The updated CLF comes with a number of design and usability improvements aimed to improve the user experience. The biggest change is an integrated Responsive Web Design framework that adjusts or responds to a user’s device. This means that all websites with the CLF will be compatible across device platforms, ranging from desktop computers to tablets and smartphones – addressing a growing trend of mobile device usage.

Parts of the CLF

Visit the UBC CLF site for more information on the parts of the CLF.

Making changes

In general, it’s important to carefully consider the motivation for making changes to the style and structure of your site. Considering the users of your site – who they are, what they might need, and so on – should assist in planning any potential changes.

The CLF was designed to accommodate the widest group of users possible, accounting for technical compatibility (such as older browsers and operating systems), usability (structural and functional elements of the site), and web accessibility guidelines (see WCAG for more information). Making changes without taking these same concerns into account could result in a degraded experience for your users.

Additionally, the website guidelines on this page details current standards and best practices for websites. Should you choose to change any of the optional elements on your site, or if you are hiring an external developer to implement any changes, please refer to these documents for guidance.

There are various colour schemes that UBC has made available for websites. To maintain consistency across all Faculty of Medicine related websites, the Faculty requests that you use:

• Main Header: UBC Blue (#002145);
• Unit Header: UBC Secondary Blue (#0055B7 for websites) in the unit header

We also request that the words “Faculty of Medicine” appear in the unit header along with your unit name, in accordance with recommendations from UBC Communications & Marketing. (The Faculty’s template will be provided in this format.) A link to the Faculty of Medicine should also be included in the unit address in the footer; this can be set in the Theme Options for sites using the CMS service.

Any units wishing to deviate from either of these requests should contact the Office of Creative & Communications.

Send a request to the Office of Creative & Communications with “CLF template request” in the subject line, indicating that you want to begin the process of applying the CLF to your website.

For units whose websites are serviced by an external consultant, complete the request form.

Who is eligible for the UBC CLF?

See the Guidelines and Requirements listed on the UBC CLF website.

Who isn’t eligible for the UBC CLF?

See the Guidelines and Requirements listed on the UBC CLF website.

The UBC domain and Faculty of Medicine subdomains are ways to communicate the university’s and Faculty’s brand and reputation through its online web presence. To ensure the effective use of subdomains within the Faculty of Medicine, domain name requests are reviewed by the Communications team. For additional information, see the Requirements and Guidelines for UBC Subdomains on the UBC IT website.

Note: All websites that use the UBC subdomain are required to employ the UBC Common Look & Feel (CLF) template.

Domains

A domain is a human-friendly name for identifying and locating websites. Every domain name consists of a unique descriptive string of text followed by an extension.

[name][dot][com/ca/org/net, etc.]

Subdomains

A subdomain is a subordinate of a domain name. For example, “level3.ubc.ca”, is a third-level UBC subdomain such as med.ubc.ca, and “level4.level3.ubc.ca”, is a fourth-level UBC subdomain for example: alumni.med.ubc.ca, physicaltherapy.med.ubc.ca, pediatrics.med.ubc.ca.

We recommend that all units within the Faculty include med.ubc.ca as part of their subdomain.

• Websites that use a UBC Faculty of Medicine subdomain are automatically indexed with UBC’s Google Search Engine. Sites that do not use a UBC Faculty of Medicine subdomain will not be searchable from med.ubc.ca.
• The Faculty’s website averages approximately 20,000 users each month, driving traffic directly to your site.
• UBC Faculty of Medicine subdomains give assurances to your site visitors that your site is an official entity of the UBC Faculty of Medicine.
• Use of a UBC Faculty of Medicine subdomain creates cohesion among our websites, supports our visual identity, and allows your site to leverage the Faculty’s image and reputation.

To submit a request for a UBC Faculty of Medicine subdomain, please email the  Office of Creative & Communications. Requests submitted via the UBC IT website will be routed to us for review.

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)

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
• See more writing for the web tips

Font

• ​The default font provided by the UBC Common Look and Feel (CLF) is Arial (regular and bold).
• UBC’s institutional font, Whitney, is available to UBC departments for websites that use the UBC CLF and a .ubc.ca subdomain. To request the Whitney web font for your website, complete the UBC Fonts Request Form.
• Font should be used consistently across a site.
• 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

• 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)
• Design elements and styles in the CLF include:
  • Tables
  • Buttons
  • Icons

Files

• Content from PDFs and Word documents are not searchable.
• Ideally, content from PDFs and documents should 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.

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

• 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 a secondary UBC blue (Hex #0055B7) as its secondary colour. More information about UBC brand colours can be found on the UBC Brand 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. You can test foreground and background colours against the Web Content Accessibility Guidelines (WCAG) using the WebAIM contrast checker tool.
• 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).

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). Find details on structuring URLs in WordPress.
• Pages should load in a reasonable amount of time. Ideally, page load should be less than two seconds. See advice for speeding up your site from Google Webmaster Tools.

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.

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.

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 offers walkthroughs and FAQs at support.google.com/analytics. If you have any questions about specific usage, please email the  Office of Creative & Communications.

The WCAG 2.0 (Web Content Accessibility Guidelines) are the World Wide Web Consortium (W3C) recommended guidelines for web accessibility. There are three levels of compliance with the WCAG 2.0 – A, AA and AAA – and they each have a set of requirements that need to be fulfilled.

The UBC Common Look & Feel (CLF) default colours (brand identity header, brand identity footer, UI elements and components) are AAA compliant and continuous improvements are being made to ensure WCAG 2.0 AA compliance throughout.

My site is on the UBC CLF, does that mean my site is accessible?

Not quite. While the CLF is designed to meet web accessibility standards, accessibility is more than just design styles. It is still up to you to ensure that your content follows best practices. Tips to make your content accessible include:

• Use the UBC CLF default styles, including the default heading and paragraph styles for text.
• Use true text rather than text displayed in image files.
• Avoid all caps.
• Provide suitable alternative text (“alt text”) to describe the content and function of images.
• Ensure link text makes sense on its own. Avoid ambiguous link text such as “click here”.
• Format tables properly and do not use tables for structural elements.
• Do not rely on colour alone to convey information.

• Web Accessibility Principles (WebAIM)
• Web Accessibility for Designers (WebAIM)
• Better Web Browsing: Tips for Customizing Your Computer (W3C Web Accessibility Initiative)

Files

There is no way to make a file on the CMS system private or password protected, and sites should not host files that cannot be publicly available. If a file is uploaded to the CMS service, anyone with the URL of that file can download it without any authentication. In addition, any file uploaded to CMS may appear in search engine results.

Pages

Unlike files, individual pages can be password-protected on the CMS service. A password must be set for each page in order for that content to be made non-public. However, since a password can be easily shared from one person to another, sensitive content should not be hosted on the CMS service.

If a file or pages need to be private or available to a smaller audience, we recommend using a different service to host such files/content such as MS Teams.

All websites that collect personal information through forms or other means must include a standard privacy notification, as per requirements from the University Counsel Privacy Office. The privacy notification must include a contact email address.

Find more information including a privacy notification template on the University Counsel website.

Note: Do not store/collect any sensitive information with Gravity Forms — the online forms plugin available on UBC CMS. Sensitive information includes student numbers, CWL information, and private personal information.

In order to provide relevant, interesting content for your audience, some thought must be put into the organization and structure of your site. This can include:

• What links should exist on your top menu
• What content should be logically grouped together in sections of your site
• When to consolidate content onto a single page versus splitting it into multiple pages

These questions, and many more, are part of the field of Information Architecture (IA for short). Planning your site’s IA will help you understand how to best balance the needs of your site’s users with the goals of your organization.

Content inventory

The first component of understanding your site’s IA is to create a content inventory.

Existing sites

For existing sites looking to reorganize their site, this means putting together a list of all of the content that exists on your site. This may seem time-consuming at first, but getting a large-scale overview of what content exists on your site allows you to see both where certain subjects overlap or are duplicated and where there are gaps in the content of your site.

New sites

If you’re planning a new site, a content inventory is less straightforward. It should ideally include every piece of content that you want to use on your site. This will help you see how much existing content you can already leverage when building your site. It can also help determine how much content you will need to create prior to the site launching.

Content hierarchy

After you have inventoried your content, the next step is to determine a content hierarchy.

Navigation is developed considering:

• Best practices
• Website goals
• Content requirements
• Usability
• Accessibility
• Technology standards

You can start by categorizing your content into one of a few high-level “buckets”. Ideally, you want to limit these categories to as few as possible (we recommend no more than seven). For example, on the Faculty of Medicine web site, each top level menu item represents a category or “bucket”: “About”, “News”, “Education”, “Research”, and so on.

There are many ways to pick these categories, such as:

• Type of information
• Task
• People (audience group)
• Sequence or time
• Questions people ask

For example, you can choose to organize your content by the target audience, such as students or media personnel. Conversely, your content might naturally fall into categories based on different operational areas of your unit (Education vs. Research). It can be helpful to look at sites by other similar units to get inspiration; however, it’s important to pick consistent categories that will make sense for the users of your site.

Once you’ve grouped your content in this way, you should repeat the process for all of the content within each individual category. For example, if you have an “Education” category, you can further group your content into “Undergraduate”, “Graduate”, and “Postgraduate” sub-categories. If these sub-categories still have a large amount of content, you can repeat the process yet again and further break your content into groups.

The end goal of organizing your content in this way is to transform it from a flat list of content—your inventory—into a hierarchical structure, which will form the basis of your site navigation. This part of the process is not an exact science; there’s no hard rule about how your content should be organized. We recommend that categories should be specific enough that there are clear “pathways” of information on your site, but not specific enough that you end up with more than four levels of sub-categories.

Quick summary guide

• Complete a content inventory and review your analytics
• Organize content into a maximum of 7 buckets (top level navigation/menu)
• Menu titles should be short (1-2 words)
• The highest traffic area should be listed first
• Use no more than 4 sub-levels

How people navigate – what to remember

• They are task oriented
• They use a process of elimination
• They scan and do not read
• Decide to use navigation or content to go further in the site
• Once they choose they typically stick with that method
• Can scan a list of seven
• First 3 and then the last item

Next Steps

From here, the next step will be to either create the content on your site or begin moving the content into its new organization structure. The categories that you’ve planned in the above step can be created on your site using WordPress’ menu system and parent/child page relationship.

Tools like Google Analytics are great for tracking how users interact with your site; as you track the stats of your users over time, you may notice trends in your site traffic that you wouldn’t have known about otherwise. If there are pages that receive high amounts of traffic despite being a lower page in one of your top-level categories, it might be worth creating a shortcut to that page from the homepage of your site. Similarly, a homepage link can direct people to relevant content that isn’t receiving the traffic you think they should.

Much like the content of your site, the structure of your site should never be thought of as immovable. It should be observed and, if needed, changed to best match the needs of your users and your organization.

As is true for other media, writing effectively for the web has its own set of rules and conventions. The following are tips for writing for the web.

Know your audience

• Readers come to a page for a purpose – to complete a task or to obtain information. Determine the reader’s purpose for visiting each page and keep it in mind while writing.
• Reflect on the following questions before writing:
  • Who is the audience?
  • Why are they visiting this page?
  • What do they already know?
  • What do they need to know to successfully complete their purpose?
  • What would you like them to do and/ or know after visiting the page?

Less is more

• Be concise and limit the length of text. People read more slowly from computer screens than from paper. Make it quick and easy for people to read each page.

Plain language

• Use simple, straightforward and objective language.
• Remove extra words and avoid ambiguous words.

Voice

• Use an active voice and simple verbs.
  • Active: “Complete the application form and sign it.”
  • Passive: “After being filled in, the application form should be signed.”

Terminology

• Define each acronym the first time it is used on a page.
• Be consistent with terms.
• Avoid colloquialisms and jargon.

Style guide

Refer to the UBC Brand writing toolkit including the editorial style guide for style and spelling guidelines, including UBC-specific conventions.

Inverted pyramid

• Write the main point or most important information at the top of each page, followed by the supporting information and details, and the background and general information at the end.

Scannability

• Use formatting and structural elements to make it easy for a reader to scan the page:
  • Headings
  • Subheadings
  • Separated short paragraphs
  • Tables
  • Lists
  • Bold keywords
  • Effective link names with the URL embedded

File naming

• Consider appropriate file naming conventions for when a user downloads a document/file from your site.

Clinical faculty members can indicate his or her UBC appointment on their website with the following text linked to the Department’s or Faculty’s website:

[Insert name] is a [insert title of appointment] [OPTIONAL: in the XYZ department (linked to department’s website) and/or Faculty of Medicine] at The University of British Columbia.

Clinics or health care facilities that provide teaching for students and learners in the UBC Faculty of Medicine can indicate their involvement with the following text linked to the Faculty’s website:

Teaching for students and learners in the UBC Faculty of Medicine is provided in this facility.

In addition to using the text above on their website, clinical faculty members may wish to acknowledge their teaching contributions in their office or clinic. The Office of Clinical Faculty Affairs supplies office plaques to help recognize their contribution to teaching the next generation of health professions. Please e-mail ocfa.med@ubc.ca to request delivery.