IPB 4.5: features (Invision Power Board)

[Invision Power]

Invision Community has come a long way over the past five years.

We've added many new features and invigorated the front-end user experience to keep it current and in-line with modern interfaces.

One area that has remained largely the same is the Admin Control Panel.

When we released Invision Community 4.0 back in 2014, the Admin Control Panel was updated but has stayed relatively dormant since.

But that's all about to change with the upcoming release of Invision Community 4.5!

The Admin Control Panel in 4.5 has received a substantial update, resulting in a modern color scheme and a clean, minimalistic design.

We felt that a lighter, more open design allowed the content more space and to feel less crowded. 

The dark grays have been replaced with shades of blue and aqua which closely reflects Invision Community's new branding, while other colors have been lightened and saturated.

Along with the new color scheme, the overall layout of the ACP has intentionally been kept similar to the existing version, resulting in a design that feels surprisingly familiar yet refreshingly new at the same time.

We hope you've enjoyed this small sneak peek into Invision Community 4.5 and we look forward to introducing you to some more new features in the upcoming weeks!

View the full article

[Invision Power]

Without a doubt, clubs is one of the most popular features added to Invision Community in recent times.

Invision Community clubs allows you to run sub-communities on your site. We've seen clubs used in many ways, including managing geographically local groups and clan groups for large gaming sites.

This popularity drives us to keep incrementally improving the feature set for clubs, and Invision Community 4.5 is no different.

One thing that was raised many times was a way for club owners and leaders to create simple pages with general information members need.

Happily, in Invision Community 4.5, this feature now exists (and more!)

In addition to the title and visual editor that allows full formatting of the page content, there is an additional visibility setting which allows owners and leaders to define which types of members can view the page.

This is perfect for showing a page that is only visible to non-members which informs them how to join the club.

Likewise, it is a great way to display moderation guidelines to the club moderators only.

Of course, owners and leaders will always be able to see all pages added to a club.

Additionally, once a page is added to a club, a tab will be added alongside others, and the page can be re-arranged just like the rest. 

Using this, owners and leaders can create an alternative unique index page for the club.

This is just one of many club improvements finished for Invision Community 4.5. We'll be talking about these in a future blog!

View the full article

[Invision Power]

You'd be forgiven for thinking that RSS feeds belong in some bygone era of the web where Netscape was king and getting online meant listening to your modem scream at your phone line.

There's certainly a lot of newer web technologies to share data, but the venerable RSS feed still has a place.

Invision Community has supported RSS feed importing and exporting for a very long time now; however, it has been restricted to just Forums and Blogs.

Importing an RSS feed is a simple way to populate content on your community. It's even a great way to share content to and from your site without creating blocks or writing custom code.

Invision Community 4.5 now centralizes RSS feed importing, so it is available for Forums, Blogs and Pages.

You can now choose to import an RSS feed to any Pages database. Better yet, there is now full support for image enclosures.

RSS feeds have a special tag to note that the feed entry has an attached image. Lots of RSS feeds use this, such as the NASA Image Of The Day feed. Until now, this image has just been silently discarded.

Now, it is imported as an attachment (so it can be moved around in the post or Pages entry). If the Pages database you are importing to has record images enabled, you can optionally import the enclosure as a record image which some template sets can use as a header image, just as our blog here does.

But what about exporting enclosures?

Happily, Invision Community 4.5 can now export the main content image of an item as an enclosure. This certainly makes the Gallery RSS feed export a lot more useful!

While these updates are not revolutionary, they certainly make RSS feed importing and exporting much more useful. We've been asked to support RSS feed importing into Pages for quite a while now.

What do you think of these changes? What will you import into your Pages databases?

View the full article

[Invision Power]

Invision Community has supported member referrals via the Commerce app since Commerce was called Nexus all those years ago.

Community owners have been able to see at a glance who is spreading the word and members have received the kudos associated with a growing referral count in return. 

When planning Invision Community 4.5 we saw that this feature had the potential to be so much more… So what have we done to improve it?

See Who Was Referred

In addition to seeing a count of referrals, it’s now possible for both admins and members to see who they referred. If Commerce is enabled admins can also see how much commission (if any) was earned. 

The new referral settings page shows links, code snippets and who you've referred

Member Promotion

Seeing a rising count of who has been referred gives members a great feeling of community involvement but wouldn’t it be great if you could reward your members in other ways too? 

Referral counts now work as a member filter when using the group promotion feature.

You can now automatically promote members that have referred more than a specific number of members to another user group and give them access to exclusive content. This still works alongside paid subscriptions so be another method for members not willing or able to pay for subscriptions to get access.

Integration With Sharing

If the feature is enabled, any time a link is shared via the built-in share links, referrals will be tracked. This occurs automatically without the member needing to think about it. It’s now easier than ever to see who your superfans are and who is bringing new people to the community.

Blocks

As well as the default share links we have added a new sidebar block that can be added anywhere across your community. This prominent call to action can be added on pages you think are most likely to result in recommendations.

The new "Invite a friend" widget

Given that referral capabilities have been expanded into many more areas outside of Commerce we decided that this should now be available as a core feature. Earning commission on sales as a result of referrals will still, of course, require Commerce to be installed.

We hope that these are welcome improvements and they help you encourage more members to participate in your community.

View the full article

[Invision Power]

Almost every single day, we receive feedback on our popular clubs feature. Some of the requests are big in scope, and some a little smaller.

Following on from our previous blog entry for Club Pages, we’re pleased to announce a collection of smaller, but no less useful improvements.

Improved Map Display

The Clubs location map better shows where local clubs are

A small but useful change to the clubs map means the view is now centered and zoomed around available clubs. Previously the map would show a world view even if all of the clubs were located in a concentrated geographical area.

Member Tab

A commitment to privacy always influences our development decisions, and this is true in clubs as well as other areas. It is now possible to set who can view the club member list on a per club basis. Clubs can be set to show the member list to everyone, only to club members or only to club leaders and moderators.

You can now decide who can see your club

Club Widgets

A common request for clubs is that widgets should be able to display content from within clubs. With 4.5, this is now possible and allows you to better bring attention to your club content from anywhere in your community.

Content widgets can now show club specific content

Some people wanted to control where widgets would show more finely. This wasn’t previously possible, but now it is. When adding widgets to a page, you can now set whether you want it to appear everywhere, everywhere except clubs, or only in clubs.

Join Requests

Club leaders can invite members who they believe will enjoy their content to join. Likewise, members can request to join a club that is not open for all to join instantly.

For a site with a lot of clubs, this could mean that you are invited to many clubs or find that your pending request goes unnoticed.

Your member can quickly manage their pending invites

Members can now cancel pending requests themselves quickly and easily from the Club homepage.

Clubs are becoming an increasingly popular part of Invision Community and really helps foster a sense of involvement.

We are always interested and surprised by the variety of ways this feature is being used. Let us know how you’re using clubs in the comments and keep the great suggestions coming!

View the full article

[Invision Power]

Ever since Invision Community 4.x was launched you have been asking for the ability to categorize blogs in your community.

We heard you load and clear, but sometimes when a feature sounds straightforward, it requires some re-engineering of the framework. Because users in your community can create both blog entries and their own blogs to hold these entries, this was one of those areas.

Starting with Invision Community 4.5 I’m pleased to announce that it is now possible for blog authors to categorize their blog entries and it's now possible for administrators to categories blogs.

Blog Entry Categories
When creating a new blog entry, your members will now be able to create a new category for the entry or choose an existing one that had been created previously.

Choosing your category when creating a new blog entry

When a reader then visits the blog they can choose to display only those categories that interest them.

Filtering by category

Blog Categories
Running a community where users can create their own blogs, you don’t only need to make sure individual pieces of content are categorized correctly, you also need to make sure the blogs themselves have a logical place. Well guess what? Now you can!

As an admin you can now set up predefined categories in the control panel and Blog authors can then choose which one to create their new blog in.

Managing blog categories

We realize some of you have been waiting a long time to see these changes so we hope you enjoy this and everything else to come in Invision Community 4.5!

View the full article

[Invision Power]

We have come a long way since the late 90s when someone had the genius idea of using a small yellow smiling face image instead of the more common colon-bracket representation of a smiling face.

In Invision Community, there are various places that photography can be used to create visual interest. From uploads in topics, to cover photos for blogs and members.

The humble upload field has served these areas well, but sourcing images to use can be a pain; especially when you have to walk the minefield that is copyright and attribution.

Fortunately, there are a few "CC0" online stock photo libraries that offer quality photography that requires no attribution and are not hampered by copyrights.

One such library is the ever-popular Pixabay, which was established in 2012 and features a very powerful API. Pixabay has over a million images ready to use from llamas to sausages and everything in-between.

Invision Community 4.5 now includes support for Pixabay which brings those images to your fingertips (or mouse pointer if you're on a desktop.)

This video shows the feature in use.

As you can see, not only can you upload into posts from the stock photo library, but you can also use it to add a cover image to your profile and blog entries.

Finding quality photography has never been so easy!

For those that love technical details, the stock photo picker is a programmatic option on the upload form field type making it very easy to add to your own code and apps.

How will you use this new feature? Let me know!

View the full article

[Orioni]

OMG! 😱 This would be so helpful to illustrate stories! No more worries about whether or not an image will lead to copyright claims. (Because I really hate dealing with those emails.)

[Invision Power]

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.

View the full article

[Invision Power]

Although we continuously review security within Invision Community, a major release such as 4.5 allows us to be especially proactive when it comes to keeping your community safe.

This blog entry outlines several enhancements to improve security in Invision Community 4.5.

Password Handling
Keeping your member's passwords secure is the simplest way to keep accounts safe and out of the wrong hands, so it makes sense to look at ways to ensure this doesn't happen.

Invision Community already uses strong one-way hashing when storing passwords, which means that once the password is stored in the database, there is no way to know the plain text version.

However, when creating a new member account via the AdminCP, a random password was created, and this was sent in the welcome email to the new member's email address.

As of Invision Community 4.5, this no longer happens, and the new member is invited to create a new password when visiting the community for the first time.

Part of your internal security procedures might be to force a reset of all passwords periodically. Invision Community 4.5 allows this on a per-member basis, or via a selection of filters to enforce a reset for many members at once.

This clears out any stored password hashes and emails the affected members to remind them to set up a new password.

AdminCP Security
The Admin Control Panel contains the most powerful tools available to Invision Community. This is already a very secure area with a separate login with an option to add two-factor authentication to the login flow.

Part of the session authentication has been a special key in the URL. While we have protection in place to prevent this special key being discoverable by a malicious user, there remains an incredibly remote theoretical chance that this could happen with a series of complicated steps. There was an additional annoyance that you are unable to share links within the AdminCP to members of your team due to the increased protection to keep URLs safe.

As of Invision Community 4.5, we have removed the special key from the URL and moved it elsewhere in the session authentication flow. This means that it's impossible to fetch the special key via the URL and links can now be shared and will survive a login action.

Text Encryption
There are a few areas within Invision Community that we use text encryption to allow us to save data in the database in a format that is encrypted when saved and decrypted when read. This protects you in the incredibly remote event of your own hosting being compromised and your database downloaded (of course, our Community in the Cloud customers do not need to worry about this!)

Invision Community 4.5 improves on this encryption by using PHP's built-in methods which give "bank-level" security to our encryption.

Security is critical to the success of your community, and we are always proactive in improving security throughout Invision Community.

Do you have any comments on this entry? Let us know below!

View the full article

[Invision Power]

Statistics can help you manage and monitor the direction of your community, giving you valuable insight into how your visitors are interacting with your site and what areas of your community deserve the most of your attention. With the popularity of Clubs in Invision Community, we determined that some statistics aimed at helping administrators review how this feature is being received by their end users were warranted.

Club activity statistics overview

When accessing the "Club Activity" statistics page in the AdminCP, you will be able to quickly see at a glance which club types are the most popular, see which clubs are gaining the most traction with new signups, and see trends in club creations over time. With the signups chart, you can further filter by one or more specific clubs, and save these filter preferences as new tabs on the chart.

See activity across all clubs

The "All Club Activity" tab on this page shows you which types of content (topics, images, files, etc.) are most popular across all clubs as an aggregate. If you find that Calendar or Downloads is especially popular throughout clubs then you may wish to promote these features further. Conversely if you find that a certain type of content is not being leveraged, you may wish to promote it, or retire its functionality on your community.

Activity by club shows you which clubs are most active

You can also view activity per-club, allowing you to identify which of your clubs are the most popular and have the most activity. As with the "Club signups" chart, you can use filters to view just the clubs you are interested in comparing, and save these filters for easy review later on.

 

We hope you find value in these new statistics pages, and that they help you manage the Clubs feature on your site more effectively.

View the full article

[Invision Power]

Invision Community has certainly changed a lot over the years as we've moved through major updates and large user interface changes. 

While large scale changes offer a dramatic difference, it is sometimes the smaller changes that bring the most satisfaction when using your community daily.

This blog entry rounds up some of the UI improvements Invision Community 4.5 brings.

Content View Behavior
What do you want to happen when you click a topic link? Are you taken to the first comment, the last comment or the first comment you've not read? If you speak to 100 people, I'm pretty sure you'll get a good spread of votes for each.

Invision Community has always offered subtle ways to get right to the first unread comment. Our infamous dot or star allows you to do this, but it is so subtle almost no one knows this.

Invision Community 4.5 now allows each member to choose (with the AdminCP offering a default).

Now everyone wins!

Who Reacted?
Invision Community has had reactions for a long while now. Although finding out who exactly reacted without clicking the counts has proved irksome.

We've fixed that in Invision Community so simply mousing over the reaction icon reveals who reacted.

Sign In Anonymously
For as long as I can remember, Invision Community has offered an option to sign in anonymously via a checkbox on the login form.

However, as we've added faster ways to log in via Facebook, Twitter, Google and more it's become less straight forward to ensure your anonymity.

Invision Community 4.5 removes this login preference and moves it to your members' settings.

Now your members can resume hiding as they move around your community across multiple logins.

Resize Before Uploading
One of the most popular requests we've had in recent times is to resize large images before uploading. It's quite likely that your giant full resolution image will be denied when attempting to upload, and it's a bit of a faff to resize it in a photo editor.

Invision Community leverages the uploader's ability to resize before uploading, which makes it a much happier experience.

Switch Off Automatic Language Detection
Invision Community attempts to map your browser's user-agent to a specific language pack.

When you visit a site, your browser lets the site know which language our browser is set to (often dictated by your operating system) and we use that to show you the correct language if the community you're visiting has multiple languages installed.

However, it might be that you don't want this to happen because although your computer's OS is set to a specific language, it doesn't always follow that is the one you wish to use on a website.

Invision Community 4.5 allows this automatic detection to be switched off.

Quote Collapse
We will finish with another popular feature request; the ability for long quotes to be collapsed, reducing the amount of scrolling one has to do.

Quite simply, Invision Community collapses long quotes with an option to expand them to read the entire quote.

Thank you to all our customers who have taken the time to leave feedback. As you can see, we do listen and action your feedback.

Which change are you looking forward to the most? Let us know below!

View the full article

[Invision Power]

One of the benefits of using Invision Community as your community platform is that you control and own your data.

There are several ways to review this data. One of which is via the Admin Control Panel which offers a suite of statistic views which helps to convert the raw data into something easily understood.

However, it's not always easy to determine trends and community sentiment from these singular views.

Invision Community 4.5 adds two new interactive views for user and activity statistics.

This new 'overview' view not only shows you a snapshot of your community but also allows you to compare time periods. In the video, you can see that I select different date ranges, such as "three months". This shows you the data of that time period, and also compares it against the previous three months.

In this example, you can clearly see that we have 50% more registrations and 33% more contributors compared to the previous three month period.

Likewise, in this example, you can clearly see that we have a 1200% increase in reactions given with a clear breakdown of the type of reaction given to help understand community sentiment.

These interactive displays automatically update, so if you are so inclined, you could leave the statistic pages open and watch as the data changes live.

We hope that you find these new views useful in identifying trends and help to inform strategic decisions within your community.

View the full article

[Invision Power]

Notifications are a crucial feature in enticing members back to your community to read updates and post their replies.

It makes sense that there should be as little friction as possible when setting up notifications. We want to encourage members to enable notifications relevant to them.

The current notifications form in Invision Community is functional but overwhelming and confusing for new members.

Thankfully, we have simplified it to make it clear what notifications are available and which you have enabled currently.

This new settings page also includes support for our new mobile app and links to remove all email notifications.

Notification Emails
Notification emails are essential to re-engage a member. However, we found that when the email contained all of the post content return visits were not as frequent because the email provided all the information the member needed.

In Invision Community 4.5, we've added an option to truncate the content of the email to encourage curious return visits and to reduce the chance that a confused member will attempt to post a reply via the email!

What does the rest say?!

Download's Notifications

To receive notifications of new file updates it was previously necessary to follow files. This meant that you would also be notified of reviews and comments even if they were of no interest to you. From 4.5 we have added a separate button (send me version updates) so you have more control over the notifications you receive. 

Send me version updates

We've plenty of new features yet to announce for Invision Community 4.5, but improvements to common features make our lives a little easier and are just as welcome!

Are you looking forward to finally making sense of notification choices? Let us know below!

View the full article

[Invision Power]

Invision Community has had a question and answer mode for a good few years now.

This mode transforms a forum into a formalized way to handle your member's questions. Members can upvote answers, and the topic starter and your community management team can mark a reply as the "best answer".

This is great when you want to add rigour to specific forums which encourage your members to find solutions.

The existing "QA" mode

But how about a way to mark a topic as solved without transforming the look and feel of the forum?

We get asked this a lot.

Happily, it's now a feature just added to Invision Community 4.5! Those with a long memory will recall we had something very similar way back in Invision Community 3.

The new "mark as solved" feature

This new feature allows the topic starter or your community management team to mark a post as the solution. This highlights the post within the topic as well as adding an icon to the listing views. 

The green tick notes that the topic has a solution

In addition, it also increases the member's solved count, which is displayed under their name in the post and even in a draggable widget that shows members with the most solutions. We have also added a new filter to the existing post and topic feed widgets to allow only items with a solution to be shown, so you can create a "Recently solved" feed.

The new widget

Finally, a notification is sent to the author of the post that is selected as the best answer, so they're made aware that their helpful content has been spotted.

Let your members know their content was useful

We hope you enjoy these changes and look forward to allowing your community to find answers quickly, and to reward the members that provide them.

View the full article

[Invision Power]

A short while ago we revealed the new look Admin CP for Invision Community 4.5. The focus was on increasing the workspace, brightening and modernising the look.

However, for some this new look was perhaps a little too bright, especially when setting your OS to use dark mode.

Rather than cause an increase in sales for sunglasses, I went ahead and implemented a dark mode for the Admin CP.

You can set it to work inline with your OS preference, or you can choose to enforce light or dark mode.

I'm sure the next question you're about to ask is "Hey Ehren that looks amazing and now working at 3 am won't wake up the neighbours when I log into the AdminCP but can you do the same for the front-end?"

The answer to that is "no". Front-end themes are more complicated, so creating a light and dark mode would be largely ignored by most third-party theme authors. Our marketplace has a great selection of dark mode themes already.

I hope that you like this little feature addition and I just wanted to say thanks for all your feedback; we do listen!

View the full article

[Invision Power]

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!

View the full article

[Invision Power]

Zapier is a service that allows you to connect over 2,000 web apps. In Invision Community 4.5 we are launching a beta service of Zapier integration for Invision Community in the Cloud.

What does Zapier do?

Zapier acts as a bridge between Invision Community and other apps, such as Google Docs, Twitter, Facebook, Slack, Trello, Facebook Ads, ActiveCampaign, Zendesk, Asana, Salesforce, Hubspot, Discord, Stripe and more. Zapier has over 2000 apps registered currently, and that number grows every single day.

Let us look at a real life example.

Right now, if you wanted to add a member to a Google Sheets document each time a new registration was completed, you'd need some fairly complex code to be written that was "triggered" by this registration event. This would take days to write at some cost.

Zapier simplifies this by allowing you to connect Invision Community with Google Sheets without needing a single line of code. Zapier allows you to streamline your workflows in minutes.

Zapier has two types of events, triggers and actions.

Triggers

When a certain thing happens on Invision Community, like a member registering or a topic being posted, a trigger can be sent to Zapier to then run actions in other apps. For example, you might create a zaps to...

• When a member registers, add their email to a Mailchimp list.
• When a moderator posts a topic in a news forum, share it on Facebook, Twitter and other social platforms.
• When a member posts something that requires moderator approval, send a message to a Slack channel for your moderators.

Invision Community Integration with Mailchimp through Zapier

Actions

You can also set up Zaps so that when something happens in an external application, it triggers an action in your Invision Community. For example, you might create a zaps to...

• When you add an event in a Google Calendar, create a Calendar Event on your community.
• When you receive an email to a feedback email address, create a topic on your community in a forum for moderators.
• When you create a task in Trello, add a record to a Pages Database on your community.

Invision Community Integration with Google Calendar through Zapier

Self-Integration

In addition to using Zapier to integrate with third party services, you can also connect an Invision Community trigger to an Invision Community action. For example: when a member registers, create a topic in a welcome forum.

Self-Integration through Zapier

Frequently Asked Questions

• What integrations are available?
  In the beta launching with Invision Community 4.5, Zapier will be able receive a trigger when a member account or content (forum post, gallery image, etc.) is created and send actions to create the same. More triggers and actions will be added over time.
• Why is this only available to Community in the Cloud and not on-premise licenses?
  While we assess the needs during this beta period we are limiting it to Community in the Cloud only so that we can have more control over the communication happening between each community and Zapier.
• When will this integration be out of beta?
  Later this year.
• Will third party applications and plugins be able to create Zapier triggers and actions?
  Because the integration requires an app hosted with Zapier (which is written in Node.js) and this has to be submitted directly by the vendor, it will be difficult for third party applications and plugins to integrate with Zapier through Invision Community's integration. In the future we may be able to provide basic abstracted integrations for third party applications and plugins through an extension API. In the meantime, third party authors can of course write their own Zapier Apps if desired.

View the full article

[Orioni]

That last feature on "Self-Integration" looks interesting. I guess we'll have to see how it works when it's ready, later this year.

[Invision Power]

Invision Community has had different view modes for a good number of years.

Forum grid view was added to create some visual interest when listing forums, and we've had expanded and condensed view modes in streams since they were introduced.

We've taken both of these views a step further in Invision Community 4.5

Forum Grid View
To create even more visual interest, the grid view now allows you to upload, or choose a stock image for the header. This instantly makes for a more dynamic and inviting forum list.

The new grid view image headers

You can choose an image from the Admin CP when creating or editing a forum.

Choose a stock photo, or upload your own

Topic List View
For the topic list view, we have taken inspiration from our stream view options to introduce a new 'expanded' view mode, which displays a snippet of the first post.

The new expanded topic list mode

This immediately entices you to engage with the topic because you can read part of the post without having to click inside to see if it interests you.

This is controlled via the Admin CP, where you can choose the default view, or turn off the new view completely.

Other Changes
You may notice a few other subtle changes in these screenshots. The first is that we now included the follower count as a metric on both the forum grid view and the topic expanded view modes. The number of followers is usually a good indicator of how others perceive the value of the content. A higher follower count generally means a more engaging topic or forum.

You can also see that we've switched to a short number format to keep the displays clean. Instead of say, "2,483 posts", it will merely say "2.5k posts". Reducing visual clutter is always crucial to maintaining a clean user interface.

We hope that you find these new view modes useful and that they make your community even more vibrant!

View the full article

[Invision Power]

Installing Invision Community for the first time is a fun and exciting process. After all, you're about to launch a new community that is going to thrive and attract members from all over, and you want to make sure you set it up just right to facilitate a painless experience for your visitors.

If you're new to Invision Community, however, it can be a little daunting when you think about "ok what now?" immediately after installing the software.

Though experience, and researching the analytical data Invision Community installations voluntarily share with us, we identified many common settings that most communities change, and it is easy to see why. In an effort to make Invision Community more approachable to new administrators, we have devised an intuitive "new installation" onboarding process that will help you configure the community just right, and quickly.

Upon first logging in to Invision Community after installing the software, administrators are presented with a welcome screen.

Welcome to your new Invision Community!

You can obviously skip this step by clicking away to another page if you wish, and you won't be bothered again. If you click the "Skip this step" link on the page, you will be sent an email with a link to return to the page in the future should you wish to do so.

Continuing into the helpful wizard, you will be presented with a screen like so

A helpful guided wizard

You'll note that there's an explanation as to why you may wish to configure these settings, as well as guidance for where to find the same options later should you wish.

Upon clicking next, you'll see the previous step marked as completed. You can even skip around steps by clicking and expanding on them should you wish to do so.

Each step is explained in detail

If you reached this page but decide that you have to do something else first, there is a "Remind me later" option at the bottom of the page. Clicking it will allow you to resume whatever else you need to do first, but will helpfully bring you back to this onboarding step at a later time to finish your quick setup.

Finally, once you submit the form you will be presented with a confirmation page containing links to several other areas that you may wish to visit to get started. Things like setting up forums and setting up groups are common tasks, so we've consolidated links to those areas on one helpful screen as part of the new quick setup.

Confirmation that you're doing great so far!

This change is but one small way that we strive to ensure our software is easy to understand and easy to use. The next time you set up a new community, we hope these adjustments make the process smoother for you, allowing you to get the backend work done quickly so you can focus on the real goal - growing your new community.

View the full article

[Invision Power]

Managing a community as a team makes internal communication an essential part of its successful management.

There are times where you want to leave notes for other staff on specific topics that you're watching. Perhaps a member is close to breaking the rules, or it might be that you want to keep the topic focused and on point so wish to split off-topic posts into a different area.

Whatever the reason, Invision Community 4.5 adds the ability to leave private staff notes on topics.

For some time, Invision Community has had the ability for staff to leave public notes. Now, in 4.5, staff can choose between public and private notes.

This change was made based on customer feedback, so thank you! We do read and listen to all the feedback you leave.

Who is looking forward to Invision Community 4.5? Let us know below!

View the full article

[Invision Power]

Invision Community introduced drag and drop widgets many years ago. These widgets allowed anyone to add blocks to existing views, and to build up entirely new pages.

These widgets were great for quickly adding content to a page, but they weren't incredibly customizable. 

For Invision Community 4.5, we've added three new Page Builder widgets which allow you a little more control.

For an overview of this new feature, please take a look at the video below.

As you can see, these new widgets offer a lot of customization without the need to code any CSS or HTML. You can add background colours and images, adjust padding and borders and even add colour overlays right from the widget menu.

The new Page Builder widget options

Blandness be gone! Now you can let your creativity loose on your pages and all other views that have the drag and drop zones.

I'd love to know what you think of this new feature; please let me know below!

View the full article

[Invision Power]

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. Keep an eye out for our next blog for more on the facelift.

In this entry, I want to go over some of the design and code-level changes we've implemented that will be of particular interest to third-party theme designers, or those building a custom theme for their community.

IE11 Support

Until now, we've supported IE11 as a 'B' browser - meaning we didn't aim for perfect support (especially visually), but did aim to make all functionality work, and we fixed IE11-specific issues if possible.

As of 4.5, we no longer support IE11 in any way and Invision Community will not work well in that browser. By removing support for IE11, we are able to make use of newer CSS technologies which significantly eases development for us and third-party designers. I'll discuss some of those below.

Combined theme settings

We've combined a number of existing theme settings into one new setting. We've found that settings like poll_bar, step_background, rating_hover and so on are nearly always set to the same color - typically the site's main brand color. These settings have therefore been replaced with one new brand_color setting, which is used throughout the CSS in places where this primary color would be needed. This will simplify the early stages of theme development and make it easier to match branding in Invision Community.

Front end colors

Removing hardcoded colors

While our theme settings have allowed community owners to change most colors, there were still many hardcoded in our CSS framework. These were typically neutral colors used for things like 'close' links, semi-transparent backgrounds and so on, but it was enough to make creating a dark theme an unrealistic prospect without an awful lot of effort (and kudos to those designers who have offered dark themes up until now!).

In 4.5, we've removed hardcoded colors from our framework, and instead rely on colors already defined by theme settings. You can now, finally, create a dark theme just by editing the built-in theme settings.

Type scale & {fontsize} tag

While we've had fixed type-size classes (e.g. ipsType_normal) for a long time, in practice many elements had their own font sizes set. This leads to inconsistency and poor visual rhythm too. Another side effect is it was also tough to globally change the font size (such as for branding purposes, or to create a theme for visually-impaired users).

To solve these problems, we first created a type scale; that is, a fixed number of sizes to choose from. A product the size of Invision Community does have need for a flexibility, so we settled on the following scale:

x_small: 12; small: 13; medium: 14; base: 16; large: 18; x_large: 20; 2x_large: 24; 3x_large: 30; 4x_large: 36.

All of these values are editable as theme settings, so each theme can adjust the type scale used. Our default CSS in 4.5 has been fully updated to put all type on this scale.

To actually make use of these settings, we have added a new {fontsize} tag which accepts either a scale key, or a specific pixel size (for those occasional situations where a specific size is absolutely needed, e.g. icons).

Why couldn't we just use {theme="x_small"}, or even CSS variables? To solve the problem of globally scaling text, we have also added a percentage-based scale setting that will save you from having to create your own type scale. The {fontsize} tag automatically applies the global scale to any values passed into it. Want text in your theme to be twice as big as default? Simply set the global type scale to 200% and the entire theme will reflect the change immediately. 

The new font size options

Spacing scale

The lack of a consistent spacing scale has led to some arbitrary values being used in any given situation, which again has had a negative impact on the visual harmony of our design. We've therefore implemented a 4px spacing scale (using CSS variables rather than theme settings this time) and applied across almost all padding/margin values. In time, we anticipate fully switching all measurement values to the scale.

New CSS class families

We have added a range of new spacing classes for padding and margins, allowing far more control over how these are applied, especially on different device sizes. Previously, ipsPad (15px) was simply halved on small screens - with no 'opt-out' short of adding specific CSS. We've felt this has been imprecise for some time, especially since mobile devices typically have larger screens in 2020 and don't need to be so tightly-spaced.

ipsPad_all now replaces the existing ipsPad, and does not halve itself on small screens. Instead, there's a new responsive naming convention that allows you to apply specific padding on specific device sizes:

ipsPad_all:double md:ipsPad_all sm:ipsPad_all:half

In this arbitrary example, desktop size (the default) get double padding, medium (tablets) get regular padding and small (phones) get half padding.

We've added similar classes for top, bottom, left and right padding, as well as horizontal, vertical and none (to removing all padding) shortcuts.

For margins, the old ipsSpacer_* classes have been replaced with a new ipsMargin family that work exactly the same as the padding classes above, with the same range of flexibility.

The old ipsPad/ipsSpacer classes will continue working as they did before for backwards compatibility, but should be considered deprecated from 4.5 onwards.

We've also added a whole range of new ipsFlex classes, also with responsive controls (making it easy to have horizontal layouts on desktop and vertical layouts on mobile, for example), as well as a new ipsGap utility that automatically adds spacing between elements, without requiring manual :first-child/:last-child exclusions.

CSS variables & calc()

In 4.5, thanks to IE11 support ending, we're finally making use of CSS variables and calc() to make CSS more maintainable and easier to customize. A lot of repeating or often-customized styles - such as form field styles, message colors, card styles, border radii etc. - are now created as CSS variables, allowing theme designers to easily change styling in one place. Instead of magic numbers, we either stick to our spacing scale, or use calc() to avoid hardcoded numbers.

The future

The work we've done so far is just a 'first-pass'. We'll be pressing forward with modernization throughout the 4.5.* series and beyond with a view to reducing our footprint, improving our ability to maintain our CSS and, of course, making theming easier for our customers.

View the full article

[Invision Power]

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)

 

View the full article