Invision Community 5: A more performant, polished UI

[Ehren]

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

[Richard Arch]

Very nice, I cant wait.

Did you miss posting a video about about Data Lists (tables)?

[KT Walrus]

I'm very curious about the UX improvements made to uploading/cropping profile photos especially when using mobile devices.

Perhaps you could do some blogs from the perspective of an iPhone/Android user in the future?

 

[David N.]

4 hours ago, Ehren said:

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.

I truly appreciate all the effort that was made to simplify the code to keep it lightweight, while in the meantime modernizing the UI. It looks very sleek.

[Robert Angle]

6 hours ago, Ehren said:

and are looking forward to getting it in your hands in 2024.

And I am looking forward to getting my hands on it 🙂

[Ehren]

6 hours ago, Richard Arch said:

Very nice, I cant wait.

Did you miss posting a video about about Data Lists (tables)?

I certainly did 😅 I've just added the screenshot, thanks!

[Adlago]

In version 4.x, the sidebar has a fixed width of 340 pixels.
For certain size displays, it's OK, but for higher resolution displays, sidebar looks too narrow...
For my site I have solved it by using % for sidebar width (I use left sidebar), for a responsive view - but with a right sidebar this idea fails.
Are you developers thinking about version 5, for responsive sidebar size?

[Ehren]

The sidebar width is customizable via a single flex-basis CSS property @Adlago. By default, it is 350px, but you can change it to whatever width you like 👍

[beats23]

Well done 👍

[sonimik1]

Very good, still waiting

[Joel R]

Really like the improvement to Tabs on Profiles on mobile, with the horizontal scroll. 

The dropdown menu in v4 basically hid all of the tab options unless you knew of the tabs in advance.

[abobader]

@Ehren Well done indeed!

[PanSevence]

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.

[Charles]

7 hours ago, PanSevence said:

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.

[AlexJ]

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

[shahed]

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?

[Ehren]

On 12/10/2023 at 12:52 PM, AlexJ said:

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

Thanks Alex, I appreciate that! 

5 hours ago, shahed said:

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?

Thanks @shahed! 
 

The profile blocks will stretch so they’re all the same height. In testing, this has worked well, but we can always add a max-height to the boxes if they get too tall.

For the moment, “normal widgets” just collapse into a vertical column on mobile, so it’s just the profile ones which scroll. The normal widgets can vary a lot in height, so they might not work as smoothly in a carousel. 

[WebCMS]

Similar to how RESTful APIs are implemented using versioning for external clients, will there be an option for users to switch between v4 and v5 UIs pointing to the same database?

For instance, the new v5 UI could be pointing to same the doc-root while the v4 UI could be relocated to /old. Users could still use /old for v4 UI until they get used to v5 UI for which /old is not required. Or more ideally, the /old could be stored in the session as a preference so both UIs can be pointed to doc-root. Site owners could set up an Announcement deadline by which the /old version will not be available to users and they should get used to the new version before that.

Sites like Google offer such feature with an option to switch back-n-forth whenever they release new versions -

• New UI
• Switch to Classic UI

That would make the transition seamless for site owners and users.

[Ehren]

Version 5 is a significant rewrite with numerous new features and breaking changes. It’s not just a new UI, so it won’t be possible to run multiple installations on the same database, sorry @WebCMS

[Robert Angle]

17 hours ago, shahed said:

One thing that really caught my eyes here is how profile' side blocks are handled in Mobile view. I think IPS just nailed it.

Although, I always edit my templates so that the feed is on the left and the sidebar block are on the right. This is because if you clicked an email notification for a Status update, it took you to the profile, but on mobile view you had to scroll past all the blocks to get to the feed (I have a lot of blocks due to a lot of profile customizations). By flipping them, the Status update is at the top of the page.

V5 gets rid of Status Updates though, so this may be a non-issue unless a super cool dev brings the feature back to life.

[modified]

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

[Dreadknux]

These UI changes are looking really nice, fantastic work as always Ehren. Having you join the IPS design team is undoubtedly one of the most exciting things to happen and your work here is just proving that every day. Looking forward to seeing even more!

I'm also now interested in seeing some of the improvements to the UX that complement the UI changes - in particular the mobile topic/posting experience, which in V4 is currently quite miserable now when you compare the ease of posting on social media apps. Just this morning I tried to post a topic about a news story I read earlier, and it was a constant battle of scrolling up/down just to reach post editor toolbar icons that had been moved off-screen as my post got longer (some elements, like the GIF implementation and URL insertion, are pretty clunky as well).

Not knocking the V4 experience as I know it's a decade old at this point and originally designed to serve a desktop experience over mobile - but at the same time, I can see why many in my community prefer to post status updates when it's currently so difficult to quickly and easily post a topic or a post on the forum via their phones. 😅

[Thomas P]

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

[virap1]

Will the database record view template be updated to something usable? Perhaps, something like what you use here?

[OptimusBain]

Will there be any improvements added to the Commerce module in version 5?? Thanks