StormyWays13 reacted to Rikki for an entry, 4.5: Introducing our updated default theme
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.
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.
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
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.
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!
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.
Desktop forum views (click to expand)
Mobile forum views (click to expand)
Activity streams & messenger (click to expand)
StormyWays13 reacted to Joel R for an entry, 10 Tips For Converting from vBulletin to Invision Community
Are you a vBulletin admin looking to stay on the leading edge of online communities?
As an IPS client who frequents the Invision Community support forums on a daily basis, I often run across existing or former vBulletin admins looking to migrate to IPS. In fact, based on my not-so-scientific survey, vBulletin is one of the most popular platforms from where admins migrate. Many of the vBulletin users are professional administrators looking for a stable company, rapid development, and a trusted platform to power their communities into the future.
I interviewed 6 former vBulletin admins who are now Invision Community clients. Most of these vBulletin admins have 10+ years of experience running successful forums, so their input was especially insightful.
“I love the design of the admin and moderation back-end, a real treat after living with the antiquated and confusing vBulletin back-end.” -- @cfish
“I like the well-thought concept, the details, and abundance of features and functions.” --@Ramsesx
I’ve compiled the top 10 questions and answers from their interviews and the forums specifically for vBulletin admins for an insider’s perspective on how to convert from vBulletin to Invision Community. You can also read their full interviews in my Community Guide attached at the bottom.
10. What is the typical lifecycle of Invision Community and what new features come out?
Invision Community is currently on 4.4. It’s a great time to be migrating as both the software and converter are very mature. You’ll be able to take advantage of all the new features from Invision Community 4.x such as Social Clubs, Subscriptions, SEO updates, and GDPR updates.
In general, IPS publishes one major update like 4.4 once a year, with several bug fixes, security updates, and enhancements throughout the year. The best place to read about Product Updates is the official IPS Blog in Product Updates.
9. What are the pricing options and how do they compare to vBulletin?
IPS is comparable in pricing when compared to vBulletin depending on your choice of apps. The self-hosted option is cheaper when considering support and upgrades.
The pricing for an active license is simple, easy, and comprehensive. A new license includes professional ticket support, forum support, access to new upgrades, and managed spam service for 6 months. Renew again in six months to continue those benefits. If you choose not to renew, your software will continue to work.
8. Is the software mobile ready like vBulletin?
Yes, the software is responsive by design. This means the community naturally fits and beautifully displays in any device size, giving you a consistent look-and-feel across all devices. Try it now by resizing your window!
It also means you don’t need to pay for any extra “mobile bundles.” This approach to mobile design was one of the reasons why @cfish chose IPS: “I didn’t like vBulletin’s approach to mobile. The IPS approach to responsive web design was inline with my own thinking.”
7. What are the official Invision Community apps and how do they compare to vBulletin?
@Steve Bullman converted to IPS because “IPS seemed to offer a better all-round package for what I needed.” One of the biggest reasons for considering IPS is a broader approach to community. Whereas vBulletin focuses only on Forums and Blogs, IPS empowers you to build a suite of applications customized to your needs. Mix and match apps like Gallery, Blogs, Downloads, Pages, and Commerce to build a modern community with resource directories, databases, paid subscriptions, albums and more that go beyond forums.
You can read more about the apps in Features. Calendar and Clubs are included for free!
6. What will be migrated from vBulletin?
The free converter app will migrate all of your member and content items from vBulletin 3.8.x, 4.x, and 5.x. This includes members, private messages, member groups, ranks, forums, topics, posts, and attachments. You can view the full list on Migrate and choose your vBulletin version from the list of choices.
Obviously, you will not be able to migrate any custom themes or custom modifications. @ChristForums adds, “I wish I had known that the converter was so easy to use and migrate from Vbulletin 5.”
5. What are the channels for support?
Every active license comes with professional ticket support, which should always be your first source of contact. @Markus Jung highlights “fast support” as the item he appreciates the most about his license. You can also obtain help from the community forums, help guides, release notes, and other public resources.
If you’re not an IPS client yet, you can post in Pre-Sales forum or email email@example.com.
4. How do I prepare my community?
The six admins that I interviewed offered several tips for new Invision Community owners. Prior to the conversion, you should read through the converter package to see what will convert and redirect. You should purchase other Invision Community apps in advance to fully convert vBulletin items as needed; not delete any old content since Invision Community includes an archive function; and not make drastic changes to allow members a chance to become accustomed to the new forum.
3. What will happen to my traffic and URL redirects?
The free converter app will redirect your existing URLs. This includes forums, topics, posts, member profiles, print view pages, archived content, attachments, and tags. You need to leave your converter installed after migration to ensure the redirects will work.
AlexWebsites wrote, “the converter came with built-in redirects and I was able to redirect most of my traffic. Traffic recovered within a few months.”
2. What are the server configuration and database requirements?
If you choose cloud, then Invision Community will manage the hosting.
If you choose on-premise, you can use the free ‘Get Ready’ compatibility file to check your server. The latest version of Invision Community 4.4 requires:
PHP 7.1.0 or higher (7.3.x is supported) MySQL 5.5.3 or higher (5.6.2 recommended). 1. How stable is the company?
Other companies lost their development talent. Other companies were bought and sold by multi-media conglomerates. Other companies have a history of lawsuits.
Through it all, Charles, Lindy and Matt have been here since the beginning providing steady leadership to Invision Communities everywhere. If you’re looking for stability, it’s nice to know you can rely on the same people who started the company. For serious and professional vBulletin admins looking to transition, you know you’re not just buying into the software, but investing in the development team, staff, and platform for years to come. Ramsesx shared his personal story: “I always prefer the best for my community from where I earn my income. An important aspect was the longtime outlook. Invision Community gave me the feeling of being trustworthy, they are more than 17 years in the forum software market.”
It’s no wonder that so many successful vBulletin admins feel the same after moving to Invision Community. You get stability, years of experience, a deep understanding of online communities, and a dedication to development that continues to innovate. It’s time to bring your vBulletin community over to Invision Community!
Bookmark this page for future reference and download the Community Guide for experiences from real clients who converted from vBulletin. Much appreciation to @AlexWebsites @cfish @Christforums @Markus Jung @Ramsesx @Steve Bullman for participating in the interviews.
- Joel R
Community Guide vBulletin Migration to Invision Community.pdf
StormyWays13 reacted to Matt for an entry, The incredible power of anonymity when growing your community
We attach a significant amount of personally identifiable data to our social media profiles daily.
I regularly use social media to share photos of my kids and holidays. I post my personal thoughts on products I've used and TV shows I've watched. I'm even tagged in location-based check-ins.
It's all there in my news feed for anyone to see.
I'm not alone. More and more of us live our lives through the prism of social media. We share things we love, things we loathe and things that make us laugh.
With just a few clicks, you can discover a lot of information about a person. More often than not, you can see where they work, where they live and what school they went to.
Scrolling through their timeline often reveals their stance on hot topics such as gun control, the current President and other recent headline news items.
This information follows you when you join a Facebook Group. Your past Tweets are always available to trawl through.
Indeed, there may be some groups that you decide you cannot post in as people would be able to identify you.
This is particularly true for stigmatised conditions, such as financial help, illness and mental health.
After all, if you were seeking help with a large amount of debt or managing an embarrassing medical condition, you wouldn't feel comfortable knowing that work colleagues, friends and family could read your posts.
The benefit of anonymity for stigmatised topics
"Forums can all offer some initial anonymity, a community, and information that geographically proximate others may not have. What stigma-related forums uniquely offer is that the anonymity protects those who are not ready to be publicly associated with sensitive topics; the community helps to neutralise the “spoilage” of identity that accompanies stigma." (1)
Unlike social media where reams of personal data is willingly added, and which can identify you to other online users, forums allow you to add as much information as you are comfortable with.
Support communities for mental health and illness flourish using forums for this reason. An individual may feel devalued in society and unwilling to share their condition over social media.
"Nowadays people can both avoid and proactively cope with this devaluation by turning to online forums populated by others who share the same devalued group membership." (1)
Forums offer a safe space for these individuals to seek and receive support from others without disclosing large amounts of identifiable data.
Allowing a level of anonymity encourages more people to register and over time, they will develop ties with other users.
For an individual with a stigmatized condition, a forum may be a real life-line in coping with the condition as face-to-face support is often limited.
Adrial Dale, who owns Herpes Opportunity agrees.
"In order for us to truly be able to work through the shame that stigma can trigger, it's absolutely vital for us to feel safe to open up and tell all. Through opening up, we not only get to share with an understanding and compassionate community (which normalizes our shared experiences), but we're also able to begin to release what has felt like our own solitary burden to bear.
Then a magical thing can happen ... an alchemical process that transforms shame into an opportunity for connection. An opportunity for us to be accepted for who we are *behind* the thick wall of shame. And ultimately, an opportunity to accept ourselves.
Especially in these days of the internet not feeling so private (even in places where it absolutely should be), having true privacy and anonymity is paramount for communities like Herpes Opportunity. Anything other than that is grounds for paranoia and holding back from sharing ourselves. (In fact, just the other day someone messaged me asking "Are private messages really private?") Fear can lead to closing ourselves off, which can lead to isolation and paranoia, which can lead to a downward spiral of self-loathing and depression. On the other hand, safety, connection and compassion creates an an okayness with the nitty-grittiness of what it means to be human."
The benefit of expressing a new identity
"People may strategically express identities when they think they will not be punished, and/or connect them to an audience that is valued." (1)
It is arguably true that not so many years ago, tech-related communities were very much male-dominated, with female contributions valued less.
Forums allow a way to create a new identity that is either gender-neutral thus allowing the male users to assume a gender, or overtly male to ensure their contributions are evaluated on merit, and not with any gender bias.
Christopher Marks who owns Nano-Reef has seen this first hand.
"During a discussion with a women’s group in our generally male dominant hobby, a number of women had expressed the benefit of having an anonymous username and profile when asking for help and advice on forums, they receive equal help without the unfortunate gender bias or belittling that can sometimes happen in real life when seeking the same help in person."
Invision Community's Jennifer has also experience of this on her own community; RPG Initiative.
"RPG Initiative is a community for all roleplayers. We focus on all text-based roleplaying forms that are hosted on the internet. We encourage roleplayers to find each other, discuss roleplay and grow as collaborative writers here at the Initiative in a safe environment."
Jennifer relies on, and encourages anonymity. She knows that because her site is predominately female, some female users identify as male to increase the chances of getting others to collaborate with them.
"Male players are rare, in fact, I recently ran a poll on my site and of those that responded to it less than 15% of them are male (or identify as such). So this gets them more attention and in turn, more people that want to write with them."
Jennifer explains how anonymity is critical to her site's growth.
"Anonymity is a difficult thing to accomplish in a small niche like mine, but it's sort of like a small town where everyone knows everyone, and they likely know all of your secrets. So enforcing rules to preserve anonymity is really important to my community and me. This includes prohibiting the "naming of names" or the "site" that the drama is coming from when seeking for advice or help. This doesn't negate that people may know the existing situation or people involved because they are also involved or know some of the people involved, but it helps cut down on the drama and the spread of negativity and false information about people."
With a forum community, you can truly be who you want to be.
This is not so with social media where others can create bias based on your gender, looks or topical preferences.
"In her early work, Turkle argued that the internet provided myriad positive opportunities for self-transformation, but more recently, she argues that the explosion in social media options has led us to develop superficial, emotionally lazy but instantly available virtual relationships." (1)
It's hard to argue against this statement when you consider the content that predominates social media. And often an endless stream of self-focused content.
"Indeed, we provide clear evidence that online forums afford users a way of being genuinely “together, together”, as opposed to what Turkle calls “alone together.”(1)
The bottom line is that it has been proven that allowing a degree on anonymity increases engagement across all niches, but especially those that are built to support those with stigmatised conditions. These forums have a greater sense of community and depth than those built on social media.
When you allow your members to take back control of their privacy, you are empowering them to make decisions about what to share.
Given how eroded our privacy is in our modern always-connected world, this is a precious gift.
If you are looking to create a new community then consider this before choosing your community platform.
StormyWays13 reacted to Matt for an entry, Test drive Invision Community 4.4 now!
Do you want to take our latest release for a test drive?
You already are!
We've upgraded our own community for wider testing.
A big focus has been on page speed, so you will notice that our community is significantly faster that it was on 4.3
If you need a recap of what was added, take a look at our product updates blog which takes you through the highlights.
As this is a pre-beta release, expect some funkiness as we scurry around and tidy up our custom theme wrapper and other areas as we spot them.
If you you find a bug, we'd love for you to report it with as much detail as you can muster in the bug report area.
We'd love to know what you think, let us know below.