Best Practices Tutorial

Image Management Tutorial

News Item Tutorial

Content Hub News Items

Sample News Item with Optimization Tips

Kelly Hansen — Wed, 09 Mar 2022 16:05:35 +0000

Sample News Item with Optimization Tips Kelly Hansen Wed, 03/09/2022 - 11:05

Add a CTA to balance page - looks so nice!

Use Correct Image Sizes

Use Intro Text formating to create an abstract. A compelling sentence or two summarizing the key takeaways from the article will draw in your reader.

Be Ready to Share

Add a Custom Summary and Thumbnail Image to Every News Item

Thumbnail images should be a 1:1 image ratio (otherwise known as a square), and no larger than 400 pixels by 400 pixels.

Expect news items to be shared on social media. Social media shares increase Mason’s digital impact by connecting with potential new visitors and improving a news item’s search engine ranking. Even if you have no distribution plans of your own, web content is highly shareable, and you can never predict which stories will be shared by your readers.

The summary text is a news item's 'elevator speech'. It is a one-sentence highlight of the article which displays both as the search engine snippet and intro text on a social media share.

A custom thumbnail image is the visual version of a news item's summary text. Thumbnail images should be a 1:1 image ratio (otherwise known as a square), and no larger than 400 pixels by 400 pixels. Thumbnails display with summary text in search result snippets and social media shares.

Use a Social Media Share Checker

Preview what your news item will look like on social media with a social share checker. The OUB Digital Communications team likes OpenGraph XYZ and the Social Share Preview browser extension. Search for 'Social Share Preview' in your browser's extension library to download.

Use a Fact Box

Headings are Also Great for Breaking Up Text

Another way to add visual interest is to give your reader article highlights in a fact box. Create a fact box by formatting a bulleted list within a blockquote then removing the attribution. List the sizzle and key facts. Here is a sample fact box of tips to make your news item more reader-friendly for improved social shareability and search engine ranking.

Improve web readability by:

Putting important information first

Using concise language, short sentences

Breaking up articles with intro text, headers, fact boxes, and smaller images

Placing large images and videos at the end

Use Small Images

Small images are a great way to captivate readers. Small images load more quickly than large images on all devices and browsers. Load time is important, as users do not tolerate long waits, and long load times negatively affect search engine optimization.

Videos and Larger Images at the End

Pages load into a browser on any device from top to bottom. Keep large images and videos at the bottom of the article so they have time to load while your user is busy reading your compelling text.

This is filler text, please notice the fact box and image guidance. This is filler text, please notice the fact box and image guidance. This is filler text, please notice the fact box and image guidance. This is filler text, please notice the fact box and image guidance. This is filler text, please notice the fact box and image guidance. This is filler text, please notice the fact box and image guidance.

Topics

How to… Understand Versioning and Publication States - Draft, Published, and Archive

Kelly Hansen — Wed, 02 Feb 2022 19:21:28 +0000

How to… Understand Versioning and Publication States - Draft, Published, and Archive Kelly Hansen Wed, 02/02/2022 - 14:21

What is Versioning?

SiteMasonry's versioning workflow allows content to be modified in an unpublished Draft state without changing the publically viewable Published version of the page or content item (news item, profile, or program).

When an Editor makes content changes, SiteMasonry creates a previewable Draft version of the page or content item alongside a copy of the currently published page or content item. Each version can be viewed or retrieved on the page or item’s Revisions tab.

SiteMasonry's Publication States

SiteMasonry utilizes three publication states - Draft, Published, and Archive. The Publication State selector is located near the bottom of the page or item's 'Edit Settings' screen.

Draft

The Draft state allows an editor to make changes to a page without making content visible to site visitors. This acts slightly differently depending on whether or not an item has ever been published before. However, all drafts require a user to be logged in to view or edit. This means that should you wish to send a preview of edited content to another person, you'll need to either make sure they have an account on the site you are working on or rely on screenshots to show the changes.

New Content

If you are working on a new page or piece of content, setting a page in draft mode will let you see the page if you are logged in. However, you and visitors will not be able to see or visit the page until it is published.

Existing Content

If you are modifying currently published content, you can save changes as a draft. This will add a tab to your page labeled "latest version." The latest version will reflect your changes, while the current version is still public and viewable on the View tab. Once the page is re-published from Draft mode, all changes will become live and the old version will only be viewable via the revision log.

Published

A Published page is the most recent version of a page. It is 'live' and viewable to site visitors. You can make changes and push them as published immediately.

Topics

SiteMasonry Basics

Image Management Tutorial

SiteMasonry Tutorial

How to... Embed an Image with Expressive Image Alt Text

Kelly Hansen — Mon, 13 Dec 2021 21:51:40 +0000

How to... Embed an Image with Expressive Image Alt Text Kelly Hansen Mon, 12/13/2021 - 16:51

Mason prides itself on its dedication to inclusivity. As such, every member of the SiteMasonry ecosystem is expected to support digital inclusion by adding alt text to the images they use on their sites.

What is Alt Text and Why is Alt Text Important?

Also known as an alt attribute, alt description, or alt tag, alt text is a written description of an image placed on the web. It is intended to help non-visual users (i.e. those who use screen readers) when they come across an image that they could not otherwise interpret. Describing images accurately in alt text ensures those who need it get an equivalent, accessible experience.

Meeting Standards for Accessibility

As a publically-funded institution, ��AV is required to meet WCAG 2.0 web accessibility standards. Adding alt text to images helps meet the WCAG 2.0 image description requirement, as well as supports Mason's dedication to inclusivity.

Mason’s Assistive Technology Initiative (ATI) office monitors Mason’s sites for Section 508 and WCAG 2.0 compliance - including the use of image alt text. ATI’s website lists information, resources, and tools to help web content editors keep their content accessible to everyone, regardless of their sight, hearing, or mobility status.

Add Alt Text, Boost Page SEO

Did you know that search engines deprioritize pages without alt text on images? If your images don't have alt text, your page will rank lower than a page with alt text on its images. Adding alt text is therefore an easy way to ensure your page stays high in the rankings.

Writing Good Alt Text

Good descriptive alt text should accurately and concisely describe the content and function of an image, without relying on visual cues. Alt text is primarily used to provide context and accessibility for individuals who are visually impaired or using assistive technologies like screen readers.

Here are some tips for writing good descriptive alt text:

Be specific: Use descriptive words to convey as much information as possible about the image.
Be concise: Keep your alt text short and to the point. Avoid overly long descriptions that may be overwhelming or distracting.
Focus on the content: Identify the main elements of the image that are relevant to its function and convey that information in the alt text.
Consider the context: Think about where the image is being used and how it fits into the overall content. The alt text should provide context and complement the surrounding text.
Avoid unnecessary details: Stick to the most important information and avoid including irrelevant details that may clutter the alt text.
Use appropriate language: Use language that is appropriate for the audience and the context. Avoid technical jargon or overly complex language that may be difficult to understand.

If the image contains text that is key information not provided elsewhere on the site, you should include all that text in the alt text. This ensures that individuals who are visually impaired or using assistive technologies like screen readers can access all the information in the image. If the text is formatted in a specific way, include that information in the alt text. For example, you might say "Bold text reads..." or "Italicized text reads..."

Ask yourself if the image adds any important information or function to the content. If not, it's likely that the image is decorative. If the image is decorative only and does not convey any important information or function, you should use null or empty alt text. This means leaving the alt attribute empty or using alt="". This tells screen readers to skip over the image and focus on the surrounding text instead.

Adding Alt Text in SiteMasonry

There are two occasions where you might be asked to add alt text to an image. One is when uploading an image that is going to be used in a Featured Image position or similar. The other is when adding an embedded image into a text box.

Adding an image via the Feature Image block asks you to add alt text for your image when you upload it. Embedded images do not, as they show up. You need to click "edit media" to see the setting to add alt text to an image.

If you are using an image that was already uploaded the alt text may or may not be set already, depending on how it was uploaded. You can always check by searching the image file name in the Media area, then editing the image's settings.

Additional Resources

Please read these excellent articles on how to correctly write alt text:

Topics

Accessibility Tutorial

SiteMasonry Tutorial

How to...Create and Place a Webform

Kelly Hansen — Thu, 18 Nov 2021 02:19:48 +0000

How to...Create and Place a Webform Kelly Hansen Wed, 11/17/2021 - 21:19

View more SiteMasonry tutorials

Attention:

Webforms created using the Drupal Webform Module are not appropriate for collecting sensitive information such as:

birth dates

test scores

application materials

payment processing

file uploads of any sort

social security numbers

personally sensitive information

any item that may become part of an official record.

Contact the Admissions Tech Team for assistance if you are creating a form for the purposes of collecting information for an admissions-related process.

Contact ITS for access to the Qualtrics secure form building tool, if your form requires file uploads or the collection of personally identifying information (PII) or FERPA protected information related to an academic or administrative process such as a fellowship or scholarship application, or other administrative process.

It is every Mason Web Editor's duty and responsibility to be good stewards of our website users' information.

The Webform builder allows Site Owners to create and place forms on any SiteMasonry page.

Collecting Personal Identifiable Information (PII), documents or images? Contact ITS for access to the Qualtrics secure form building tool.

Create and Place: Webform Basics

Create a Webform

From the Admin toolbar navigate to > Structure > Webforms:

At the 'Webforms' page > Click ‘Add Webform’
Click ‘Add Element’ to add form elements

Of the many element options to choose from, email, phone, text field, and text area are the most commonly used field elements.

Webforms may be placed on any SiteMasonry page - Basic or Landing.

Want to learn more? Watch the recommended deep-dive webform video tutorials:

Conditional Elements

Multi-step Wizards

Pre-Defined List Options

Emailed Submission Confirmations

Submission Confirmation Page

Place a Webform

Navigate to and open the desired page:

Click the ‘Customize This Page’ tab
Locate, or create, the section to place the webform block in
- click ‘Add Block’, notice the fly-out sidebar admin menu
From the sidebar admin menu
- select ‘Webform' from the block list (will be close to the bottom of the list) to 'pop-up' the 'Configure Block' screen
From the ‘Configure Block’ pop-up
- Add a name for the block in the title field
- Use the type-ahead feature in the ‘Webform’ textfield to select form

In the unlikely event you need to modify the ‘Default webform submission data (YAML)’ or redirect the webform, please file a support ticket for assistance.

Click ‘Add Block’
Admire your new form!
Save the page

Additional Resources

Topics

Site Owners

Forms