Accessibility Tool

News/Blog

The news portlet crawls all articles within a specified set of pages and pulls data from each one. That data is then displayed in a news feed for viewers to see the most recent articles added. The exact number of news items and information displayed is determined by the render template in use, but each article contains a title, featured image, image title, summary, published date, and a rich text area.

Best Practices

  • The rich text area contains the actual article content, therefore will never be included in the news feed. The summary is meant for this purpose.
  • Featured images should have large enough dimensions to scale up to HD resolution.
  • Image file sizes should be compressed as much as possible without large amounts of quality loss (High control image compresion).
  • CSS background images should ONLY be used for decorative elements, never as a replacement for the "img" tag.
  • Background images should either be large enough to scale or be designed to repeat. For full width or height backgrounds, background-size should be set to cover(covers entire viewport on all sides) or contain(stops when any part of image hits a viewport edge) for responsiveness.
  • Text styling should display properly at all device widths (1920-1024px desktop, 990-320px mobile) and should be able to accomodate more or less verbiage.
  • Text must conform to ADA AA contrast guidelines (Web AIM Contrast Checker).

Render Templates

The HTML structure of a portlet is determined by the render template in use. Portlets have multiple render templates to choose from, and our development team has the ability to create new render templates based on client need.

large-main

News - Large Main

This render template displays three news items representing the latest articles of a specified set of pages. The main container is divided into two sections: one "main" article (the most recent) and two "secondary" articles. Each news item is wrapped in a link tag and contains a title, featured image, published date, summary, and "Read this article" box.

Read more
stacked

News - Stacked

This render template displays three news items representing the latest articles of a specified set of pages. Each news item is wrapped in a link tag and contains a title, featured image, published date, summary (displays up to 200 characters followed by "..."), and "Read this article" box.

Read more
thumbnails

News - Thumbnails

This render template displays ten news items representing the latest articles of a specified set of pages. Each news item is wrapped in a link tag and contains a title, featured image, and "Read this article" box.

Read more
divided

News - Divided

This render template displays four news items representing the latest articles of a specified set of pages. Each news item has two containers (all wrapped in a link). One contains an image and the other contains a title, published date, summary (displays up to 200 characters followed by "..."), and "Read this article" box.

Read more
merged

News - Merged

This render template displays four news items representing the latest articles of a specified set of pages. Each news item has an image container that contains an image and a header (all wrapped in a link) and a text container that contains the published date, summary (displays up to 200 characters followed by "..."), and "Read this article" box.

Read more

Side-by-side Comparisons

2020 © All Rights Reserved | Website Design By: Intrado | Login