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.

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.

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.

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.

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.

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.

Side-by-side Comparisons

div id="homeNewsWrapper" class="largeMain"

a class="newsItem main"

div class="inside"

div class="image"

div class="inside"

img

div class="newsContent"

div class="inside-padding"

div

Main Article Title

div class="newsDate"

span

20 December 2017

div class="newsSummary"

Short article summary

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)

div class="newsItem"

div class="image"

div class="insideImage"

img

div class="newsTitle"

Article Title

div class="text"

div class="newsContent"

div class="newsDate"

span

Dec 20

div class="newsSummary"

Short article summary

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)

div class="newsItem"

div class="image"

div class="insideImage"

img

div class="newsTitle"

Article Title

div class="text"

div class="newsContent"

div class="newsDate"

span

Dec 20

div class="newsSummary"

Short article summary

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)

div class="newsItem"

div class="image"

div class="insideImage"

img

div class="newsTitle"

Article Title

div class="text"

div class="newsContent"

div class="newsDate"

span

Dec 20

div class="newsSummary"

Short article summary

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)

div id="homeNewsWrapper" class="thumbnails"

div class="newsList"

a class="newsItem"

div class="inside"

div class="image"

div class="inside"

img

div class="newsContent"

div

div class="newsTitle"

Article Title

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)

a class="newsItem"

div class="inside"

div class="image"

div class="inside"

img

div class="newsContent"

div

div class="newsTitle"

Article Title

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)

a class="newsItem"

div class="inside"

div class="image"

div class="inside"

img

div class="newsContent"

div

div class="newsTitle"

Article Title

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)

a class="newsItem"

div class="inside"

div class="image"

div class="inside"

img

div class="newsContent"

div

div class="newsTitle"

Article Title

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)

a class="newsItem"

div class="inside"

div class="image"

div class="inside"

img

div class="newsContent"

div

div class="newsTitle"

Article Title

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)

a class="newsItem"

div class="inside"

div class="image"

div class="inside"

img

div class="newsContent"

div

div class="newsTitle"

Article Title

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)

a class="newsItem"

div class="inside"

div class="image"

div class="inside"

img

div class="newsContent"

div

div class="newsTitle"

Article Title

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)

a class="newsItem"

div class="inside"

div class="image"

div class="inside"

img

div class="newsContent"

div

div class="newsTitle"

Article Title

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)

a class="newsItem"

div class="inside"

div class="image"

div class="inside"

img

div class="newsContent"

div

div class="newsTitle"

Article Title

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)

a class="newsItem"

div class="inside"

div class="image"

div class="inside"

img

div class="newsContent"

div

div class="newsTitle"

Article Title

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)

div id="homeNewsWrapper" class="stacked"

div class="newsList"

a class="newsItem"

div class="inside"

div class="newsTitle"

Article Title

div class="image"

div class="inside"

img

div class="newsContent"

div

div class="newsDate"

span

Dec 20

div class="newsSummary"

Short article summary

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)

a class="newsItem"

div class="inside"

div class="newsTitle"

Article Title

div class="image"

div class="inside"

img

div class="newsContent"

div

div class="newsDate"

span

Dec 20

div class="newsSummary"

Short article summary

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)

a class="newsItem"

div class="inside"

div class="newsTitle"

Article Title

div class="image"

div class="inside"

img

div class="newsContent"

div

div class="newsDate"

span

Dec 20

div class="newsSummary"

Short article summary

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)

div id="homeNewsWrapper" class="divided"

div class="newsList"

a href="" class="newsItem"

div class="inside"

div class="image"

div class="inside"

img

div class="text"

div class="newsTitle"

Article Title

div class="newsContent"

div class="newsDate"

span

Dec 20

div class="newsSummary"

Short article summary

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)

a href="" class="newsItem"

div class="inside"

div class="image"

div class="inside"

img

div class="text"

div class="newsTitle"

Article Title

div class="newsContent"

div class="newsDate"

span

Dec 20

div class="newsSummary"

Short article summary

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)

a href="" class="newsItem"

div class="inside"

div class="image"

div class="inside"

img

div class="text"

div class="newsTitle"

Article Title

div class="newsContent"

div class="newsDate"

span

Dec 20

div class="newsSummary"

Short article summary

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)

a href="" class="newsItem"

div class="inside"

div class="image"

div class="inside"

img

div class="text"

div class="newsTitle"

Article Title

div class="newsContent"

div class="newsDate"

span

Dec 20

div class="newsSummary"

Short article summary

div class="readMore"

span

Read this article

span class="offscreen"

Read more about (insert title here)