Toolkit

Web

Modern.

Elegant.

Responsive.

Web Toolkit

The web connects us.
How do we connect?

Our web presence provides a digital home for our brand. It connects our organization in a cohesive, intentional way that supports informational and experiential user experiences alike. As a central place for critical transactions and conversation, the UBC web experience should be seamless, easy-to-use and helpful.

UBC websites are the foundation of an enterprise-wide digital eco-system. The UBC CLF (Common Look and Feel) ensures our audience and visitors recognize any page that has our visual identity in a web context. Consistent use of the CLF helps create a sense of trust and assures prospective students, staff and faculty that the content they interact with is, in fact, created by UBC. We value our audience’s experience — confidence in our web presence is something we continually strive to improve.

Here are some examples that bring this to life.


Key Considerations

Key Considerations for a Strong Web Presence

1
Keep your audience in mind as you create your site

What is the purpose of your website? To whom are you communicating? What are the viewers’ goals? Why are they visiting your website? Think of your audience first.

Website_Example1_770x380

2
Create a content strategy

How are you creating an experience that caters to the needs and interests of your target audiences? Do you have photography that captures their attention? Do you have content that addresses the information they seek?

Website_Example2_770x380

3
Is your website mobile-ready and web accessible?

Make use of the UBC CLF (Common Look and Feel) to create a web presence that responds well to all devices, meets accessibility guidelines and is connected to the UBC digital ecosystem.


4
How will you maintain your website?

Is there a content management system in place? Is your web server reliable and secure? Who will update content and maintain the technical infrastructure?

Website_Example4_770x380

5
How will you measure performance?

Set up a Google Analytics account, monitor and measure your basic stats to help set the goals necessary for continuous improvement.

Website_Example5_770x380


Think Strategically

Think Strategically

Make the most out of your project. Here are some strategies that we think will help you.

Before
  1. Before embarking on a website build or redesign, think about your goals and the very purpose for having a web presence: What are you trying to do and why? Could these goals be better met through existing teaching and learning technologies or other channels already available within your unit?
  2. Understand your audience, goals and needs. For example, on your current site, post an online survey to gather feedback from visitors, interview your target audience or if you have the means, hire an expert to carry out a usability test to establish the baseline measure of performance of your current site.
  3. Review your web analytics. If you do not have analytics in place, implement analytics as soon as possible to gather this vital baseline data.
  4. Understand the resources available to you on campus. Talk with your communications or internal web staff within your faculty or administrative unit and then connect with the Digital Communications team in Brand and Marketing.
  5. Familiarize yourself with existing guidelines and services: sub-domain registration guidelines; web hosting options from UBC IT; the CLF template and the CMS service.
  6. Assess your existing resources. Which staff members will be involved in the project? What is your budget? What resources will you provide internally, what will you source externally?
  7. Create a plan. Start with a project brief, an environmental scan and a content inventory of your existing site.
During
  1. Create a content strategy. Include your information architecture and navigation structure.
  2. If time and resources allow, work with an expert and run your navigation through usability tests to validate your new content model.
  3. Work with experts to build your site. Enlist the resources available to you on campus: the CLF; the CMS service; UBC IT Web Services and Communications and Marketing.
  4. Implement analytics tools such as Google Analytics to measure metrics. Ensure your analytics account and the links provided within the site are active prior to launching your new site.
After
  1. Monitor your progress and measure your results. One to three months after launch, review your metrics and look for patterns or abnormalities.
  2. Keep your site current and relevant by updating your content as needed and running ‘broken link’ checks on a monthly basis.
  3. Keep your site safe and secure by ensuring your content management system and all related plug-ins or modules are up-to-date.
  4. If time and resources allow, run additional usability tests to measure current performance against the original baseline data.
  5. Set up an online feedback form or email address for visitors to send questions and provide the crucial feedback to keep the site on track and relevant.
  6. Keep a backlog of updates and revisions and consistently stay on top of it. Schedule regular times to update and improve your presence online.

Downloads

Downloads

CLF Mock-up templates

These Illustrator files contain the CLF grid, layouts and assets to help guide your website design.


Training

Training

Opportunities to gain new insights and communication skills, whether you are a new or seasoned communicator, are always available to you at UBC.

Upcoming Workshops

Become a Front-End Web Developer

Online
Free
Lynda.com courses are free for UBC faculty & staff. Sign up for free access here.
Get the skills to build engaging, interactive user experiences on the web as a front-end web developer. Learn everything you need to design and develop user-facing code, and discover how to bring concepts to life on the browser canvas by combining essential graphic design and coding principles. Develop competency with HTML, CSS, JavaScript, and jQuery. Master basic version control with Git and GitHub. Apply best practices in responsive design and progressive enhancement.

Training Video

Websites — A Conversation with Adrian Liem