Arts website guidelines

Note: Help us grow this work in progress! Suggestions and questions are welcome - please contact Elizabeth Rogers.

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.

Create scannable content

Most of the time, users are task-oriented - that is, they want to quickly get information they need or 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.

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.

For example, the undergraduate and graduate calendars are the official sources of degree requirements and related academic information. Please link to these websites and avoid including the content on your own pages.

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.

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.

Avoid text on images

Text on images (or images of text) can be an accessibility and usability issue. Use call-to-action buttons, homepage banners and the styles provided in the WCMS.

Event and course posters should also be avoided, especially ones containing links or QR codes. It's widely known that this is bad form on websites.

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.

Learn more about file types

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