Colombia Humana

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!

2021 was a big year for Invision Community. 🎉 
We launched no-code automation with our Zapier integration, added web push notifications, offline support, stock replies and new reporting metrics.
We also improved spam management, SEO crawl efficiency, Clubs, Activity Streams and introduced a native gamification system named Achievements.
Not to mention the team grew! 👋  @Matt Finger @Marshall Slemp (and me 🙋🏼‍♂️).
We have lots to look forward to in the new year, but before we reveal more let's take a trip down memory lane. 
2021 was one of our best-performing years ever! Here are some highlights:
 
Community Activity 2021
We saw an influx of members contributing to our community support forum. 3,832 members submitted new content, followed something, or reacted to something in the community.
 

 
 
Points earned:
Thanks to the introduction of the Achievements system, members had the opportunity to earn points for contributing to the support community. In total, the community racked up 361,363 points. 📈




 
Topics created:
Members fired off more than 4000 topics, including questions, feature suggestions and community management tips. 😳 



 
New posts:
Inside those topics included an array of replies. 31,488 posts to be exact. 😱 


 
 

Top 10 members with the most amount of Reactions given:
Members also engaged with the community using our Reputation system (think of it as our "likes" 👍 system). Here are the top 10 members who gave the most Reactions. 


@sobrenome @Jordan Miller @SeNioR- @Linux-Is-Best @OptimusBain @Matt @Adriano Faria @Davyc @Marc Stridgen @Unienc
 
Top 10 members with the most amount of Reactions received:
If a member's topic or reply is well received, it earns Reputation using our Reactions system. Here are the top 10 members who received the most love. ❤️ 



@Matt @Adriano Faria @Nathan Explosion @CoffeeCake @opentype @Marc Stridgen @Daniel F @Davyc @Jimi Wikman 
 
Members who earned the most badges:  
Participating in the community also earns members special badges. You get a badge and you get a badge! ✅ 
 

@CoffeeCake @TAMAN @opentype @PPlanet @SUBRTX @Sonya* @Afrodude
 
Top Marketplace contributors:
Shout-out to our crazy talented third-party developers who take time out of their busy schedules to innovate and create downloads for other Invision Community clients to use! Here are the top Marketplace contributes: 
 

@Nathan Explosion @Michael.J @Miss_B @IBTheme @Kirill Gromov @ReyDev @Adriano Faria @shahed 
 
 
 
Most active forum:
You have questions and we have answers. Our support system shifted to our help & support forum and it paid off big time! 
 

 
 
Thanks to everyone who contributed to making Invision Community a better place. Whether you're an active poster in our community support forums, or a customer who lives to learn and absorb, we greatly appreciate you. Cheers to the exciting ventures on the way in 2022! 🎉 
 

Invision Community's latest update, 4.6, is officially out! 
To celebrate, we hosted a live event on Zoom.
I, alongside two of the three Invision Community co-founders @Charles and @Matt (shout-out to @Lindy) sat down for a roundtable talk to chat about some of the slickest features 4.6 has to offer.
If you'd like to refresh your memory with exactly what features we implemented in 4.6, check out our detailed blog post (after you're done watching our live event above, of course). 
It includes:
Achievements Spam Improvements Health dashboard Web app and push notifications Anonymous posting Solved content Show when a team member has replied
Did you catch the low-key Smart Community announcement? 🙃

We also wanted to take the time to answer a few questions we received during the live event that we couldn't get to in the moment.
Question: regarding the anonymous posting... is it completely anonymous (like no record is stored of who posted it) or is just a pseudo thing, like it shows "anonymous" but admins/mods can see who posted it?

Answer: The community owner can choose whether moderators can see the true identity of the user. This uses the built in moderator permissions so they can have it so all moderators, just specific moderators or nobody can see this info.
---
Question: Is the translation service be hosted by IPS or do we need to use Google or Bing services on our community?
Answer: It will be a turnkey service provided by Invision Community.
---
Question: Does Achievements show how many x Points are left to the next level?
Answer: Yup!

 
---
Question: When will Smart Community be available?
Unsatisfying Answer: We are excited to share more details on Smart Community soon!
---
We appreciate you participating / watching our first-ever live event. We're planning on doing more, so keep an eye out for the next one.
Thoughts? Comments? Questions? Concerns? Drop us a line in the comments!