TDBF

As showcased in our past blogs, Invision Community 5 introduces a brand new, modern interface which brings improvements to performance, aesthetics and mobile usability.
An optional side navigation panel, new view modes, light/dark modes, customizable header layouts, a search modal and a mobile navigation bar are some of the things we've showcased previously. Today, lets take a closer look at some other miscellaneous changes that we've been working on while developing Version 5, including some of the code reductions and performance improvements that we've been able to achieve in the process.
For those of you who are developers, we'll also give some simple explanations of how (and why) we've implemented these changes.
 
Widgets
Sidebar widgets are perfect for displaying content feeds, featured members, announcements, advertisements and more on your page. In version 4 however, the widget column would often become an empty space once the widgets had been scrolled past:
  widgets-v4.mp4  
In version 5, widgets now stick to the screen once the last widget has been reached, ensuring your readers have more convenient  access to your widgets rather than a void space:
  sticky-widgets-v5.mp4  
 
Messenger
The Messenger is a great way to reach out to members when a private chat is more appropriate than a topic. Inspired by modern email clients, the messenger in Version 5 has been revamped with a full-height, sticky inbox, a longer message snippet, mini profiles and a more polished UI - all with a 25% reduction in CSS and a 100% reduction in Javascript.
messenger-v5.mp4
 
Sticky elements
We've mentioned sticky elements a couple of times now, so lets take a look behind the scenes at how they're created, and some of the performance improvements with Version 5. Traditionally, sticky elements were created using Javascript which would calculate the position of the element on the page and adjust it's stickiness every time the page was scrolled. Scroll events can be quite taxing for browsers, and when it comes to Javascript, the less, the better (especially when aiming for great page speed scores)!
With that in mind, all sticky elements are now handled using sticky positioning via CSS, which is a native and much more performant way of controlling these elements. We've been able to replace an entire 400 line Javascript component with just 3 lines of CSS.
 
Grids and Masonry
Grids have previously been handled in a similar fashion. Javascript would scan all elements within a grid to determine how many could fit on a single line, and would then shuffle these elements into position after the page was loaded or resized. CSS has since introduced its own grid properties, which has allowed us to replace more than 350 lines of Javascript with just a few lines of CSS, resulting in more performant page rendering and nicer looking grids (especially on small-medium displays such as mobiles and tablets).
 

 
Fun fact: We first introduced a similar performance improvement to "masonry grids" in our Gallery update from January this year, by replacing more than 400 lines of Javascript with, you guessed it, just a few lines of CSS.
 

 
 
 
Click targets
We wanted to make Version 5 as simple as possible to navigate, and one way of doing that has been by implementing larger click targets. Clicking anywhere inside an entry in a table or grid will now take you to that entry (you can still click on other links like normal within the click target, such as subforums or profile links). Click targets are optional and can be disabled via your theme settings if necessary.
 
click-targets.mp4
 
Data Lists (tables)
Speaking of tables, they too have been revamped. Tables automatically adapt to the space they've been assigned to (for those curious, this is done using CSS container-queries), so they're always neat regardless of the screen size, with no overflow or squashed layouts. Behind the scenes, the two columns below are created with identical code, yet they're quite different visually due to the size which they've been allocated. Even with these improvements, tables have received a 25% reduction in CSS.
 

 
Profiles
Profiles have been polished for Version 5 and include some nice improvements such as sticky widgets and tabs. 
profile-desktop.mp4
 
On mobiles, the side column collapses into a carousel, and the sticky tabs allow you to easily flick between content types without scrolling to the top of the page.
profile-mobile.mp4
 

Tabs
You may have noticed in the above clip that tabs on mobiles are now scrollable, compared to a dropdown menu from version 4. We made this change to ensure that tabs are given more equal exposure on small devices, and have managed to reduce the CSS by a whopping 80%.
 
Carousels
Last and certainly not least, are carousels. Carousels are great for displaying large amounts of data in a confined space and they've been rewritten from scratch for version 5. Previously, a Javascript library was used to create the "scroll effect", however this has never been the smoothest experience on laptop trackpads and touch devices.
In version 5, carousels are powered by native smooth-scrolling and scroll-snapping, which results in a much nicer user experience, especially on touchscreens. We've been able to remove a staggering 95% of the Javascript, substituting it with just a few lines of CSS.
 
carousel.mp4
 
To be honest, we've only just scratched the surface here! In addition to these changes, we've modernized (and reduced code) in almost every component throughout the suite including avatars, cover photos, dropdown menus, forms, inputs, buttons, lists, off-canvas menus, side menus, columns and more!
Combined, these changes result in not only a significant reduction in code, but also a polished UI that performs smoothly on desktop and touch devices. We're excited to continue modernizing Invision Community well into the future as new technologies and techniques become available to us, and are looking forward to getting it in your hands in 2024.

This week, we're excited to preview some of the UI changes which will be included with Invision Community 4.7.8.
These changes result in improved performance for Google Fonts and better contrast for accessibility, while also fixing a few bugs along the way. When combined, these small improvements result in a much more polished UI, so lets dive in and take a look at some examples below!
Google Fonts
Google Fonts are now imported using the latest version of their API, which includes support for font-display:swap. This CSS property prevents FOUT, or the Flash Of Unstyled Text, where fonts would temporarily be invisible if the Google Font hadn't finished downloading. With this update, a fallback font will be displayed until the Google Font has been downloaded, so your text will be immediately visible even on your initial page load.
With this update, we have also imported font-weight:600 for improved rendering of semi-bold fonts.
Cleaner UI for Forum Grid
This update includes a cleaner UI for forum grids, resulting in improved contrast particularly for the forum icon and forum name.

Cleaner UI for "Expanded view" topic lists
In addition to new forum grids, the expanded view UI has also seen improvements in this update, where items are now separated by a simple border instead of being separated into their own boxes.

Improved button alignment on mobiles
When possible, buttons will now only occupy a single line on mobiles which results in a cleaner layout and less scrolling. Win win!
Before:

After:

Breadcrumbs
Breadcrumbs now use a darker color and thicker font-weight for improved contrast, and no longer truncate when long titles are included.
Before:

After:

Social Icons
The background color of certain social icons has been updated to match their current brand colours.
Before:

After:

Widget designs
All widgets have received a slight UI overhaul, resulting in improved readability due to heavier font-weights on titles. Alignment issues have also been addressed in certain widgets for mobiles:
Before:

After:

Improved alignment in posts
Post controls (the bar containing the quote link and reactions) are now vertically aligned to the bottom of posts, regardless of the post length. Small change, but a big difference!
Before:

After:

And much more!
In addition to these changes, we've included a bunch of fixes including broken stats on record lists, wide tooltips, sticky announcements not staying stuck to the screen, incorrect image ratios for Recent Achievement badges and stretched thumbnails in widgets.
We think these improvements have really helped to clean up certain areas of our UI and we look forward to them going live on all sites with 4.7.8!

We are excited to announce the Leaderboard as the latest all new feature of IPS Community Suite. The new Leaderboard is designed to better highlight your most active members and content based on reputation and other metrics. The Leaderboard will greatly enhance both member and content discovery on your community.

Leaderboard Home
First you will notice the new feature of member leaders based on a specific time frame. In the example above it is set to All Time showing those members with the most reputation overall on your community. It also shows the content with the most reputation for the same timeframe so you get a snapshot of both popular members and popular content in one view.

Past Leaders
The Past Leaders tab shows the "winners" of each day in a history. The system counts all reputation made each day and logs the members who had the top reputation counts that day. Using reputation rather than post count encourages your members to post quality of quantity which is really important to any site.

Winner Profile Badge
Those who win the day also get a badge on their profile page to highlight that they were the member with the most reputation for a particular day.

Top Members
Top Members shows you a list of all members sorted by various metrics. By default you will see members sorted by reputation but you can also easily sort by total post content Suite-wide or per-app. All of these views can be linked directly to so if you wanted a menu item to show members who post the most files in Downloads you can just directly link to that sort view.

Leaderboard Settings
There are various settings to control the default behavior of the Leaderboard. You can define the default view and how many members to show which is helpful to tailor it to your needs.
We hope you enjoy this initial launch of the new Leaderboard feature. We are excited about the new content and member discovery abilities this offers and look forward to adding new options to the Leaderboard as we continue to develop!
 
This change will be in version 4.1.17 which is scheduled to be released in early December 2016.