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:

   

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:

   

 

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.

 

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.

 

 

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. 

 

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.

 

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.

 

 

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.

View full blog entry

Well done 👍

Very good, still waiting

Unfortunately, it's a pity that you're not improving interactions. By this, I mean dynamically adding content in real-time, for instance, when a post is published, so that a user who is currently in the thread can immediately see the added post without refreshing, and such interactions in the inbox as well.

 

Unfortunately, it's a pity that you're not improving interactions. By this, I mean dynamically adding content in real-time, for instance, when a post is published, so that a user who is currently in the thread can immediately see the added post without refreshing, and such interactions in the inbox as well.

Actually it's not a pity seeing as we have that already and are making it better.

UI update has Ehren written all over it. Using your themes for past 10 years 🙂 Well done. 

Great work as always @Ehren

One thing that really caught my eyes here is how profile' side blocks are handled in Mobile view. I think IPS just nailed it. question here is what happens with blocks with different heights? those seems all in same heights and size, so what if one block is just longer than the others? another question is and maybe i missed something here, is this same method for all other blocks/widgets in mobile view?

This new features in v5 look awesome.  Can't wait to try this out!

Awesome changes as usual, very well made.
Looking forward to them

 

there is a lot of suspense and all with videos and teasers but some clear roadmap for the v5 and upcoming vision would help me much more.

If they waited till they had everything fully ready, you would not have anything until super close to completion. They’re sharing info as they can… but like anything you don’t want to promise something you can’t deliver. If they THOUGHT they could do a super cool new thing and shared it but it turned out it could not made to be worked fully well, people would blame IPS for the next 20 years about it. (Yes, it really has happened.)

They talk about features once they are comfortable that they’re going to actually happen and that they can deliver on them as promised instead of promising vaporware. 

Will there be support for packaging as a standalone community app in the future?