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.

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

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.

 

Why should I use the File Browser?

If a file or image has been uploaded to a Webpage it now exists as an asset within Drupal. If you plan on using that same image or file in other pages, you should access it using the File Browser.

Here’s why:

When you upload an image into a Webpage it gets stored on the Drupal servers. To access files on the server we use the File Browser. Webpages and all assets associated with the webpage all belong to a specific section of the UNBC website. So, when you upload an image or file to a Webpage, it will be stored in the File Browser, in the folder for that section.

If you were to upload the same image or file into different Webpages, then there would be multiples of that image or file within the Drupal server.

Drupal is not configured to overwrite files, so when a file of the same name is uploaded, Drupal will add a number at the end of the file names. (i.e.: if  myimage.jpg already exists within Drupal and an additional copy is uploaded, it will be named myimage_1.jpg).

This can be problematic because:

  1. it will cause unnecessary clutter within the Drupal asset folders
  2. it makes managing assets more difficult as it may not be clear if the multiple copies are actually accidental duplicates, or actually intended revisions of a file

Click here for a step-by-step guide on how to insert an image from the file browser

Resizing an image

  1. Select the image by clicking it in the WYSIWYG editor.
  2. Click the “Image” button in the WYSIWYG.
  3. Enter either the desired Width or Height (you can only control one in order to retain the correct proportions of the image). Make sure the padlock to the right is locked in order to keep the proportions.
  4. Click OK