Note: Help us grow this work in progress! Suggestions and questions are welcome - please contact Elizabeth Rogers.
University-wide guidelines
All websites in the Faculty of Arts must follow the University's Web guidelines and policies as well as the guidelines for WCMS (Waterloo Content Management System) use.
Essentially, that means websites must:
- Comply with web accessibility, copyright, privacy and security requirements.
- Have resources to maintain and oversee the website, including a site lead which is a full-time, ongoing employee.
Guiding principles
Create scannable content
Most of the time, users are task-oriented - that is, they want to quickly get information they need or to complete an action. They scan content rather than reading it word-for-word. A 'wall of text" can be confusing and overwhelming, even for an academic audience, and especially on a mobile device.
Use formatting options such as headings and lists to organize content and make it easier for users to find what they need.
Use columns for layout, tables for data
It might be tempting to use a table to create a grid for layout purposes, but it's considered bad practice with today's responsive websites and assistive technology. The WCMS has various options to help create an attractive and usable layout, including different sizes sections and types of blocks.
See the WCMS 3 sample website for some layout inspiration.
Link, don't duplicate
Content duplicated across websites is confusing for users (and search engines), and there's the risk that one or more copies will become out of date if something changes. That can lead to grievances and other troubles we'd rather avoid. Let the owner of the content (the Registrar's Office, Faculty of Arts, etc.) be responsible for keeping that content up to date.
- If it's information that applied to all Waterloo students, link to the appropriate academic support unit website. (For example, Campus Wellness.)
- If it's information that applies to Faculty of Arts students, chances are it's on the Faculty of Arts website. (For instance, course selection information or prospective major charts.)
- If it's particular to department, school or discipline, it can do on the school or department website. For example, with co-op related information it's okay to include specifics on your website (such as sample jobs your students have held) and link to the co-op website for the general information.
- The undergraduate and graduate calendars are the official sources of degree requirements, academic regulations and other academic content. Please link to these websites and avoid including the content on your own pages. (For instance, link to plan information and lists of courses in the calendar rather than posting it to our website - it's easy for this content to get outdated on our sites.)
Use webpages when possible instead of PDFs
Sometimes there is a need to offer a downloadable or printable version of content, but web pages are more accessible and user-friendly than PDFs.
Consider:
- Does this content need to be on a public-facing website? For instance, documents for internal purpose (like a program review) don't need to be public.
- Is there another solution? For instance, course syllabi should go in Outline, a graduate handbook could use the catalog content type.
Avoid text on images
Text on images (or images of text) can be an accessibility and usability issue. They can become pixelated when magnified, and often require "pinching and zoomer" on a mobile device.
Instead, use call-to-action buttons, homepage banners and the styles provided in the WCMS where the text can be read by a screen reader and the content automatically scales depending on what device you use.
Event and course promotion posters should also be avoided, especially ones containing links or QR codes. (Templates are available to help create content that works for different channels.)
Images
Image sizes
As you know WCMS 3 training, there are a few ways to add images to a website:
- banner
- image block
- inserting an image into a copy block.
- image galleries
How big you make your images depends on how they will be used. Here are the approximate page widths for each type of block in WCMS 3.
- Full width (goes from edge to edge, regardless of the screen size): Give yourself plenty of width - at least 1200 px wide up to 1920 px
- Extra wide contained width: 1200 px
- Wide contained width: about 800 px
- Narrow width: 500 px
If you're using columns, dividing the page width by the number of columns will give you a good idea of how wide to make your images. For instance, three columns in the extra wide contained width block would be 1200 px/3 = 400 px. (The images will show up slightly smaller due to white space.) If you're using a 67/33 column, any images in those columns would be 800 px and 400 px respectively.
How tall should your images be? Again, it depends on the use - but the best advice is to be consistent. For instance:
- Homepage banners should be the same dimensions on your website, including the among of text used as the caption. This will keep the content from "jumping" up and down on the page when the banners rotate.
- Listing page images (events, news, profiles, etc) look best when images are a consistent size, and they are horizontal (landscape) rather than vertical (portrait).
File sizes and image optimization
While you want high resolution images for web, the same isn't true for websites. Large file sizes can slow down your page load time, and users might not stick around to wait. Pages that load faster are also beneficial for search engine optimization. Smaller files require less storage, making them a more environmentally-friendly option.
Optimizing images for web can help decrease file sizes without compromising quality. You can use "Export As" in Photoshop, or use a third party website such as Compressor.io.
Example file size goals: Use images 500 KB or less to help your site load quickly. The smaller the image, the smaller the file size. For instance, a profile headshot might be as little as 28 KB and a banner might be 500 KB or more.
It is especially important to mind your file sizes on pages with multiple images.
Ensure that you are uploading your images at the exact pixel dimensions required (ex. 2400 px X 1600 px for a full width image). Images can be larger than their allotted space, but not smaller - if they are "blown up", they could be blurry.
File type
The WCMS allows you to upload PNG, JPG (or JPEG) or GIF files.
- GIFs are the lowest resolution and the smallest file size, or contain brief animations. They're more commonly used on social media. We don't recommend using flickering or moving images on websites due to usability and accessibility concerns.
- PNGs let you have a transparent background, which is often needed for logos and images cropped into a shape (such as a circle.)
- JPG is the most commonly used image type on the internet because of the quality, but be mindful of the file size.
Tags
In content types such as news, events and catalogs, you can add your own tags to items or you can create groups.
How tags are used
- On the listing pages for news, events, profiles, etc, users can filter content according to tags to see only what they want.
- Each tag will generate a listing page of all of the content with that tag.
- You can also use tags to post certain content in a listing block in WCMS 3. (See the How-to about tags for more details.)
Avoid using tags to call attention to something. They don't add value to the post, and they don't do anything to improve search results. Because they accumulate across all the posts on your website, you could end up with a large number of tags that your audience will struggle to navigate.
Likewise, it's important to avoid creating tags that will seldom be used or don't get used at all.
If you want to add additional tags to your posts, create a tagging strategy: that is, a concise list of tags to use, and when and how they should be used.
Audience tags
These tags are controlled by University Relations and IST, and are consistent across Waterloo's websites. You'll see them on many content types in the WCMS.
Note: These tags denote who the content is created for, not who the content is about. for instance, a student networking event might have an alum as a speaker but the event is for students (alumni as a whole are not invited, and shouldn't be tagged.)
Event tags
There's a list of event types also added to the event content type. You can add your own if the type of event you're hosting isn't listed, or if you regularly have events under a given name or theme.
If your website doesn't have a lot of events, you don't need to add additional tags.
News tags
You can add your own tags to news item, but it's recommend you only do this if your website regularly has fresh content.
Contacts and profiles
You can use tags to create groups of people in these content types. For instance, you might want to group staff versus faculty contacts on your contact page.
When choosing your tags, always keep your audience(s) in mind. How would they sort for or sort information?
Testing
What you see might not be what other people see. Web browsers, different devices and assistive and adaptive technology give users much more control over how they experience your content.
If possible, try your content
- in different browsers (Safari, Firefox, Chrome) - it should look the same, but a few quirks might emerge.
- On different screen sizes. Bring up the website on your phone, for instance, make your window larger or smaller to see how the content behaves.
Or have someone give it a test for you. (A second set of eyes never hurts to catch any errors.)