Article Bins

[dt-space height=”120″]

Article Bin Widgets

ArticleBin-LayoutsBackground

Article bins allow custom news features in any widgitized area of the site to encourage more content consumption or link related content. While they are seen most in the right rail of articles and pages, these widgets are very flexible to fit the needs of the day.

Research and Feedback

When we converted over to NewsPublish, one of the only things editorial teams missed from the previous CMS was options in article bins. We spoke with many of the editorial teams and found that there were three main requests.

  1. A collection of large images
  2. Article lists to place in small space
  3. At least one option with movement or rotation

The key with implementation is to keep it powerful enough to fit all the needs, but also keep it simple enough that any member of the editorial team could easily select the widget needed.

Article Bin 1

This bin spans both left and center columns on pages and is responsive to expand down on mobile. This layout works well for previously written stories about the same topic.

2 Column Bullet Bin (Responsive)

Article Bin 2

Article Bin 2 works well for previously written stories about the same topic with a video worth highlighting.This bin spans both left and center columns on pages and is responsive to expand down on mobile.

2 Column - Thumbnail, Abstract and Bullet Bin

Article Bin 3

Layout 3 features large thumbnail images that highlight the video or featured image. It is flexible to handle 2-24 stories at a time. This works great in a large space or for a feed that updates quickly.

Large Thumbnail Headlines

Article Bin 4

Layout 4 is designed to fit in the right rail or targeted for mobile screens. There is one primary story with video and selection of articles in a list.

1 Column Thumbnail, Abstract, and Article Bin

Article Bin 5

Layout 5 is intentionally not responsive to maintain the same format across screens. This works well for lists that are not as important but still worth including.

1 Column Thumbnail, Abstract, and Article Bin

Article Bin 6

Layout 6 prominently features one large story with an abstract. The bullet bin has a high capacity and spreads the list to both columns. This works best in landing pages and the home page.

1 Column Thumbnail, Abstract, and Article Bin

Article Bin 7

Layout 7 is very simple and designed specifically for the right rail for low priority lists of stories.

1 Column, Bullets

Article Bin 8

Layout 8 is the non-responsive version of Layout 1. This keeps the list simple and spread out. Option 8 is another bin for low priority lists.

2 Column, Bullets

Article Bin 9

Layout 9 is a version of Layout 3 specifically designed for targeted mobile or the right rail to features large images. This is another bin that is flexible enough to handle 2 stories and up to fit the need of the editorial team.

1 Column, Large Thumbnail, Double Columns

Article Bin 10

Layout 10 is a single column version of 9 that enlarges the images to the maximum column width and competes for attention on mobile screens. This is best used for important related content or features.

1 Column, Large Thumbnail, Single Column

Article Bin 11

This is the most unique widget that features only photo galleries and rotates through galleries with animation. This is designed for the right rail of a page or article.

1 Column, 2 Rotating Below (Title on Rollover)

Article Bin 12

Layout 12 is a responsive design that locks to only 3 featured stories. This works best as dead end prevention at the bottom of the article. In mobile, it converts to work the same as layout 10.

Large Thumbnail, Headlines (Mobile 1 column, Large Thumbnail)

[dt-space height=”120″]

Google Accelerated Mobile Pages

When Google launched AMPs, we launched the pages to load from search and select social referrals. The ultimate goal of AMPs is to have a light version of articles that can load as fast as possible. This only applies to articles and has extremely limited functionality.

Slimming down the theme of articles brought us down to only the most important elements – logo, breadcrumbs, hero image, video, text, and related links. We were able to apply the same fonts and similar colors, and most importantly load in out ad tags to keep these pages monetized. Overall, the look is slightly different to fit the need, but the aesthetic helps keep the most important elements familiar to our UX.

[dt-space height=”120″]

Pull Quote Options

We received several request from our editorial teams to provide options for pull quotes. The main purpose is for the investigative post types, but there are select stories that contain good quotes from interviews or the editorial team worth highlighting.

Each option can be used to fit the type of editorial and personality of the story and local market. They have 4 select options of font styles but each market can customize the color to fit their branding.

I do not claim ownership of screenshots of site stories or images.

All works in portfolio are not part of the Creative Commons licence.