Tips for Optimizing Webpages

As we move closer to the launch of the responsive web, we encourage you to spend some time reviewing and optimizing your web pages. Here are some tips that will help you with enhancing your presence on the website.

Check Alt and Title Text on Images

It is important that the images on your web pages include meaningful alt text and titles. This ensures that users with visual impairments are able to interpret your web pages using a screen reader. It can also improve the search ranking for your webpages. Alt text should use proper capitalization and provide an adequate description of the image.

To check the alt text for an image, double click the image in the editor to bring up the Image Properties dialogue box. Check the ‘Alternative Text’ field to make sure it contains your alt text. To check the image title, click the ‘Advanced’ tab and check the ‘Advisory Title’ field. Image titles are optional and should be different from the alt text.

Image Properties in Drupal

Review Content for Recency

The content on your web pages should be both up-to-date and relevant. Please take some time to read through each of your web pages and make any necessary updates. Contact information, news, and events are examples of content that should always be kept current.

Check Heading Styles

Please make sure that your main page headings are using the Heading 3 style. Subheadings should use the Heading 4 style. Headings at lower levels should be formatted using bold paragraph text.

To fix a heading style, highlight the text and choose ‘Clear Formatting’ from the style drop down list in your editing toolbar, then choose the appropriate style for your heading.

Style Dropdown in Drupal

Review Overall Page Formatting

Take a look through your web pages to make sure the page formatting and font styles are consistent. You can also check your web page formatting using different mobile devices and web browsers. If you run into any formatting problems that you aren’t able to fix, please contact us for assistance.

Updates to Announcements

We’ve made a few updates to the Announcement content type. We especially love that any new announcements will now display within their assigned section.

published with labels

Here is the full list of updates:

1. Choosing one single section rather than several

This is how we were able to give Announcements a home within their chosen web section.

choosing a section

2. The ability to add a cover image

The cover image will display at the top of the published Announcement. Note that there is a minimum image size of 646×50 pixels.

inserting a cover image

3. Assigning a date

By default the Announcement will use today’s date.

assigning a date

4. Adding a video gallery from YouTube

You can add YouTube videos by pasting the URL into the video gallery field.

adding a video gallery

5. Adding an image gallery

Upload images into the image gallery field to create an image gallery display at the bottom of the published Announcement.

image gallery field

 Watch this (silent) video to see the changes in action:

Headings as Links

Links cannot be styled as headings in webpages.

In most cases, styling a link as a heading is not recommended, which is why we’ve eliminated the possibility of styling links as headings.

  • If a heading is also a link, it will appear as a regular heading.
  • To make a heading/link appear as a link again, just remove the heading style.

Image Size Cheat Sheet

Here are some useful dimensions for resizing images:

Download the PDF Image Size Cheat Sheet

How to Crop Images

There are many ways to crop and resize images. The WYSIWYG editor allows us to resize images, but it does not allow us to crop them. Photoshop is our #1 photo editing software, but it can take time to learn and is costly. If you’re looking for a quick and easy way to crop photos, we recommend Pixlr, a browser-based photo editing tool. Visit http://pixlr.com and take a look at the tutorial below to learn more.

Download the Pixlr Tutorial

Standards for Menus

The Office of Communications is developing standards for local navigation (the menus on the left panel of sections of the UNBC website).

This will be an ongoing project and we’ll post updates as we develop the standards. We’re looking at things such as terminology that makes sense to the user, placement of links that are common across sections, and content that does not belong in the menu.

Here are some that we’re working on now.

UNBC Menus will Link to UNBC Content

Menus on the UNBC website are intended to help the user find content within the UNBC website.

We are not able to indicate that a link in the menu takes the user to content outside of the UNBC website, which can result in us losing our web user.

In addition, we have no control over the function of the external link. Including the external link on a web page, rather than the menu, allows us easier ability to find and fix broken links.

  • Links to any online content that is not part of the UNBC website should not be part of a local menu
  • Links to external content should be accessible on a webpage
  • The webpage with external link(s) can be linked from the local menu
  • We recommend that a brief description of what the user will find when they click on an external link be included (wherever appropriate)
Links to Files Do not Belong in Menus

In order to better track online assets and to keep navigation simple, files (PDFs, etc.) will not be included as direct links from menus.

In addition, we are finding that documents links in the local navigation are frequently updated. This results in menus that are harder to maintain.

Instead, the document(s) should be included on a webpage(s) and the menu links be directed there.

Faculty, Staff, Contact

  • Faculty listings will be included on their own dedicated page.
  • Staff listings will be included on the contact page.
  • Faculty and staff will not be combined on a common page.

How to resize images without distorting them

You might think that no one will notice when you accidentally stretch my face to look like a pancake, but that’s not true and here’s how to prevent pancake face from happening to your images.

Method 1: Use the corners

When you select an image, there are hot points on all corners and edges of an image. An image can be resized by clicking and dragging those hot points. Make sure that you are only using the corners since using the edges will distort the image.

Dragging the hot points on the corners keeps the image in proportion.

Question: What if I accidentally distort an image? How do I bring it back to its normal proportions?

Answer: In the Image Properties, click the blue padlock so that it’s locked. This will restore its original proportions. (See Method 2 for details)

Please note: Hot points are not available in Chrome, so if Method 1 is for you, use Firefox instead.

 

Method 2: Adjust the Image properties

a) Select the image, b) Select the Image tool in the WYSIWYG toolbar, c) Make sure that the blue padlock is locked (next to the height and width properties). If the padlock is unlocked, click on it to lock it.

Make sure the padlock is always locked to keep the proportions in tact. If you accidentally distort an image, relock the padlock to restore it to its original proportions.

d) Adjust either the height or width. If you adjust the height, the width will automatically change in order to retain proportions and vice versa.