Introducing the Liquid theme for Newscoop
After the recent release of Newscoop 4.3, we are now pleased to announce a new gift to our community called Liquid theme. Liquid is the first theme for Newscoop with masonry layout, designed for magazines.
We are currently witnessing a change in the habits of new media users. Devices are becoming more mobile and screen resolutions more diverse. It is estimated that during 2015 in the UK, the use of smartphones and tablets will overtake the use of desktop computers. In recent years, Sourcefabric has set the standard in web publishing, insisting that each site be responsive, accessible and adaptable to any screen. With the Liquid theme, we went a step further and created a masonry layout that completely fills all available space.
What is masonry?
Floating objects (in our case articles) with equal sizes show up nicely as a grid. The problem arises when we try to make a cohesive grid full of articles and images of different heights. By default, CSS comes a bit short on that, giving us unpredictable results. Instead of a grid, we end up with bunch of white space, and a broken looking layout.
This is where we need masonry.js which places elements in the right position based on available vertical space.
CSS Masonry
Adding infinity to article lists
Once we have our grid in place, the next step is to add a ‘load more’ button. A ‘load more’ button comes as a natural extension of masonry layout. This allows the user to relax and not think about the layout, pagination, or controls of the site. Items are stacked one under another chronologically, enabling the user to easily scroll back up to the previous content.
If you're a fan of the traditional method of scrolling through articles, simply change the template in the backend to get pagination.
Beyond infinity
We’re not finished yet. On most news websites we are used to scrolling through patterned lists of articles, without any indication if a particular article is important, or at least if the editorial team thought it should be. All articles we view are displayed the same. Because of this, we decided to add a very simple, but rarely seen functionality on news websites to our theme. If an editorial team wants to emphasize particular articles, they can easily do so by checking the ‘Highlight’ switch on the article edit screen. This will increase the article width to two columns, and also increase the size of the image.
Design and colors
The design of Liquid is simple and free from unnecessary details. The use of light colors and strong red enables highlighting of important content. The header is white, which will allow the accommodation of any logo, regardless of color or style. The light gray background with articles in white boxes allows for better visibility and readability by visually differentiating the articles. To allow the user to easily navigate the site, we have set the main navigation to always be visible, even when scrolling down. In addition to the standard options and widgets, (community feed, poll, most read and most commented on articles, debates and voting debates) we have added editorial comments and gallery slideshows within the article. We also integrated the standard formats for banners and advertisements.
With the inclusion of all the listed options and additions, we have created a better user experience, with a focus on the magazine. This theme turns your site into an infinite river of articles, and seamlessly maintains users longer on site.