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.
Nowadays with such a shift to mobile, I'm for the simpler minimized layout to closer mirror what we show on mobile when on desktop. Back in the day when more users where on desktop it made more sense to have an expanded user info panel within the post template, but as time moves on, simpler and faster is better IMO. However, you can probably achieve that all with a plugin or reach out to a dev for something like:
I'm fine with the new badges, but I'm REALLY missing all of the profile info below the avatar.
These fields should be a built in option to display under the avatar "Join Date/Total Posts/Rep/ Location and other custom fields"
I think having it displayed gives a member "forum cred" at a glance. Heck, I didn't even know you had to "hover" over the avatar to see that info.
You shouldn't need a plugin in order to display that basic information.
Just gotta throw it out there for any new potential customers, and to let staff know they're appreciated :
Support : The few times I have ever needed support from Invision themselves, have always been answered in a timely manner, and "to the point focus", and I love it. Staff has always made a point of answering all my questions in a message, and I find that lacks in alot of other places. A+ support 🥰
Service : Out of 7 months of usage, I think we have experienced 1 "downtime" period, and for only a few hours. I currently use the Cloud package, and I gotta say it works pretty well out of the box, and is surprising what you can do with it 😉 Not to mention not having to worry about running the site it self is a huge relief 😂
Keep up the great work!
Currently it will only show the top 3 although it will show ties for each position. I do have plans to add a photo of the year from the previous year's monthly entries however. If you know my development style I don't like to overcomplicate things so it's not likely I will add changes to support top 5 etc in the hall of fame. What I may do however is add a link in the hall of fame for "runners up" so that a table of all the entries is shown separately for each month if anybody wants to dive deeper. I'll be making continual improvements but I'm very picky 😄
modified got a reaction from media in Invision Community 5: A more performant, polished UI
modified got a reaction from Ehren in Invision Community 5: A more performant, polished UI
modified got a reaction from Daniel F in Invision Community 5: A more performant, polished UI
modified reacted to Ehren in Invision Community 5: A more performant, polished UI
modified got a reaction from Percival in Badges look dated
