shahed

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.

View full blog entry

Whether you have hours to browse a community or are short on time, scrolling through a very long topic can be more than a little frustrating when you want to follow the topic's core journey.
Recently, we discussed another feature designed to help support-based communities find helpful answers quickly, but what about social topics that do not have a simple question-and-answer format?
We've all come to a lengthy topic for the first time and found it a little intimidating to find the most relevant content among hundreds of posts, which don't always further the topic. These off-topic posts are important because they help social cohesion and build relationships between members at the time of posting. Still, those visiting later often want the truth of the topic.
Invision Community 5 brings a topic summary feature designed to make the most of your time.

The topic summary is generated by an algorithm that uses many touch points such as average read times, reactions, number of shares, external linking and more to determine how useful a post is via a numeric ranking.
The summary shows an estimated read time of the entire topic and an estimated read time using the summary, which gives your members a good idea of the time they'll save.
A shorter read time will make longer topics more accessible to a greater audience.

Adjusting the summary
We believe that algorithms should be used to support human decisions but not override them. Those with permission can add posts from the summary if they feel they are more relevant. Likewise, posts can be removed if you think they are irrelevant.

Interactions with Helpful Posts
Invision Community supports a broad range of communities, including support-based and social communities. We are improving our toolset to help both.
You can have helpful post-voting enabled as well as topic summaries enabled. When this is the case, the topic summary will show until the helpful post-voting meets a threshold. Once that threshold is met, the helpful post information will replace it.
Of course, not all communities and not every forum will have the support features enabled, meaning the topic summary will be the only way to reduce the topic complexity.
Less is more
Browsing the summary gives you a concise view of the topic's journey with no distractions, a vital strategy for growth. 
By allowing members to focus on the core journey, you reward the time they spend on your community and make it more accessible for those short on time.
We hope you've enjoyed this feature introduction and would love to hear your thoughts!
a.ipsAttachLink img { margin: 18px 0px 18px 0px;}
View full blog entry

OK... so finally we can smell those fresh Pages 😀
For what next, personally like to see how PROFILES looks like in v5 😁

Just six short weeks ago, Ehren hit record on a video that changed everything for Invision Community.
The blog was called "Introducing a fresh new vision for Invision Community 5," and it ripped up the rule book on what forums should look like and revealed a slick new look featuring a new forum home feed view and sidebar navigation.
A lot has been discussed, but we're not even close to done!
Before we bring you news of more features after Thanksgiving, I wanted to take a mid-season break to recap what we've seen so far.
First up was the introduction video, which gave a broad overview of the new UI Invision Community 5 would be sporting. Ehren takes us through many new elements, including the sidebar navigation, forum feed view, simplified post view and more.
 
 
Up next was a focus on dark mode, accessibility and mobile views. Invision Community 5 features the ability to have native dark mode without additional themes or complex variables to set up. Our aim with Invision Community 5 is to hide the complexities and technology and just let you focus on creating a great community experience for your audience.
 
 
Bringing complex theming to everyone was the message in the blog talking about the new theme editor. Now, you can make wide-ranging changes to your theme without the need to edit CSS or manage HTML templates, all driven by a smart and simple interface.
 
 
Next, it was my turn to talk about a new feature. I introduced two new features designed to help those who run support-based communities. Finding the most helpful answers and identifying community experts help your members do more with less time and frustration.
 
 
Last week, Ehren demonstrated our new icon and badge builder, which is an amazingly powerful tool to produce slick and professional badges along with the ability to customize your community further with emojis and icons for menus, reactions and more. Building ways to reduce the barrier to customization has been a strong theme for Invision Community 5.
 
 
Phew!
We can all agree that we've showcased a lot of impressive functionality coming with Invision Community 5 already.
But what does the future hold?
Lots! We have a lot of new functionality that we're putting the finishing touches on, and we can't wait to show you more. These new features further help to reduce noise in topics, make the community feel alive and bring long-needed updates to core components such as the editor. Not to mention, there is a significant update to Pages underway.
We also have a lot of less flashy updates, such as the new consolidated Feature/Our Picks feature, which is now a single feature.
 
Feature-window.mp4
 
An improved Moderators Control Panel brings a more uniform experience across deleted, hidden, and content waiting to be approved.
 

We're still on course for a release of Invision Community in early 2024 and can't wait for you to experience the future of forums.
What has been your favourite feature so far? I'd love to know; drop a comment below!

View full blog entry

Oh my gosh, I cant believe there's more! IPS stretches out their features like stores stretch out Black Friday shopping.  You start in August and end some time in December.  Whew! 
This is a ton for an initial release, and while theme refreshes and design are always nice, I'm excited that the most community-impacting features are yet to come. 

Hi @MythonPonty
There's already a feature for adding a counter badge. 👍

No plans for a size option because the generated icons are in fact dimensionless SVGs, meaning they are rendered at whatever size is specified in your community theme's CSS.

Do we get…

Omg this is so cool! Super excited to see it in action! 👏 

AGAIN some next level stuff! All these updates so far are all one by one amazing! Meanwhile all updates on a community software I won't disclose, have been nothing BUT disappointing. 
Love the work you all are putting into this. Great work, as always.
 
 

The release estimate for anything at all was late 2023 to early 2024. So while I understand its "Still nothing" there. Its exactly what we expected 🙂 . I assure you, you should be eating your Christmas dinner before you get hold of one 😄
We 'may' have something people can see for themselves this year, but it certainly wont be something people can use on their own sites.

Invision Community offers fantastic ways of customizing the user experience for your members, and today, we’re excited to introduce some new and really simple ways of customizing Invision Community 5 even further using our new icon tools.
 
Icon Picker
Lets begin with our brand new icon picker. Containing both Font Awesome icons and emojis, the new picker allows you to easily search and assign icons to specific areas throughout your site. Lets take a look at some examples!
icon-picker.mp4  
Navigation icons
Adding icons to the navigation list has been a highly requested feature, so we're happy to announce that you can now use this new picker to do exactly that, for both the horizontal and vertical navigation panels, without needing to modify your theme.

 
Forum icons
Uploading forum icons is a great way to personalize individual areas of your community. In the past, these icons have typically been images, uploaded via the admin panel. In addition to the upload form, the icon picker now makes it a breeze to assign icons to forums - and if a Font Awesome icon is chosen, it'll even inherit the featured forum color.

 
Forum Feature Color
We have brought the existing forum feature color to feed view allowing for a flash of color and personalization that helps associate a color with a specific forum. The feature color pairs really well with the card image to lift the forum display.

 
Icon creator for badges, ranks and reactions
Creating unique badges, ranks and reactions is a great way to boost activity within your community by encouraging members to share more engaging and frequent content - but designing these icons from scratch using a graphics program often comes with hurdles of its own.
With our new icon creator, you can now design your own custom icons for badges, ranks and reactions straight from your Admin panel, using a combination of colors, icons and shapes.
icon-creator.mp4  
 
We think this new icon creator will make the rank, badges and reactions features even more accessible for everyone, allowing you to create a user experience that is uniquely yours. With Invision Community 5, bringing in customization and personalization moves beyond adding new themes.
We're excited to see how you can take advantage of these new tools, and we look forward hearing your feedback in the comments below!
 


View full blog entry

We will miss you, marketplace 😢

Long ago, back in the dark ages, forums used the number of posts a member made and how long ago they joined to demonstrate trust and experience.
Is simply posting a lot and being a member for a long time the best way to know which community members are experts?
And is there a better way?
We think so.
 
 
What makes an expert, and why are they important?
Community experts are the keystones to any thriving community. You probably recognise a handful in your community. They tend to be active regularly, are often the first to try and help others with their questions and help set a positive example within the community.
Wouldn't it be great if newer community members could discover who these super users were a little easier? These members trying to find their feet in a new community could follow trustworthy individuals, absorb the positive tone of the community, and even get help a little quicker.
In the past, forums have shown trust and experience through basic metrics like post count and the years since they joined. However, these metrics only show that the individual has been around a long time and posts a lot. It doesn't show that they are potential role models or helpful and trustworthy.
Community Experts with Invision Community 5
Invision Community 5 identifies these experts through metrics such as the number of solutions they have, the volume of 'helpful' votes on their replies, the speed of answers and more.
Each forum will have its own experts, so if you have a very broad community, someone who is very helpful in a particular area will show as an expert in that area only.
When a member has been picked as an expert, they'll receive an email thanking them, and they can then opt-in to be shown as an expert along with a regular notification or email with any unanswered questions in forums they are experts in.

I'm absolutely killing it in the Test Forum
Every few months, the experts are recalculated to reflect the organic way communities grow and change. After all, there's little point in showing that a non-active member is an expert. It might even encourage new community experts to keep up the great work and remain active longer.

Community experts have a badge shown with their posts, along with the option to follow them. Encouraging new members to follow trusted community members should be a core part of any community strategy.
Settings and control
Of course, not everyone should be labelled as a community expert, and perhaps, in very rare circumstances, an existing community expert could have a bad day and not represent the community well.
Invision Community 5 gives you the ability to set which groups experts can be picked from and offers you the opportunity to block existing experts, ensuring they won't be selected again in the future.

Over to you
All communities have to be purposeful and provide value. That value may be in close friendships, or it may be in getting answers for problems you have. Either way, locating the most helpful members will help develop trust, provide guidance and increase knowledge within your community.
For transactional communities such as support-based communities, experts are vital in providing timely answers and demonstrating credibility and expertise to others.
As always, we'd love to hear your thoughts. Please let us know in the comments.
 

View full blog entry

This is absolutely next level. well done IPS 👏
Great job @Ehren

We have an internal wiki that is quite basic, but we'll eventually get an improved version out to the public (this is a little out of date but you get the idea).

Every IPS client at launch of v5 immediately changing all of their color schemes just to play with the theme editor.  
Nice job with the theme editor controls.  There are so many options to customize the theme.  
I'm personally most excited about mobile views and header controls to control the placement of logos, menus, and breadcrumbs.  Menus and above the fold placement is especially important for a mobile world, and we need to be judicious with how space is allocated.  

Thanks for the feedback everyone!
Thanks mate! Third party designers will be able to release themes which take advantage of all of these features, which almost makes "premade themes" much closer to "custom themes". If you find a theme for sale, but the header positions aren't quite right for example, you'll be able to customize it without asking the designer for custom changes. Win win for both the designer and the customer!
 
The web developer tools built into your browser are likely the best solution here. I'll write up documentation for all of the new components (grid, buttons, etc), but as for the custom CSS editor, there are no plans at this stage to expand it beyond a regular code editor.
 
Yeah, the swatches will come in really handy. It's a much easier system instead of manually trying to allocate light/dark shades manually.
The header background in the intro was added via Custom CSS. I've been thinking of the best way to add an image feature for the header, but making a simple UI for something like that is ironically a very complex task since you also need to cater for the multiple header/nav bars as you mentioned. It's very simple to add using CSS, so at least there's a simple fallback if nothing else comes to mind before the release date 🙂
There are no plans for gradients, but since you seem pretty confident with CSS, you'll have no problems adding them using the code editor 🙂
 
Thanks David!
There certainly is. Snippets are truncated to a maximum of 680 characters for memory - but you can trim that down using CSS line-clamp. One line of CSS can do that for you. 👍

This is absolutely next level. well done IPS 👏
Great job @Ehren

This is absolutely next level. well done IPS 👏
Great job @Ehren

This is absolutely next level. well done IPS 👏
Great job @Ehren

CleanShot 2023-10-19 at 15.29.27.mp4  
 

This is absolutely next level. well done IPS 👏
Great job @Ehren

Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
 
Paragraph 1.mp4
 
To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
Lets take a closer look at the Color Palette.
Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
 
Video 2.mp4
 
You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
 
Video 3.mp4
 
The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
 
Video 4.mp4
 
Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
 
Video 5.mp4
 
After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
 
Video 6.mp4
 
Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
 
Video 7.mp4
 
Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
 
Video 8.mp4
 
A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
 
Video 9.mp4
It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
 
Video 10.mp4
And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
Video 11.mp4
And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
 
Video 12.mp4
 
Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

View full blog entry

Welcome to the second video of our sneak peak series! Today we'll be taking a closer look at the new Invision Community interface, including dark mode, accessibility improvements, performance improvements and the mobile layout! Before we begin, I should mention that this is a pre-alpha version of Invision Community 5, so some areas of the design may change before the official release.
 
New traditional header design
In our previous video, we showcased our new, optional side panel which formats your navigation into a vertical list. For those who prefer a traditional, horizontal header, here it is!

A much more compact header compared to version 4, the new design condenses the navigation bar into a single row, moving all sub-navigation items into dropdown menus. A new, optional area below the text logo allows you to add your website slogan or announce events such as anniversaries or holidays, and our new search modal provides convenient access to the advanced search filters from any page on your community.

 
Accessible interface
The main content area has been designed with accessibility as a priority. High contrast text colours and larger font-sizes help to make reading more comfortable and clickable table rows (which can be enabled or disabled via the Theme Editor) allow you to navigate between pages more easily. A visible focus ring significantly improves navigation for visitors who find it more comfortable to browse with their keyboard TAB key, instead of using their mouse (ie. visitors with conditions such as Parkinson's disease, or those who have temporarily lost function due to a broken arm).
 
Focus.mp4
Elements are highlighted while navigating with the keyboard
 
Dark mode
Dark mode has become increasingly popular over the past few years - so it's no surprise that Version 5 has been designed from scratch with both light and dark mode in mind. With version 4, it was necessary to manage two themes in order to provide a light and dark colour scheme. In version 5 though, all of that is handled by a single theme.
By default, your members will be able to choose their own color scheme preference: either light, dark, or system. System assigns a color scheme based on your system preferences - so if your device automatically switches to dark mode at night, your community will too! With that said, as an administrator, you also have the option to restrict your site to a single color scheme - so if you ONLY want to offer a dark theme, that's easily achieved.

 
 
Performance
Despite all of these new inclusions, the version 5 UI has been coded with significant reductions in both CSS and Javascript. We'll dive deeper into code reductions in a future blog entry, however two great examples are:
- Grids: which have had a 100% removal of Javascript and are powered by only a few lines of CSS, resulting in a faster rendering time, especially for users on slow connections.
- And carousels: which have had a 95% reduction in Javascript and now rely on native browser scrolling, for a much smoother experience on both desktop and mobile!
Additionally we've removed a number of helper libraries that are no longer needed with modern browsers saving even more.
 
Mobile UI
With an incredible amount of mobile visitors accessing the web, we’ve placed a huge priority on redesigning the interface to ensure it lives up to todays standards.
A new navigation bar at the bottom of the page provides convenient access to your activity feed, notifications, messages, a search panel, and navigation links. A conscious effort was made to ensure that this information was available within a single tap, and we found that a bottom bar like this was easier to interact with compared to icons in the header.

The mobile navigation bar from Invision Community 5
 
A goal of the mobile UI was to display elements that were previously only available on larger devices, while still maintaining a clean interface. For example, to improve navigation, we've added a scrollable breadcrumb list to the top and bottom of the page. To improve guest participation, we added Sign In and Sign Up links to the bottom navigation bar. These links were previously hidden within the hamburger menu, so we feel like this will really benefit those looking to improve registrations. And as demonstrated in last weeks video, profile information is now available within posts, comments and reviews on small devices.
We’re really excited for you to literally have a hands on experience with the new mobile interface of Invision Community 5, and we're interested to hear your feedback in the comments!

View full blog entry