hmikko

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.

A topic is more than a collection of posts; it's a living entity that ebbs and flows over time.
Evergreen topics can see month-long gaps between posts and longer topics spanning numerous pages can end up hard to navigate through to find useful content.
With this in mind, we've added numerous improvements to the topic view to bring context and summaries key areas within the topic.

Topic view updates
Topic Activity
The first thing you likely spotted in the above screenshot is the new sidebar. This acts much like a summary of activity within the topic. It very quickly lets you know how old the topic is and how long it has been since the last reply. This context is essential if you are unwittingly replying to an older topic.
Most topics are driven by a handful of key members. The topic activity section shows you who have been most active, which may influence which posters you give greater authority to.
Likewise, popular days lets you dig into the 'meat' of the topic which may have evolved quickly over several days.
More often than not, a single post attracts more reactions if it is particularly helpful or insightful, and this is shown too.
Finally, a mini gallery of all upload images allows you to review media that has been attached to posts.

The topic activity summary under the first post
This activity bar can be shown either as a sidebar or underneath the first post in a topic. If you enable it for mobile devices, then it will show under the first post automatically.

The topic activity summary on mobile
As with many new features in Invision Community, you have several controls in the Admin CP to fine-tune this to your communities needs.

AdminCP settings
Other improvements
The eagle-eyed among you will have spotted a few other changes to the topic view.
The first is the badge underneath the user's photo. The shield icon notes that this poster is part of the moderation team. Of course, this badge can be hidden for communities that do not like to draw attention to all their moderators.

You will also notice that when the topic starter makes a reply to a topic, they get an "author" badge as their reply may carry more authority.
When you scroll down a topic, it's not often apparent that there has been a significant time gap between replies. For some topical topics (see what I did there) this may alter the context of the conversation.
We have added a little identifier between posts when a period of time has passed between posts.

These changes add a little context to the topic to give you more insight into how the replies direct the conversation.
The new topic activity summary gives you an at-a-glance overview of key moments and posters to help you navigate longer topics.
We hope that you and your members enjoy these new features coming to Invision Community 4.5!

Completing long and complex forms online is tedious. It can be off putting having to fill in a lot of information before you can join a site or service. You may find that potential members never bother to convert from a visitor.
How to convert guests into regular members is an often asked question. The simple answer is to lower the barrier to entry. Invision Community 4 already allows you to register with Facebook, Twitter, and other networks with ease.
"Complete My Profile" is a system that will lower the barrier of conversion. Guests only have to complete a very basic form to gain membership. Members are then asked to complete any custom profile fields you require.
You can also set up steps that group items together to encourage existing members to add more information to their public profile.
Members with a complete profile and user photo provide others with much more engagement and personality.
Registering
If we look at registering first. Clicking "Sign Up" will only show a simple modal form with as few fields as possible.

 
If you have required steps, and after any member validation flow, the complete your profile wizard is shown.

 
This enforces required fields and the member cannot skip them or view other pages until completed.
Of course, you may have steps that are not set to required. These are available too, but are skippable. Members can complete skipped steps later.

 
A dismissible progress bar shows to members that have uncompleted steps. Once dismissed, it no longer displays in the header of the site.

 
This same progress bar is always shown in the members' settings overview panel, in the user control panel. This will prompt members with incomplete steps.

 
If you set up a new required step, members have to complete the step before being able to browse again. This will ensure that all regular members have completed profiles.
Admin Control Panel
You will create new steps in the Admin Control Panel. Each step can contain multiple elements of a single group. This step can be set to required to enforce completion or suggested to allow it to be skipped.

 
The basic profile group contains things like user photo, birthday and cover photo. Choose any of these for this step.

 
The custom profile field group contains any fields you have set up already.

 
You can switch off this system if you feel it does not fit your needs. When disabled, you get the normal registration form.

 
Reducing the complexity of membership can only help convert more guests into contributing members. Enforcing required steps ensures that you capture data across your membership.
We hope you enjoy this feature and you see an increase in guest conversion with Invision Community 4.2.
 

This entry is about our IPS Community Suite 4.2 release.
IPS Community Suite has long had a reputation system; first we had a simple up/down system, later updated to introduce a Likes system as an alternative. Whichever system you chose to use, it tied in with our reputation system.
We're pleased to introduce the latest updates to the reputation system, and it's something that has been requested for quite some time: Reactions.
Quite simply, reactions allow users to offer more fine-grained sentiments towards content than a simple up/down or 'like'. They are now in common usage on social networks, and so users expect to be able to be more nuanced in their response to something they see.
Let's see how they work in a post, and then cover the options you'll have available.

What you see above is the default setup for a site that has used the Like system in version 4.1. We include 5 reactions by default:
Like Thanks Confused Sad Haha If you currently use the older style up/down reputation system, don't fret - you'll still get the new reactions on upgrade, but they'll be disabled by default and instead the new reaction UI will show up/down reactions. This gives you the flexibility to decide which of the new reactions, if any, you want to allow.
So, those are the basics - but what configuration options can you expect to see? First, you can of course add your own reactions! We expect that beyond the default reactions you'd expect to find, some sites will want reaction types specific to their use-case. On an intranet, you might want to have 'agree' and 'disagree' reactions for staff to use when responding to discussions. On a gaming community, you might replace the icons to be some graphic from a video game that means something to your particular userbase. There's a wealth of possibilities.
Each reaction you set up can be configured to adjust the original author's reputation count - a reaction can be positive (i.e. award a reputation point), negative (i.e. subtract a reputation point), or neutral (i.e. leave the reputation count unchanged). Our default set won't include any negative reactions, but you are free to configure these and new reactions to suit your own use-case. A user's total reputation count is still shown alongside their content and in their profile, of course.
If you don't want to use the new reactions for whatever reason, you can disable all of them except Like, and it'll behave just the like 4.1-and-earlier system:

 
Sites that currently use the up/down system don't show a list of names of users, and instead show an overall reputation score for the content. With the new reaction system, you can enable this even if you don't use up/down reactions. This is great if you plan to use reactions as, for example, an agree/disagree system, or where the content score is more important to your site than the individual reaction types.

How the reaction UI looks with the 'count only' setting enabled
As you'd expect, you can click individual reaction counts (or the overall reputation score, if you enable that setting) to view who reacted to the content. This remains a permission setting that you can apply per-group.

On touch devices, on-hover functionality is not suitable, and so for these devices the reactions UI looks like this:

Reactions play well with all areas of the suite, including Recommended Replies:

...and activity streams...

...and a couple of places we aren't quite ready to reveal yet  
 
We hope you're looking forward to this new feature as much as we are. It's already been a hit on our internal testing site, and we're looking forward to seeing how clients customize it for use on their own community.
Developer note: Reactions are one of two new features (the other currently unannounced) so far that make use of PHP Traits.

This entry is about our IPS Community Suite 4.2 release.
One of our more technically-oriented features for 4.2, we have added more detailed logs of user logins, and the devices and IP addresses used. This brings several new features:
 
Notification of a new device sign in
If enabled, users can receive an email notification when a new device is used to log into their account:
 

Email sent when a login from a new device is detected
When a user signs in for the first time, a special key is set to recognise the browser on subsequent logins. This mean the notification email does not trigger on a new IP address, which would be annoying when travelling or if using a network where the IP address changes regularly. Instead, the notification is only triggered if someone signs into your account from a new physical device or web browser.
 
UserCP Device Management
If enabled, a new page will show in the user's settings page showing all the devices which have been used to log into their within the last 90 days (which is recent enough that could still be logged in if "Remember Me" was checked).

Recently Used Devices
Users can see the device, browser, physical location (obtained by a GeoIP lookup) and if applicable, how the login was processed (for example, if the sign in was with Facebook or Twitter, this will show). If they chose "Remember Me" when logging in, they can undo that (handy if you realise you accidentally left yourself signed in on a public computer).
If they see anything they don't recognise, a page to walk them through the necessary steps to re-secure their account is available.

Secure Account Information
 
New Two-Factor Authentication Setting
"Logging into the front-end" is one of the options of when to prompt for Two Factor Authentication. In 4.2, this has been separated into two distinct settings:
Logging into the front-end from a new device Logging into the front-end from a known device If you enable the former, but not the latter, and the user has previously logged in devices, the system will automatically show an explanation to users alongside the other available recovery option. This can be useful especially if you do not want to offer other recovery options.
 
AdminCP Device Management
In the AdminCP, administrators can see all the device and IPs a member has used. They can also disable automatic login for any device.
 

Edit member page shows most recently used device and IP address
 
 
Viewing a device's details
The system can also detect if another user is using the same device and will show this in the list of devices.
  
Users sharing the same device
 

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.