A website is a commonly used tool for knowledge mobilization for research projects and labs. I often get asked (or provide unsolicited advice!) on how to do this well. For those that don’t ask, or I haven’t connected with yet, I have put together my top ten tips.

Note: I’m a knowledge mobilization expert, not a web designer. This list is based on a non-comprehensive review of expert opinions, blog posts, and my past experience. I’ve highlighted some of my favourite resources for this work below.

1. Identify your target audience and objective for the website

With all knowledge mobilization and dissemination efforts, you should always first know what you hope to achieve and who you need to reach. This informs all your other decisions. Don’t skip this step! Need help figuring this out? Get in touch with the SFU Knowledge Mobilization Officer.

2. Assess your resources

Consider how much time, technical ability, and financial resources you have and are willing to dedicate to developing and upkeep of the website. If all are limited, then keep it basic.

3. Determine and develop the content and tone of the site

This will be informed by your audience and objective. For example, if the audience is other researchers, and the objective is to build new collaborations, you may want the content to be more technical and the tone professional. If you are looking for students, the tone might be more fun and emphasize the activities of the lab. If it is for the public, perhaps it is more plain language, informational, and engaging.

4. Avoid overcrowding

A layered structure, with brief overviews that can be clicked through to more information, is often preferable. However, avoid very complicated sites with multiple clicks to arrive at desired information. SFU’s Scholarly Communications Lab website is a nice example of how to do this well: https://www.scholcommlab.ca/

5. The layout of each page should flow, be uncluttered, and organized

This can be achieved by organizing in a grid, column, or horizontal layout. Use negative (blank) space to facilitate readability and navigation (scan-ability). The image below places two websites side-by-side and illustrates why this is important to consider. Which page do you find easier to read – right or left?

6. Choose images that are specific to your research, in focus, with sufficient resolution

Include an up to date image of your team or project lead(s), and consider how your website images compliment and align with your social media accounts. For example, the website top image and your headshot could be the same as your photo and cover image on Twitter and LinkedIn. For accessibility, be sure to include alternative text that explains the image – sometimes called “alt-text.” If you are including images or graphics of humans, use diverse representation and avoid stereotypes.

7. Use simple fonts

Choose a maximum of three complementary fonts (one for title, heading, and body). Often a sans serif font (without extra embellishments such as Helvetica) is preferable for large text (titles and headings) and serif (e.g. Times New Roman) for small text (body). Dark text on light backgrounds are easier to read and provide a more accessible experience for viewers.

8. Pick a colour scheme of three complementary colours (and maybe an accent or two)

Choose colours that align with your audience, objective, research and tone. Check out Canva’s colour generator for help and inspiration.

9. Consider diversity, equity, and inclusion

How we design and write can influence our audience’s sense of inclusion and more. This needs to be considered in selection and use of colours (e.g. colour blindness), font (readability), images (think about representation and messaging), language (e.g. use inclusive and plain language), and assumptions.

10. Get feedback and support

Reach out to available SFU resources (e.g. communicators, Knowledge Mobilization Hub, Digital Humanities Innovation Lab) for guidance and feedback. Consider hiring a professional web designer if you can afford it, and/or graphic artist. Before you launch, ask friends and colleagues to review your site.

Want to learn more?

More blog posts

Here are some useful blog posts that dive deeper into strategies, process, and considerations:

• SFU Library’s advice on visibility and your online presence
• The Social Academic's blog post on developing your personal academic website
• The Leveraged PhD's blog post on creating a personal website
• These two blog posts offer tips from researchers on creating a good lab website by Nature and Edge for Scholars.

Resources and supports

Here are some platforms, templates, and services to get you started (paid and free):

• Designs that Cell -- A Canadian research-focused scientific illustration company.
• Science Project -- A subscription-based website platform for scientists.
• Or use one of the most popular non-specialist platforms for building websites: 
  • Squarespace -- Includes marketing and e-commerce features.
  • Wordpress -- Very customisable but does not include hosting.
  • Wix -- Allows you to build webpages using drag-and-drop features.

What does a good website look like?

It’s always good to have a few examples of websites that you like. Some of this is personal preference of course, but here are a few project or lab websites that I like:

• Chatr Lab 
• Science Up First
• Amplify Podcast Network
• Multimedia Lab

Siteinspire is a whole site dedicated to the collection of creative websites. I choose a few from their list in the education and science space that might offer some inspiration:

• Whitehead Institute 
• Vital Strategies 
• Simons Foundation

Originally published May 14, 2021 by Lupin Battersby