What you should look out for

As you review your website to address old content and remove Content Blocks, it is important to look for the following situations:

• Images that do not have alt text
• Links that display the web address as the clickable link text
• Link text that is vague, or repeated use of the same link text for different links
• Images of flyers or posters

Images that do not have alt text

It is particularly important that all images used on a web page have descriptive text alternatives (alt text), as this allows visitors who use a screen reader to understand the content you are publishing. This alt text should be brief and convey the context of the image in your content. Read more about the importance of alt text.
Tip: You can quickly review your images using the “Media Library” section of the dashboard. Updating or adding alt text for each image in this location will make it available to you when you next use the image on a page.

Links that display the web address as the clickable link text

If you find a link in your content that displays the URL on screen as the clickable text, replace that address text with descriptive information about the web page the link references. For example, a link to the 91¸£Àû homepage should not display nor even umaine.edu. Instead, describe where the link will go: 91¸£Àû websiteÌý´Ç°ùÌývisit the 91¸£Àû homepage.

Link text that is vague, or repeated use of the same link text for different links

When a visitor uses a screen reader, links are read aloud in a list. Vague link text such as “PDF” or “here” are not clear to the visitor, and when a link text is used multiple times on a page it is difficult to understand which link should be selected.
Read more about accessibility with link text.

Images of flyers or posters

It is tempting to save time when putting content on your website when you have already created a flyer or poster that already features the information. Adding such an image without repeating the content as text on the web page gives a poor experience— both for visitors using screen readers as well as visitors who may be using their mobile device and its smaller screen.
Tip: Consider removing flyers or posters altogether on older content, as this may be out of date information. If the content is still important, re-type the information and format the text using the many options available in the newer Gutenberg editor.
Read more about accessibility with event flyers and posters.

Step 1: Create the new page

Create a new page on your site (via the Add Page link in the Pages dashboard, for example.) Avoid publishing the draft page until ready to replace the old page.

Step 2: Check for children

By default pages you create are considered “top level” pages on your site, such as the President’s Cabinet page on the Office of the President website, umaine.edu/president/cabinet/. If you have created pages that are sub-sections of that page, those may be set up as “child pages” (for example, Robert Dana’s biography is a child page of the president’s cabinet page, umaine.edu/president/cabinet/robert-dana/). A child page will include it’s parent page in its path (/cabinet/ in our example).

Child pages will be seen in the pages dashboard listed underneath the parent page with a dash before the page name.

Review the child pages to see if they use content blocks as well. If so, create replacements for them as well before publishing the parent page.

Step 3: Use “quick edit” in the dashboard to manage the switchover

Part 1: Using the quick edit feature, change the “slug” of the old page (adding “-old” to the slug for example), and set its status to Draft.

Part 2: Using the “quick edit” feature, change the “slug” of the new page to match the slug of the page it is replacing, and set its status to Published.

Part 3: If the old page has children (see above), use the “quick edit” feature to select the “Parent” as the new Gutenberg page. 

(NOTE: if a child page was also using Content Blocks, use the “quick edit” feature for the new Gutenberg page and not the old Content Blocks page)

Step 4: Move the old page(s) to trash

Once the old page has been updated to change it’s URL (by changing the “slug” value), move it to the trash by clicking the “Trash” link underneath the page name in the dashboard.

Step 5: Review navigation menus and update as needed

The menu editor will indicate if a menu item has been deleted— replace that menu item with a new link to your Gutenberg page.

Once a document is ready to publish online, a good option to consider is the online file viewer Digital Communications offers via a public Sharepoint site. By using this web-based file viewer, the work undertaken to make a document accessibility is better preserved for an accessible interface for both desktop and mobile users. Contact us at um.weboffice@maine.edu if you are interested in publishing documents online using this file viewer option.

Gutenberg training available biweekly

If you are ready to learn about the new Gutenberg editor, or just want a refresher on its features, our biweekly Gutenberg training is a great place to start. See below for training dates. All trainings are conducted via Zoom and recorded for easy reference.

Need help? Don’t struggle! Contact Digital Communications for support

Our team is working with Gutenberg for websites on a daily basis, and through our own work we understand that learning these new features and combining different Gutenberg blocks can be a daunting challenge. If you are struggling to get a web page to display as you want, or want to learn how we achieved some of the Gutenberg designs on websites, please reach out to us.

Coming soon: GIG, the Gutenberg Interest Gang

This semester we will be launching an email group and Google Chat space for a Gutenberg Interest Gang (GIG). This will be a friendly space to ask questions, report problems, and share successes with other website editors across campus.

Contact us at um.weboffice@maine.edu if you would like to join our Gutenberg Interest Gang.

SEO — Moving from Yoast to SEOPress

As mentioned in our October newsletter, we are transitioning from the Yoast SEO tool to SEOPress for search optimization features. The SEOPress tool is better supported by UMS IT’s Web Technologies team, and will be in use for all university websites going forward. This change has been made to many sites already— if you see an SEO icon in your dashboard instead of the “Y” Yoast icon, your site has already been updated. Our SEO Workshop is a great way to learn more about SEO considerations for your website, and can be scheduled for one of our Friday consultation sessions.

Events Calendar — Updating event database format

Our event calendar software was updated in July, and with that update came a new database format for events. The Events Calendar system has an easy process to update this in the dashboard, but large calendars can take some time to update. As we have updated SEO on a website, we triggered this database update to ensure forward compatibility with future improvements.

Jetpack removed from websites

As of Jan. 24 we have removed Jetpack from all but four websites on , and will be reviewing Cooperative Extension websites next. Websites that have specific uses for Jetpack are being reviewed to identify new options for Jetpack features, and we will be in touch as we learn more.

This logo change will occur automatically for our social links menus. If you have featured a link to Twitter on your website in content using the blue bird logo, you can update this now in your content as it will not automatically update with our changes. More information about the X brand update is available on about.twitter.com.

Recommendation: Remove embedded twitter feeds

Unrelated to the visual brand changes, Twitter/X has begun to require a login in order to view tweets. As a result of this change, an embedded Twitter/X feed on a website will display a misleading message when a visitor to your site is not already logged into that social media platform:

Because of this change, we recommend that embedded Twitter/X feeds be removed from our websites to avoid confusing information. Instead, you may feature a link to your Twitter feed, which will give visitors a more accurate “you must login to view tweets” message.

Because of this problem, pages using the event list content block are not listing events in the correct order, and many events are missing from the listings altogether.

Our team here in Digital Communications is implementing a new feature for event listings, and we expect to have addressed this issue on pages in the 91¸£ÀûÌý²¹²Ô»åÌý91¸£Àû Machias websites before the start of fall semester.

If you have used this content block, please review those pages and alert us at um.weboffice@maine.edu of any problems and we will fix the issue as soon as possible.

Important: everyone should have their own account

It can be tempting to share your user account login with a coworker or student to give them access to the WordPress websites. However, doing this violates UMS IT data security guidance. Digital Communications can set up new user accounts quickly, and by asking us for new accounts we are able to reach out and provide direct support to each user. Beginning July 1, all new users must take our Accessibility training pathway through UMS Academy before they are able to edit web pages, and user accounts that are found to be shared will have access restricted to adhere to UMS accessibility requirements.

Digital Communications available for support

If you need support for your website, a refresher on training, or want to plan important changes to your website over the summer, we are here to help. Please contact us at um.weboffice@maine.edu regarding any of our training topics listed below, or request a Friday consultation slot to discuss your website goals.

There is a known display issue with the menu content block’s “Blue horizontal buttons” display option when viewed on a mobile device. While the menu’s blue buttons will become wide enough to accommodate a long button name, a button’s text may wrap to multiple lines when narrowed for a mobile device. Below are two examples of a menu using this feature to illustrate the issue:

Above is an example of a menu block with button names of various widths. As you can see, the third button is much wider than the first two, accommodating the much longer button text.

On a mobile device’s narrower screen, the third button’s text shifts to two lines, and the second line display is left-aligned, not centered.

Workarounds to this known issue

Option 1: Shorter button names

In the menu editor, you can override the page or custom link name with shorter text, which is typically a good idea for navigation menus in general. This option should be used if the menu is displayed on multiple pages.

Option 2: Button shortcode

The button shortcode does not have this same display issue, as shown in the image below. This option should be used if the menu is displayed on a single page, or if it is unlikely you will need to manage the buttons on multiple pages.

The button shortcode is documented in our user guide.

While QR codes can be used to contain information such as contact or payment details, the most common use we encounter is a code that when scanned will send a reader to a website address. Because the visitor to your website likely used their smartphone to scan the code, it is important to check the destination web page on your own mobile device — the 91¸£Àû and 91¸£Àû Machias websites are mobile-friendly, which means content will rearrange itself to fit the narrow screen of such devices. If you primarily designed your web page for a desktop web browser, you may be surprised at how the content flows in that different format.

If you have questions about how to improve your web page for a mobile device display, please email us at um.weboffice@maine.edu with a link to the page your QR code points to, and we can help advise on changes to improve that experience.