MMXII

One of the overarching goals for any community leader is to shine a bright light on your members. Their contributions should be publicly recognized. Now with Invision Community’s new Achievements system... you can!
Achievements is Invision Community’s native gamification system baked into our latest update, 4.6. 
We’ve dreamed up innovative actions for community leaders to publicly recognize members who show up and participate in meaningful ways.
Award Points and badges based on conditional Rules!
Here’s what you need to know...

 

Points
Our Achievements Points system keeps a running tally of Points. Members may earn Points in a multitude of ways. Essentially, it’s achieved by participating in the community. 
Create a topic? Points! Post a reply? Points! Follow another member? Nothing. Just kidding… Points!!!
This is done through creating Rules.

 

Rules
Rules are actionable processes set up in the admin panel. 
Here are what members can earn Points for:
When a...
Member joins a club Reaction is given New poll is created User follows a content item Review is posted Member logs in for the first time that day New club is created Content item/comment is promoted or featured Comment/reply is posted User follows a forum, blog, gallery, category etc User votes on a poll User is followed New content item is posted Post is marked as best answer There are also corresponding When/Then Rules for each item listed above. 
When this action happens, then this subsequent action happens.
Example: when a member posts 10 times, then this Badge is awarded.
 

 
 

Badges
Community leaders can also create specific Rules when deciding what actions earn Badges. 
For example, reward your members with a Badge for visiting your community for 20 days.
Once a member reaches 20 visits or more over 20 days, the Achievements system will automatically award them a ‘20 Visits’ Badge you’ve previously created.
 

 
 
Ranks
In 4.6, we’ve completely revamped our Ranks system to communicate with Achievements. 
Achievements’ Ranks system will replace our previous Ranks system*
Set up different Ranks based on how many Points a member earns. Ranks display a members’ perceived value to the community. The higher a members’ Rank, the greater their influence because the more they’ve participated. 
Ranks are currently for prestige at the moment. 
Here's our example for a pretend Coconut community:
 
 

 

There’s a lot of information to absorb here, but if there’s anything to take away from this blog post it’s this: empower your contributing members with Achievements and watch your community grow. It creates an immersive and elevated experience for your die-hards. And hey, who doesn’t love to earn? 
When 4.6 and Achievements is officially released for all, we’ll hold a live Q&A event for you to join and ask any questions you may have.
Props? Concerns? Comments? Questions? We’d love for you to sound off in the comments! Not only because we want to hear from you, but because it’ll earn you some sweet, sweet Points, too!

Wouldn't it be great to know if a staff member had replied to a topic before you clicked to open it?
When you're scanning a list of topics, knowing which have had a reply by a member of the community team can help decide which to read. Currently, you need to open the topic and scan the posts to see if there's a reply from the team.
Happily, in our next release, we've made it clear which have had a reply by a member of a specific group.
You can specify which groups to show as having replied via the Groups form in the Admin CP.

The per-group setting in the Admin CP
You can select to detect the group based on the member's primary group, secondary group or both.
When viewing a list of topics, you will see a badge showing that a member of that group has replied.

This simple feature will make it easier to highlight when important replies have been made to topics, which is a great addition for forums using the new 'solved' feature.

Let me know below if you'll use this new feature and what you'd like to see in the future.

If you've been around Invision Community for a while, you'll know our frontend default theme hasn't significantly evolved since the early days of 4.0. Indeed, the last significant refresh came with 4.2.
With the upcoming release of 4.5, we wanted to revisit the default theme and give it a facelift for 2020, as well as make incremental improvements to the underlying codebase as a stepping stone to a bigger re-engineering in a future version.
In this entry, I want to talk a little about some of the design decisions that went into building the new theme.
Goals
Redesigning for the sake of it is never a good idea, so we first laid out what we wanted to achieve:
A brighter UI with more saturation & contrast and simpler overall color scheme Improved typography Better, more consistent, spacing around and between elements, especially on mobile Better logical grouping of sections of each page Reducing underutilized links/buttons on the page and finding alternative ways of making them available Improving how post states are displayed Modernizing and enhancing the underlying code that powers the default theme Let's talk a little about each of these.
 
Brighter UI
The most obvious change will be that our default colors are brighter and more saturated than before. Before making any changes, we first created a color scale for both neutrals and the brand color (blue, of course). This gave us a flexible but consistent palette of colors to choose from, with appropriate contrast built in. Neutrals have a touch of blue too to avoid seeming washed out.
We've simplified the style, in particular reducing reliance on background colors to differentiate sections within cards (a card essentially being an ipsBox, for those who are familiar with our framework). Instead, we use spacing, borders and appropriate typography to achieve visual separation.

Brighter default colors
 

Simplifying the UI by removing block backgrounds
 
Improving typography
We've felt our typography has been somewhat muddled for some time - with a mixture of sizes, weights and colors used depending on the particular context.
The first step to improving it was to create a typography scale that we could refer to and implement, to ensure we remained consistent throughout the product.

Our typography scale
(The keen-eyed amongst you may also notice we've switched our default font to Inter. Inter is a fantastic open source font that is ideal for text on the web, and was recently added to the Google Web Fonts project making it super simple for us to incorporate it into our default theme.)
We've been much more deliberate about applying type styles, especially for titles, ensuring that they are always visually distinct from surrounding text. We've done this through both color and weight. As a result, pages should instinctively feel more organized and logical than before.

An example of improved typography, from the Downloads app
 
Improved spacing (especially on mobile)
We identified that spacing (padding and margins) needed some improvement. A lot of spacing values were arbitrary and inconsistent, leading to poor visual harmony across any given page.
Most troubling of all, on mobile sizes we simply halved desktop padding values. While this was a reasonable approach in the days of phones with small screens, it has felt decidedly dated for some time. Phone screens are now typically larger and able to accommodate roomier UIs without appearing comical.
In 4.5, we have done away with that approach, and the impact was immediate. Mobile sizes now get a much more pleasant interface, with elements having room to breathe. In addition, we've also made most cards full-width to provide additional breathing space for content.

Posts can finally breathe on mobile
 
There are numerous other tweaks across the product too: default spacing has been increased a little, data tables (e.g. topic listing) get extra vertical spacing, and spacing between elements has become more consistent.
 
Improved grouping of related elements
Prior to 4.5, most content areas existed inside cards. However, one notable exception to this was page headers and as a result, they could feel particularly disorganized, especially for users who had many controls in this part of the page (such as staff).
To solve this problem, we've developed a new, standardized design for content item page headers, giving them their own cards and consistent button placement.

Topic view header
 
Some areas don't necessarily fit into the same design pattern above. In those areas, we've tweaked styling to suit the context, while still adhering to our overall aesthetic.

Calendar header

Messenger conversation header
 
Reducing underutilized links/buttons
Finally, another area we identified as needing improvement is the abundance of tools, made up of links and buttons, across pages. Many of these are only used occasionally and so would be better moved out of the main view to simplify the page.
Two particular areas we focused on were share links and postbits (both forum posts and comments in other apps).
Research shows social share links are used by a vanishingly small percentage of users, so even though they were at the bottom of the page, it was unnecessary to make them so prominent (given their eye-catching colors). To solve this, we've added a share link to the page header, with the social network links themselves in a popup menu. The result is ideal: sharing functionality is unobtrusive but obvious.

Share links in content items
Comment areas have also suffered from 'button creep' over the years. A typical comment will contain a report link, a share link, a quote link and multiquote button, reactions, plus IP address, checkbox, edit and options links for certain users. That is a lot of visual noise around the important part: the content.
We've therefore simplified comment boxes as much as is reasonable. Reporting and sharing comments/posts is now available in the post options menu, as are any tools for the author/staff. Quoting and reacting are two primary interactions for users, so they of course retain their position in the control bar.

Simpler postbits, even for staff
 
Improving post states
Posts/comments in Invision Community can have many states - sometimes more than one. Posts can be hidden/unapproved, popular, recommended, solved (new in 4.5!) or highlighted because of the author's group. It's always been a challenge to indicate these statuses well.
In previous versions, we added a border but the most prominent indicator was a flag in the top-right corner of the post. This had three problems:
Due to the lack of space (thanks to report/share links), showing more than one flag was difficult. Showing any flags on mobile was messy because of the space constraints. The meaning of the flags was not obvious, especially to new users. Group-highlighted posts had no flag, just a border, which made them even more difficult to understand. With the top-right corner of posts now tidied up and free from fluff, we were able to much more effectively use this space to indicate post statuses.
In 4.5, posts and comments will show badges when they have a particular status, as well as a more attractive semi-transparent border. For group-highlighted posts, we show the group name instead (the colors of this highlight are still controllable via theme settings).

A post with two states: group highlighted and popular
This works much better on mobile too, where the status badges get the prominence they deserve:

Mobile post statuses
 
Modernizing the underlying code
I wrote about the technical improvements behind the theme in a previous entry. If you're a theme designer or edit the theme for your own community, go and check it out now!
 
Wrapping up
As well as these large-scale concepts, you'll notice many other smaller enhancements as you start using the new theme.
I've shown some snippets of pages in the screenshots above, but I've included some full-page views below so you can see the overall aesthetic and how these pieces fit together.
Modernizing and refreshing our default theme has been needed for some time, but we view this as just a stepping stone to future work that will be reserved for a major version bump, and we're excited to figure out where we go next.
 
Screenshots
  
Desktop forum views (click to expand)
 
    
Mobile forum views (click to expand)
 
 
Activity streams & messenger (click to expand)
 

A topic is more than a collection of posts; it's a living entity that ebbs and flows over time.
Evergreen topics can see month-long gaps between posts and longer topics spanning numerous pages can end up hard to navigate through to find useful content.
With this in mind, we've added numerous improvements to the topic view to bring context and summaries key areas within the topic.

Topic view updates
Topic Activity
The first thing you likely spotted in the above screenshot is the new sidebar. This acts much like a summary of activity within the topic. It very quickly lets you know how old the topic is and how long it has been since the last reply. This context is essential if you are unwittingly replying to an older topic.
Most topics are driven by a handful of key members. The topic activity section shows you who have been most active, which may influence which posters you give greater authority to.
Likewise, popular days lets you dig into the 'meat' of the topic which may have evolved quickly over several days.
More often than not, a single post attracts more reactions if it is particularly helpful or insightful, and this is shown too.
Finally, a mini gallery of all upload images allows you to review media that has been attached to posts.

The topic activity summary under the first post
This activity bar can be shown either as a sidebar or underneath the first post in a topic. If you enable it for mobile devices, then it will show under the first post automatically.

The topic activity summary on mobile
As with many new features in Invision Community, you have several controls in the Admin CP to fine-tune this to your communities needs.

AdminCP settings
Other improvements
The eagle-eyed among you will have spotted a few other changes to the topic view.
The first is the badge underneath the user's photo. The shield icon notes that this poster is part of the moderation team. Of course, this badge can be hidden for communities that do not like to draw attention to all their moderators.

You will also notice that when the topic starter makes a reply to a topic, they get an "author" badge as their reply may carry more authority.
When you scroll down a topic, it's not often apparent that there has been a significant time gap between replies. For some topical topics (see what I did there) this may alter the context of the conversation.
We have added a little identifier between posts when a period of time has passed between posts.

These changes add a little context to the topic to give you more insight into how the replies direct the conversation.
The new topic activity summary gives you an at-a-glance overview of key moments and posters to help you navigate longer topics.
We hope that you and your members enjoy these new features coming to Invision Community 4.5!

Every single day, your members are searching your community for answers or interesting conversations to join.
Wouldn't it be great if you could learn what is being searched for to identify hot issues, commonly asked questions and discover trends?
We thought so too, which is why Invision Community 4.5 comes with search statistics.
For the first time, Invision Community gathers anonymized information on what your members are searching for so you can use this to highlight more relevant content and shape strategic decisions with your community's structure.

Search statistics help you track searches performed on your community
When a member searches, their identity is converted into a unique key that cannot be reversed to identify the member. This allows us to track a single member's search usage over many search sessions without being able to link it to a specific member account.
The AdminCP now features a dashboard to review the most popular search terms as well as a raw log of recent searches along with the results they returned.
We have a lot of ideas in mind for additional changes down the road with the tracking of popular search terms, but for now, we hope you like the new statistics page and find the information presented useful for your future site plans.

It might seem a little odd starting a blog on increasing Invision Community's speed with the word "lazy",  but I'll explain why this is a good word for performance shortly.
Earlier this year, Google announced that page speed is a ranking factor.
Simply put, if your site is slow, it will be ranked lower in Google's search results.
It is always a challenge making a large application like Invision Community as efficient as possible per page load. A single Invision Community page can pull in widgets from multiple applications as well as a lot of user-generated content with attachments, movies and images used heavily. 
This is where being lazy helps.
Lazy loading is a method by which attachments, embeds and images are not loaded by default. They are only loaded when the viewer scrolls down enough to make them visible.
This allows the page to load a good deal faster now it doesn't have to load megabytes of images before the page is shown as completely rendered.
I was going to take a fancy video showing it in action, but it's hard to capture as the system loads the media just before you get to it, so it looks fairly seamless, even with sluggish connections.

Not the most dynamic image, but this shows the placeholder retains the size of the image
In addition to image attachments, we have also added this lazy loading to maps and Twitter emoji images.
Improving non-image attachments
Once we had implemented the lazy loading framework, an area we wanted to improve was non-image attachments.
We have listened to a lot of the feedback we had on this area, and have now made it very clear when you add an attachment into a post. We've even returned the download count now it's being loaded on demand.

Using attachments when posting
All the letters
When we first implemented the letter avatars in 4.3, we discussed whether to use CSS styling or use an image.
We decided to go with an image as it was more stable over lots of different devices, including email.
We've revisited this in 4.4, and switched the letter avatars to SVG, which are much faster to render now that the browser doesn't have to load the image files.
Other performance improvements
We've taken a pass at most areas with an eye for performance, here is a list of the most significant items we've improved.
Several converter background tasks have been improved, so they work on less data Duplicate query for fetching clubs was removed in streams Notifications / follower management has been improved Member searches have been sped up (API, ACP live search, member list in ACP, mentions, etc.). Stream performance has been improved UTF8 conversions have been sped up Elasticsearch has been sped up by using pre-compiled queries and parameterisation, as well as the removal of view filtering (and tracking) HTTP/2 support with prefetch/preload has been added Several PHP-level performance improvements have been made Implemented rel=noopener when links open a new window (which improves browser memory management) Several other performance improvements for conversions were implemented that drastically reduce conversion time IP address lookups now fetch IP address details from us en-masse instead of one request per address Cache/data store management has been streamlined and centralised for efficiency Many background tasks and the profile sync functionality have all been improved for performance Brotli compression is now supported automatically if the server supports it Redis encryption can now be disabled if desired, which improves performance Phew, as you can see, we've spent a while tinkering under the hood too.
We'd love to hear your thoughts. Let us know below!
This blog is part of our series introducing new features for Invision Community 4.4.

This month, we ask the team the age-old question: If you won a million dollars (or denomination of your choice), how would you spend it?
The question was almost guaranteed to bring a raft of hilarious replies that showcase our amazing humour and wit.

Once again, we fall short and instead worry about taxation and retirement.

You can't give it away these days.
Marc S
I couldn't decide on whether to answer this with what I would 'like' to do with it, or what I would actually do with it, so figured I would answer both. [So you just upgraded to $2,000,000? geez - Editor]
If it was just what I would like to do with it, then I would probably follow the F1 season around the globe for a few years until I got bored. I'm very much into the sport, and with the locations, it would make for some great destinations to visit in between the races.
What I would actually do is pay off my mortgage, buy another 3 reasonably priced houses to rent out to others, and live off the investment. Given I would then have a constant income without doing much, I would then try my hand at starting a business. Not entirely sure what that business would be to be honest [How to understand people with strong accents? - Editor], but I'm not the kind of person who would be able to just retire, without it driving me to insanity.

I know nothing of F1, so hopefully this is OK

Jennifer
Pay off all of my debts. Buy a house. Put away some in a nice savings account both for me and my kiddos. Buy a serious amount of shoes, and get a few cosmetic tweaks.

Who doesn't love shoes?

Brandon
If I had a million dollars, I'd pay off debts, stash some money away for savings and to have a healthy cushion [You give your soft furnishings a health check? - Editor], and I'd probably use a good chunk of it for travel. There are a lot of places I'd like to see in the world still and travelling is expensive.

I’d like to visit some of the top touristy spots in South America, like Rio, Galapagos islands, Peru, Machu Picchu, etc. I’d like to see Australia, Japan, China, Alaska, the northern lights in the Arctic, and I would like to make it back to Europe at some point, particularly to see more of Italy and visit Greece.

It's where we first met.

Daniel
I’ll go with my sailing boat dream which is still is a thing for my retirement, but if I would get tomorrow $1,000,000 I would do it right now too. [How? You're not getting the money until tomorrow - Editor]
Get a Katamaran and sail sail sail... depending on time and budget and people.. mediterran sea, caribbean sea, then around South America, US west costs , Hawaii, Philippines , India. Around Africa .. back to Mediterran Sea.

Stuart
If I had $1,000,000 tomorrow, I'd probably be fairly sensible [Boring- Editor] by paying off the mortgage and spending some cash on finishing renovating the house. Then I'd buy either a Mustang GT or a Tesla Model 3 Performance (I know, one is an eco-machine and one is a gas guzzler!). The remainder I'd split between savings and stock market investment.

Mark H
A million dollars….. well, the government takes about 1/3 of that first off, so after taxes you get ~ $650,000. With that I’d pay off the house and credit card, buy a reliable vehicle, then the rest goes in the bank. Would not have enough to retire, even at my age. [It wouldn't last 2 years? - Editor] But it would eventually make retirement easier.


The fun answer.
Jim
I would pay off my mortgage, buy a 2019 Corvette ZR1 (plus pay off following speeding tickets) and probably go to Australia. Then save the rest for a rainy day or you know, retirement.

Mark W
I live in Sydney, so probably buy a small apartment and carry on as normal. [How small is your current apartment? - Editor]

Good day.
Matt
I'm not a huge fan of travelling, but I'd like to see a little bit more of the USA. I've been to Los Angeles, Nevada, Las Vegas, New York and Virginia but I'd like to see more of the middle bit too. Definitely Miami and New Orleans. [Dude, you need to check a map to see which states are in the middle - Editor]

I love my work too much to think about retiring but I'd put some away for when I do.

I might give some to my family if they ask nicely and are reading this (hopefully they are not).

Yes I can.

Andy (Andy did not contribute this month, so this reply is 100% fictional)
I'd be too depressed with the massive income drop to think about how to eek out such a pittance.

Lindy (Lindy never contributes, despite being threatened with a fabricated answer)
I'd probably invest in a gas-tech company, buy more cars I'll only drive 3 days a year and spend the rest in Vegas.

Charles (Charles also never contributes, so this is also fabricated)
Please do not say funny things about me.
Charles also has edit permissions to this blog.

So there you have it, that's how we'd choose to spend a cool $1,000,000.

We'd love to hear how you'd spend your imaginary windfall.