Webpage Guide

1. Accessing Drupal
2. Finding Your Department Homepage
3. Creating a New Webpage
4. Page Components and Toolbar

5. Using the WYSIWYG Toolbar

6. Banner Images
7. Video
8. Contact Information
9. Editing the Sidebar

10. Menu Settings

11. URL Redirects
12. Revision Information
13. Saving/Deleting your webpage

Accessing Drupal

  1.  To log in to Drupal, visit: grcc.edu/user
  2. Enter your Novell username and password and select “Log in.” Your Novell login is the username and password you use when you first turn on your computer.
  3. To log out of Drupal, select “Log out” at the top right corner of the screen next to your username.

Finding Your Department Homepage

  • Log in to your Drupal user account.
  • Use the Search feature in the upper right corner of the GRCC website. When you start typing your department name, the search will auto-complete with suggestions. Once you have located your department, click on the department name to get to your site. As you browse through your department site, you should notice that you have access to edit your pages.
  • Select the Edit tab to begin editing.

Creating a New Page

  • After signing into your account, select Add content.
  • Select Page once you are brought to the menu.
  • Refer to the section below on Drupal Webpage Components and Tools for directions and requirements for populating your webpage.

Page Components and Toolbar

Page Name

This refers to the name that appears at the top of the webpage. For Department pages, the Name should not change.

Body

This field is for the text that appears in the body of your department homepage. All content should be concise, scannable and organized in a hierarchy using headers. If you’re using information that has a date (an event, for example) mark your GroupWise calendar for the date when the event will be past so you can disable the site.

Using the WYSIWYG Toolbar

WYSIWYG stands for “what you see is what you get." This acronym is used because when you use each of the tools provided by the toolbar, they appear in edit mode as they would when the document is published.

Headers

The header tool is used for content formatting and correct usage is necessary for ADA compliance. Assistive technologies, such as screen readers, rely on the correct usage of headers to navigate the page, without having to read through all of the text to get to the desired section of information.

  • Header 1 is automatically used for the title of your page.
  • Header 2 will be the main block of content on your page, and from there, any following headers will be used in a hierarchical order to section content within header 2.
  • Headers are never used for emphasis. Attention should be drawn to the appropriate text by using concise language and quality copy.

Bold

The bold tool is used sparingly for emphasis and more frequently when starting a new section under Heading 4 when the larger headings have been used preceding Heading 4.

Italics

Italicize text only when AP Style punctuation rules apply. For example, when citing the title of a book.

Bulleted List

The bulleted list tool is used as frequently as possible when listing items. When bulleting lists that are full sentences, include a period at the end of the bulleted item. When bulleting itemized lists, periods are not required.

Numbered Bulleted List

The numbered bulleted list is used for prioritized lists. The same rules apply for numbered bullet lists as unnumbered bullet lists above.

Hyperlink

The hyperlink tool allows you to insert or edit a hyperlink to a URL or email address. Double click on the text that you would like to be the link and click this button. Insert the URL that you want to link to.

Note:

  • If you are linking to a website outside of grcc.edu, select the “Target” tab next to “Link info,” and select “New Window.” This will open the webpage in a new window and allow users to simultaneously remain on our website.
  • The text that you link to should always be descriptive of the destination of the link. For example: Widen Collective hosts an archive of photos that are acceptable to use on GRCC’s website.

Never: For an archive of photos, click here. This language does not tell users where they will be directed.

Linkit

The Linkit tool provides an easy interface for internal linking. The button opens a window with an auto complete field for searching content. Search content, select and click “insert.”

Tables

The table tool is used for inserting tables. Tables can be copy and pasted into Drupal, but because there are additional ADA features to adjust once the table has been copied, it is recommended to simply create the table in Drupal, so as not to miss these requirements.

Creating a Table
  1. Select the table icon in the WYSIWYG toolbar. The Table Properties dialog box will appear. In the Table Properties dialog box, set the desired number of Rows and Columns by entering the desired number for each.
  2. The width and height boxes should be blank.
  3. Set the headers from None to First Row. This is an ADA requirement. Selecting First Row will organize the data cells to correspond with headers and titles for screen readers and other assistive technologies. Rows should always have titles that correspond to the data in the columns below. See Editing a Table for this example.
  4. Select <not set> for alignment.
  5. Providing a caption (title) and summary (text about the relationship of information between the header and cells within table). This is also an ADA requirement.
  6. Enter data into the table beginning in Header Column 1. Pressing the “tab” key cycles the cursor into the next cell for data to be entered. You can also resize the table by clicking and dragging the squares to make it easier to see the data. Resizing the table in the Body field does not resize it in the actual published table, as these parameters are defaulted by the CMS.
  7. All tables are required by law to have information in the header row describing the information being presented below the header in order to be accessible by users with disabilities.
  8. Once the data is entered, and the page is complete, scroll down to the bottom of the page in the browser and click the Save button.
Editing a Table
Title of Table

(title of column)Header Column 1

(Title of column) Header Column 2

Column 1, Row 2

Column 2, Row 2

Column 1, Row 3

Column 2, Row 3

 

Right click on a table. A dropdown menu will appear, listing:

  • Paste
  • Cell
  • Row
  • Column
  • Delete Table
  • Table Properties
  1. The Paste command allows you to paste items from the clipboard. A window will appear that is titled Paste, where you can paste text and another table. Because the Content Management System will require ADA formatting for all pasted/copied tables, it is best to create content in the table directly.
  2. The Cell option provides a submenu of options to edit the cell that is selected by right clicking on the specific cell. None of the options provided in the Cell Editing Submenu should be used as accessibility issues for those with disabilities by creating empty/blank fields in the table to accommodate the changes to the table, and by disassociating the content of the cell from a correlated Header.
    • In the Cell Properties attributes, the only thing in this dialog box that can be modified is the Cell Type. The Cell Type should only be changed if the cell is of the incorrect cell type. There should also only be one Header Row per table, and should be the entire first row of the table. If a table requires more than one Header Row, then the table needs to be split-up into multiple tables, or reconsidered as a bulleted list or descriptive paragraph.
       
  3. The Row option provides a submenu of options that allow you to insert and delete rows in the table.
  • The Insert Row Before option places a blank row above the selected row.
  • The Insert Row After option places a blank row below the selected row.
  • The Delete Rows option deletes the currently selected row.

4. The Column option provides a submenu of options that allow you to insert and delete columns in the table.

  • The Insert Column Before option places a blank column to the left of the selected column.
  • The Insert Column After option places a blank column to the right of the selected column.
  • The Delete Columns option deletes the currently selected column.

5. The Delete Table option deletes the table that is selected with the cursor.

6. The Table Properties option, in most cases, must not be used. However, the exception to this rule is to edit the Caption and/or Summary table attributes. All tables, by law, must have a Caption and table Summary. If the table changes, it may be necessary to change the Caption and/or Summary, which can be done in the Table Properties dialog box shown below.
 

Inline Accessibility

This tool checks for errors that may have been introduced to the body of the webpage. It will check for a correct use of headers, link language and any table formatting errors causing the webpage to be inaccessible.
 

The banner image is the photo that appears at the top of your webpage. These photos must be sourced from the Graphics and Communications department’s library of approved images, grcc.widencollective.com. If you wish to have an image added to this collection, you can submit through our online form (accessible on the Communications webpage) and it will be reviewed for approval.


Requirements & Notes on Use

  • Banners cannot include text of any kind, as this is a violation of the ADA and is not accessible. This includes, but is not limited to logos, titles, dates and other information.
  • The photos must all meet the specific guidelines for all other images that Graphics and Communications have set for collateral and web materials as posted in the GRCC Identity Guide.
  • Not all photos that are approved for our image library will work for the banner images. Due to the wide aspect ratio, there will be specific situations where we will not be able to use certain images. We will do our best to find a suitable alternative.
  • If you should upload your own communications-approved banner, fill in the Alternate Text.
  • Alternate text describing the photo is required. Omit using language such as “photo of” or “image of” to describe the photo. In a bio photo, for example, simply the person’s name is what should appear in the Alternate text box. For more detailed photos, a description such as, “A student standing outside of the Main Building” is appropriate.

Video

All videos uploaded to grcc.edu must have closed captioning and copyright permissions if the video has not been produced by GRCC Media Services.

To embed a video to your homepage, click “Select media” and “choose file” to upload a video saved to your computer. For videos on YouTube, select “Web” at the top of the dialog box and enter the URL. Multiple videos can be uploaded by selecting “Add another item.”

Contact Information

This information will appear on the bottom of the left-hand sidebar on the department page, as well as all of the subsequent pages within your department.

Please note, office numbers and locations are never abbreviated.

All phone numbers appear with area code and parentheses, per GRCC’s Editorial Style Guide: (616) 234-4000.

Office Hours

 Enter your department’s office hours. Multiple lines are available if your hours differ from day to day. The “Add another item” button will add another office hours field.

Department office hours should mirror the formatting displayed in the "Bio" section

Editing the Sidebar

Sidebar Images

These photos must be sourced from the Graphics and Communications department’s library of approved images: grcc.widencollective.com. If you wish to have an image added to this collection, you can submit through our online form (accessible on the Communications webpage) and it will be reviewed for approval.

Like banner images, sidebar images cannot include text of any kind unless an accreditation is a federal requirement. Images including text is otherwise in violation of the ADA and is not accessible, unless specifically designed for ADA guidelines. Text includes, but is not limited to, logos, titles, dates and other information.

To Upload

  • Once you have downloaded an image from Graphics and Communications, or grcc.widencollective.com, Choose File to select an image from your files. Select file and click Open. Now select Upload. Images will be automatically resized.
  • Once uploaded, the Alternative Text field will appear. You are required to provide Alternative Text.
  • This text will be used by screen readers, search engines or when the image cannot be loaded. Fill in this field with a description of the image. Omit using phrases such as “Photo of,” as this will be announced by screen readers, or implied by the notification when the image does not load.

Social Media Links

If your department has a Facebook, Twitter or Blog RSS account, enter their URLs in the appropriate fields. The URL is best implemented on the department page, rather than throughout the department webpages.

Links

The text in the Links Title appears in the blue bar above your hyperlinks. Every URL should be accompanied by a title that will explicitly let readers know what is being linked to; otherwise, users will see the full URL and may not understand the context of the link.

Check the box that reads “Open in a new window” if the link leads users outside of grcc.edu.

Documents

All documents uploaded to our website must be accessible. There are no exceptions to this policy.

Considerations before uploading

  • Users do not frequent the documents section for information. This is most frequently used by internal faculty and staff. If your documents are being used for that purpose, it would be more useful to upload and share these documents in a file on Google Drive.
  • Many documents are uploaded when they would be best implemented as their own webpage instead. If you would like help distinguishing which type of format is best for your information, contact communciations@grcc.edu.

Creating and checking for accessibility

  • Visit GRCC's Accessibility Quick Guide to walk you through creating documents for accessibility.
  • In Word: File>Info>Check for Issues>Check for accessibility
  • In Adobe Acrobat Pro DC: Tools>Accessibility>Full Check

Word and Adobe will walk you through how to resolve any accessibility issues. Contact communications@grcc.edu for additional assistance.

To upload the document after checking for accessibility

  • Provide a name for the Documents Title. This should be a name that encompasses all documents if you are uploading more than one.
  • Browse to select a document from your files. Select file, click Open. Now click Upload. Once you upload the document you will need to provide a description. The Description is the text that will appear on the page as a link to your document. This will give the user context for what the document is.

Pull Quote

The pull quote body is intended to be populated with information such as deadlines, event promotion and information, or a testimonial. The pull quote title should be a brief description of the information included in the pull quote.

Menu Settings

Important: For all department homepages, the Menu Settings should not change.

Provide a menu link

There will never be a circumstance in which you should uncheck the “Provide a menu link” box for any webpage. If you have unchecked that box by accident, do not save your changes. If you have saved your changes, please contact the college’s web systems architect.

Menu link title

The Menu link title is the page name that appears in the left-hand sidebar of the webpage.

Description

The description is text that will appear when the user’s cursor is hovering over the menu link title in the left-hand sidebar. It is not necessary that this field be populated. A concise menu link title should tell users what information can be found on the page.

Parent item

The Parent item is the department or page that the webpage is organized within. By selecting the department webpage as the parent item, your webpage will appear as a tab in the left hand sidebar on that department page. If you would like to select a parent page within a department that is not the department homepage, your webpage will appear below that webpage as a “child page” and will be seen by users when its parent webpage is selected.

Weight

Weight refers to placement on the left-hand sidebar. The higher the number is, the “heavier.” Higher numbers appear lower on the list. If all pages have a weight of 0, webpages will arrange alphabetically.

Disable in menu

If you check this box, your webpage will not appear on the website. To navigate back to a disabled page, you can either copy the webpage URL for your records, or, after you’ve saved and exited, you can select My Workbench in the black bar from any page you are on in user mode. This will direct you to content you have created or edited.

URL redirects

This allows you to provide an alternative address for your site. This is not required. If you leave this field blank, a URL will be automatically created for you. Redirects are often created to help shorten URLs. It is best not to delete existing redirects in case they are being used for marketing campaigns.

Revision information

Revision log messages are only able to be accessed by the web systems architect. If you would like to save drafts of the content you are working on, it would be best to either work from a word processor, or select "disable in menu."

Saving/Deleting your webpage

You must select the “save” option at the bottom of the page to save any/all changes.

If you created a page you no longer need (an event page that has passed, for example), select the delete option at the bottom of the page next to save.