Jump to content

aXenDev

Members
  • Posts

    658
  • Joined

  • Days Won

    6

Reputation Activity

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

     
    Topic pages: Compact view
    In addition, Invision Community 5 also introduces a new, compact layout option for topics. We wanted to create a layout which placed focus on your content while still keeping all of the authors profile information easily accessible within a mini profile. Stats, rank, badges, reputation points and more can be found by tapping the icon at the top of every post. The mini profile strip has also been added to other areas of the software too, such as comments and reviews in applications like Gallery and Blogs, and will appear on the mobile layout when the traditional "table view" is used in topics.
    Switching between the new compact view and the author sidebar view takes just seconds giving you complete control over your community.
    Mini profile.mp4
     
    As part of this view, you also have the choice to feature/pin the original post to the top of every page, making it a breeze for your visitors to easily understand the context of replies without navigating back to page 1. Pinned posts have a slightly larger font-size to distinguish them from replies, and we've thoughtfully truncated them on pages beyond the first to keep scrolling to a minimum.

     
    The new sidebar layout and view modes offer a fresh and innovative approach to navigating and interacting with your community. We’re really keen to hear your thoughts on these new views and whether you’ll be unleashing them on your own sites! We appreciate that no two sites are the same, and those who are a fan of the classic header look will benefit from quick styling tools and a visual way to re-arrange the header elements which we’ll cover in a later blog.
    We’re looking forward to showcasing a whole bunch of new features over the coming weeks - so stay tuned, and we’ll see you then!
     
  3. Like
    aXenDev reacted to Daniel F for a blog entry, Introducing GraphQL for Invision Community   
    We are excited to announce that the Invision Community GraphQL API is now available.
    This blog takes you through what GraphQL is and what makes it better than existing APIs present in Invision Community. It does get a bit technical, but you don't need to be a developer to appreciate how GraphQL will make life easier for those that do develop.
    What is GraphQL?
    GraphQL describes itself as a query language for APIs that gives clients the power to ask for precisely what is needed and nothing more.
    GraphQL was created by Facebook in 2012 and is now an open-source project governed by the GraphQL Foundation, which operates independently of Facebook.
    What makes GraphQL better than existing REST APIs?
    GraphQL has several advantages over the existing REST API present in Invision Community, and these include:
    Flexibility: GraphQL allows clients to request only the data they need, reducing over-fetching or under-fetching data. Getting data from a REST API often means receiving many fields and values you don't need to complete the operation you're creating.
    Versatility: GraphQL can query multiple databases or APIs, making it a more versatile solution than REST, which often requires multiple endpoints for multiple data types.
    Strong Typing: GraphQL has a robust type system, making it easier to understand the capabilities of an API and catch errors early in the development process.
    Better Performance: By allowing the client to request only the data it needs, GraphQL can improve the performance of an application compared to REST, which often returns more data than necessary.
    Easier to evolve: The schema-based nature of GraphQL allows for more straightforward and less-breaking changes to the API compared to REST.
    Let's look at an example
    You're building a dashboard that uses Invision Community data for your Node.js application that shows the latest topics, latest registered members and calendar events. With the REST API, you need to make three requests to get all the data you need. With GraphQL, you can fetch the exact data you need with a single request.

    Modern Web Development
    GraphQL is now the standard for modern web development, including building mobile apps. A modern web app has a "front-end" and a "back-end".
    The front-end refers to the user-facing part of the web application. The front-end is typically written in client-side languages such as HTML, CSS, and JavaScript and is responsible for rendering the user interface and handling user interactions. It communicates with the back-end to retrieve and display data.
    The back-end refers to the server-side part of the web application. The back-end is typically written in server-side languages such as PHP, and is responsible for performing business logic, managing data, and serving API responses to the front-end.
    Using GraphQL as the interface between the front-end and back-end, the development and deployment of each component can be done independently, improving the overall efficiency and scalability of the application.
    At Invision Community, we know that some clients use REST to pull data from Invision Community for use in bespoke web and mobile apps. So we hope you're even more excited about the possibilities with GraphQL.
    A list with all currently available queries, mutators and data types can be found in our developer documentation section.

    Extending Invision Community Functionality
    Of course, you also have full access to the GraphQL API in the Invision Community framework, so you can use GraphQL inside your controllers to run your queries, which has the advantage that you won't need to worry about future changes to the API. 
    In addition, we have also created a GraphQL template plugin, which can be utilized inside templates to fetch any data.
    This is a more technology-heavy blog than usual. The main takeaway is that we continue to invest in ways to allow your Invision Community data to be used by your own applications. GraphQL makes that job a lot easier and much more efficient.
    Let me know if you have any questions!
  4. Like
    aXenDev reacted to Jordan Miller for a blog entry, Interview with the founders of Invision Community (VIDEO)   
    To celebrate Invision Community turning 20-years-old (an eternity in Internet years), I interviewed the company's founding fathers.
    Ahh the good ol' days. Remember simpler times?
    This new video interview touches on Invision Community's past, present and future thanks to the invaluable insight from  @Charles, @Matt and @Lindy. 
     
    In our chat together, these gentlemen...
     
    Take a nostalgic trip down memory lane and reflect on the company's origins Explain the power of community amidst the social media boom Offer advice for new community leaders on how to grow Share some of the biggest changes to the platform Recant fond memories from the earlier days Reveal a teaser of what's next for Invision Community  
    Noteworthy quotes:
    Charles:
     
    Lindy:
     
    Matt:
     
    Thoughts on the interview? We'd love to hear from you in the comments! 🎂 
  5. Like
    aXenDev reacted to Matt for a blog entry, Twenty years of Invision Community   
    Twenty years ago today, Invision Community was founded and within months the first version of Invision Community was released. Little did we know, this would be the start of a remarkable journey spanning several decades.
    Our first version appeared shortly after we founded the company. It might be hard to imagine a time before social media and YouTube, but when we started out, the web looked very different.

    The first version of Invision Community was called Invision Board, reflecting the popular term for forums back in the early 2000s. It was full featured and you may recognise some elements that persist today.
    Like today, it even had a separate control panel where you could create new areas of discussion and customise the theme.

    Twenty years is a long time and we've continued to adapt with the ever-changing needs of community managers. We've seen the rise of social media impact how people consume content and found ways to compliment Twitter and Facebook by offering a place for long-form permanent discussion.
    Several elements remain from those early days but the concepts behind the theme have change significantly. New workflows, UI elements and views have helped the platform stay fresh and we've certainly innovated a few features that have since become industry standard over that time.
    I can't express how proud I am of what we've built together. From those humble beginnings working until 2am to growing a creative and talented team around our passion for community.
    I'm still as excited today as I was back in 2002. This year will see us build and release new tools to help guide and inform community managers. Our community platform continues to go from strength to strength.
    Of course, the platform is only one part of Invision Community. Over the last twenty years I've been grateful to get to know many of you and watch your lives unfold.
    This is as pure as community can get and I'm privileged to be part of it.

    We have a few other surprises to celebrate our twentieth anniversary. We can't wait to share them!

    I'd love to hear your memories of Invision Community! When did you first use our products and what was your community for? Please let me know in the comments below.
  6. Like
    aXenDev reacted to Matt for a blog entry, SEO: Improving crawling efficiency   
    No matter how good your content is, how accurate your keywords are or how precise your microdata is, inefficient crawling reduces the number of pages Google will read and store from your site.
    Search engines need to look at and store as many pages that exist on the internet as possible. There are currently an estimated 4.5 billion web pages active today. That's a lot of work for Google.
    It cannot look and store every page, so it needs to decide what to keep and how long it will spend on your site indexing pages.
    Right now, Invision Community is not very good at helping Google understand what is important and how to get there quickly. This blog article runs through the changes we've made to improve crawling efficiency dramatically, starting with Invision Community 4.6.8, our November release.

    The short version
    This entry will get a little technical. The short version is that we remove a lot of pages from Google's view, including user profiles and filters that create faceted pages and remove a lot of redirect links to reduce the crawl depth and reduce the volume of thin content of little value. Instead, we want Google to focus wholly on topics, posts and other key user-generated content.
    Let's now take a deep dive into what crawl budget is, the current problem, the solution and finally look at a before and after analysis. Note, I use the terms "Google" and "search engines" interchangeably. I know that there are many wonderful search engines available but most understand what Google is and does.
    Crawl depth and budget
    In terms of crawl efficiency, there are two metrics to think about: crawl depth and crawl budget. The crawl budget is the number of links Google (and other search engines) will spider per day. The time spent on your site and the number of links examined depend on multiple factors, including site age, site freshness and more. For example, Google may choose to look at fewer than 100 links per day from your site, whereas Twitter may see hundreds of thousands of links indexed per day.
    Crawl depth is essentially how many links Google has to follow to index the page. The fewer links to get to a page, is better. Generally speaking, Google will reduce indexing links more than 5 to 6 clicks deep.
    The current problem #1: Crawl depth
    A community generates a lot of linked content. Many of these links, such as permalinks to specific posts and redirects to scroll to new posts in a topic, are very useful for logged in members but less so to spiders. These links are easy to spot; just look for "&do=getNewComment" or "&do=getLastComment" in the URL. Indeed, even guests would struggle to use these convenience links given the lack of unread tracking until logged in.  Although they offer no clear advantage to guests and search engines, they are prolific, and following the links results in a redirect which increases the crawl depth for content such as topics.
    The current problem #2: Crawl budget and faceted content
    A single user profile page can have around 150 redirect links to existing content. User profiles are linked from many pages. A single page of a topic will have around 25 links to user profiles. That's potentially 3,750 links Google has to crawl before deciding if any of it should be stored. Even sites with a healthy crawl budget will see a lot of their budget eaten up by links that add nothing new to the search index. These links are also very deep into the site, adding to the overall average crawl depth, which can signal search engines to reduce your crawl budget.
    Filters are a valuable tool to sort lists of data in particular ways. For example, when viewing a list of topics, you can filter by the number of replies or when the topic was created. Unfortunately, these filters are a problem for search engines as they create faceted navigation, which creates duplicate pages.

    The solution
    There is a straightforward solution to solve all of the problems outlined above.  We can ask that Google avoids indexing certain pages. We can help by using a mix of hints and directives to ensure pages without valuable content are ignored and by reducing the number of links to get to the content. We have used "noindex" in the past, but this still eats up the crawl budget as Google has to crawl the page to learn we do not want it stored in the index.
    Fortunately, Google has a hint directive called "nofollow", which you can apply in the <a href> code that wraps a link. This sends a strong hint that this link should not be read at all. However, Google may wish to follow it anyway, which means that we need to use a special file that contains firm instructions for Google on what to follow and index.
    This file is called robots.txt. We can use this file to write rules to ensure search engines don't waste their valuable time looking at links that do not have valuable content; that create faceted navigational issues and links that lead to a redirect.
    Invision Community will now create a dynamic robots.txt file with rules optimised for your community, or you can create custom rules if you prefer.

    The new robots.txt generator in Invision Community
    Analysis: Before and after
    I took a benchmark crawl using a popular SEO site audit tool of my test community with 50 members and around 20,000 posts, most of which were populated from RSS feeds, so they have actual content, including links, etc. There are approximately 5,000 topics visible to guests.
    Once I had implemented the "nofollow" changes, removed a lot of the redirect links for guests and added an optimised robots.txt file, I completed another crawl.
    Let's compare the data from the before and after.
    First up, the raw numbers show a stark difference.

    Before our changes, the audit tool crawled 176,175 links, of which nearly 23% were redirect links. After, just 6,389 links were crawled, with only 0.4% being redirection links. This is a dramatic reduction in both crawl budget and crawl depth. Simply by guiding Google away from thin content like profiles, leaderboards, online lists and redirect links, we can ask it to focus on content such as topics and posts.

    Note: You may notice a large drop in "Blocked by Robots.txt" in the 'after' crawl despite using a robots.txt for the first time. The calculation here also includes sharer images and other external links which are blocked by those sites robots.txt files. I added nofollow to the external links for the 'after' crawl so they were not fetched and then blocked externally.

    As we can see in this before, the crawl depth has a low peak between 5 and 7 levels deep, with a strong peak at 10+.

    After, the peak crawl depth is just 3. This will send a strong signal to Google that your site is optimised and worth crawling more often.
    Let's look at a crawl visualisation before we made these changes. It's easy to see how most content was found via table filters, which led to a redirect (the red dots), dramatically increasing crawl depth and reducing crawl efficiency.

    Compare that with the after, which shows a much more ordered crawl, with all content discoverable as expected without any red dots indicating redirects.

    Conclusion
    SEO is a multi-faceted discipline. In the past, we have focused on ensuring we send the correct headers, use the correct microdata such as JSON-LD and optimise meta tags. These are all vital parts of ensuring your site is optimised for crawling. However, as we can see in this blog that without focusing on the crawl budget and crawl efficiency, even the most accurately presented content is wasted if it is not discovered and added into the search index.
    These simple changes will offer considerable advantages to how Google and other search engines spider your site.
    The features and changes outlined in this blog will be available in our November release, which will be Invision Community 4.6.8.
  7. Like
    aXenDev reacted to Jordan Miller for a blog entry, Proud to Present: An interview with Invision Community President Charles Warner   
    Nearly two decades ago, Invision Community President, @Charles , set out to make a leading online community platform. 
    Around that time, Charles also met his now-husband of 18-years and hasn't looked back since. Until now. 
    Behind the code, product updates and newsletters are a group of people who share a passion for community building. Considering how volatile and toxic the Internet can be, we want to become more visible, transparent and vulnerable.  To help you familiarize yourself with the masterminds behind Invision Community, starting with Charles, we're kicking off a new series that'll highlight our team.
    I interviewed Charles for the first installment. In it, he commented on the state of the Internet: "I do think some times, for or better or for worse, people forget there are real people on the other end," he said.
    Mr. Warner also touched on Invision Community's evolution over the years. 
    "People don't like change. No one likes change," Charles said, adding "sometimes you say, 'we really need to change something' either in the software, or how you do things, and people push back. It might be we change a feature or maybe internally we change the way we do something. Sometimes you have to move forward. Sometimes it's irritating at first. 'Why did you change that?!' And also you have to recognize that sometimes you're wrong. Sometimes you might change something [and think], 'no, it's not better...' I really find that that's a big thing – to constantly be looking at all those other options and try stuff out. It doesn't harm [anything] to try things."
    And in the spirit of Pride Month, Charles opened up about being part of the LGBTQ community and also President of a successful company. He hopes it'll inspire others.
     

    The full interview is available to watch up top. 
    After watching, please drop us a line in the comments and let us know your thoughts! 🌈 
  8. Like
    aXenDev reacted to Matt for a blog entry, What's new in 4.6.0?   
    Well, friends, what a journey we've been on since we started work on Invision Community 4.6.0.
    With 11 developers accumulating 934 commits over 3,157 files changing 120,281 lines of code, we're ready to show it to the world.
    Along with over 260 bug fixes, this new release contains some great new functionality. Let's take a look at what's new.
    Achievements
    Achievements, badges, ranks, rules, gamification, whatever you want to call it, this is the most significant feature for Invision Community 4.6.0. This brings a whole new level of earning and showing trust to other members while gently nudging more quality contributions to your community.
     
    Zapier integration
    Do you want new member registrations to magically appear in a Google spreadsheet? Perhaps you want members who opt-in for newsletters to be added to Mailchimp or ActiveCampaign. Cloud and Enterprise customers can do all this and more without writing a single line of code, thanks to Zapier.
     
    Web app and push notifications
    We took the time to round out our PWA (progressive web application) framework for 4.6.0 to include service workers, push notifications and more. I barely understand it, but Rikki takes you through the changes in our blog entry.
     
    Anonymous posting
    For some types of community, where discussion topics are particularly sensitive, community owners want to make sure that members register with their real details but are given the option to post anonymously where appropriate. For example, organisations dealing with abuse or sensitive topics might want the member to feel safe and disinhibited to post info without fear of being identified by the rest of the community.
     
    Solved content
    In Invision Community 4.6.0, we have rounded out our "solved" feature by allowing the feature to be enabled on a regular forum, along with notifications, statistics and more.
     
    Show when a team member has replied
    When you're scanning a list of topics, it's helpful to know when a community team member has replied, as these replies tend to have more authority and are more likely to resolve an issue. 4.6.0 adds a feature to show when a member of the team has replied.
     
    Health dashboard
    As Invision Community is a top of the line community platform with excellent developers and an amazing QA team, it's unlikely ever to go wrong. On the infrequent occasions that you need to identify potential issues within your community, the new health dashboard makes it easier to diagnose problems and request support.
     
    Spam improvements
    Our Enterprise customers run very visible and very busy communities. One of the pain points they had was identifying and limiting the annoyance of spam within the community. We created a new round of improvements based on that feedback to mitigate spam, and these changes are available to all Invision Community owners with 4.6.0.
    Cloud and Enterprise customers will also benefit from multiple under-the-hood optimisations for our cloud platform, including better caching of resources for faster response times.
    Let me know in the comments which feature you're looking forward to the most!
  9. Like
    aXenDev reacted to Matt for a blog entry, 3 Improvements to Spam Management in 4.6   
    Spam is as much a part of life on the internet as emoji overuse, serial GIF abuse and regretful tweeting.
    But I'm not here to talk about how I conduct myself online; I wanted to talk about three spam improvements coming to Invision Community 4.6.
    As you may be aware, Invision Community has its own Spam Defense functionality, which uses a mixture of crowdsourced data, publicly available data and our own special sauce to help reduce the number of spam accounts that get through the registration system. Invision Community also has several other tools to mitigate spam post-registration.
    These tools have served us well, but as spammers evolve, so must our systems. Here's what's coming to our next release.
    Spam Defense Scoring
    I can't divulge too much on our Spam Defense system lest we give spammers targeting Invision Community information that can assist them. Still, we have made several changes to our Spam Defense system.  These include rebalancing the score thresholds, checking against known TOR networks and proxies and using other data in the public domain to inform our scoring decisions.
    Spam Defense Blocking
    The current implementation of our Spam Defense only allows options to either prevent registration entirely or put the registration in an approval queue. However, the days when Spam Bots stood out from normal registrations are long gone, and it's hard to know if an account in an approval queue is legitimate or not.
    In 4.6, we've added a new Spam Defense option that you can choose to allow the registration but put the new members into the posting approval queue, meaning their posts will need moderator approval before being published.

    This reduces the decision burden and makes it easier to take a chance on a low score from the Spam Defense system and review their posts before they are made public.
    Word Filters
    We have added a new option to the Word Filters to allow content containing specific words or phrases to be held for moderator approval where the author has less than a set threshold of posts.
    For example, you may notice an increase in spam targeting "CBD Oil" and add it to the word filter list to hold the content for moderator approval. This works great and captures a good number of spam posts; however, your regular members get frustrated when they want to talk about CDB Oil in their posts.
    This new option allows you to set a trust level for allowing these words to be used without capturing them for approval.

    We hope these three changes to our spam controls will reduce the level of spam you get in your community!
    I'd love to know what's the weirdest spam (that is safe for work!) you've seen in your community.
  10. Like
    aXenDev reacted to Jordan Miller for a blog entry, Drum roll please… announcing Achievements!   
    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!
  11. Like
    aXenDev reacted to Matt for a blog entry, Welcome to the team, Jordan!   
    I'm thrilled to introduce the newest member of team Invision Community.
    You may recognise Jordan from his photo as he's been an active member of our community as BreatheHeavy. Jordan has been running his site BreatheHeavy.com using Invision Community for nearly a decade.
    Jordan's official title is "Community Advocate" which means that he will be working very closely with our community to guide and curate feedback, assist with support questions, to help educate and inform and to bring you news of the latest developments being cooked up by our development team.
    Jordan says:
    Your feedback, ideas and questions matter.
    I've spent the last decade discovering what it means to be a community leader in my own Invision Powered community, BreatheHeavy. Community building is an ongoing journey that's taught me invaluable lessons, namely the importance of absorbing feedback from the community then taking decisive action. I'm excited and honored to share that insight with the Invision Community. My new role is designed to shed light on what Invision Community members (that's you!) want and share it with the team.
    I'm looking forward to getting to know you! 
    We're very excited to start a new chapter within Invision Community to improve communication, engage more Invision Community owners and make the most of the excellent feedback we receive.
    You'll be seeing more of Jordan on the forums in the coming days.
  12. Like
    aXenDev reacted to bfarber for a blog entry, Health Dashboard   
    The support tool has served us well for many years. You can identify, at a glance, potential issues with your community both presently and down the road, right from the comfort of your AdminCP, and you can often resolve those issues with just a few clicks.
    But what if we could do better? What if we could make this useful administrative area of the software even more useful?
    The next version of Invision Community introduces a new "Health Dashboard" which replaces the previous support tool and helps you get a better overview of potential issues within your community while retaining all of the functionality you've come to know and rely on to resolve issues with your community.

    When you launch the new health dashboard, the first thing you will notice is that the previous "Wizard" process is now gone, in favor of a single page giving you access to everything you might want or need.
    Central to the page are blocks that identify specific areas of your community, server, and configuration which could be problematic now or in the future. Invision Community will check for available updates, modified source files, server software configuration issues, whether your server is running required and/or recommended versions of important software and more.
    Additional checks and recommendations have been added to this page, to help identify other adjustments that could benefit or prevent harm to your community.  Issues are color coded and classified as informational, recommended, or critical and a summary is provided at the top of the page with an easy "check again" button which will do so without taking you away from the screen.
    If we become aware of an issue, we can quickly notify communities through a bulletin which will be displayed in the "Known Issues" block on this page. These bulletins can also trigger AdminCP notifications, however they will continue to show on the Health Dashboard so long as they are relevant, even when the AdminCP notification is dismissed.
    A graph showing system, error and email error log activity has been added to the page to help you identify spikes in logged issues. Commonly, if an issue begins to surface on your community there will be an increase in these types of error logs, so the graph here is intended to allow you to identify an increase in these logs, allowing you to investigate and react quicker.
    The right-hand sidebar surfaces common tools you may need to access.

    The first block allows you to see our most recently featured guides, as well as search our documentation. While this functionality was available in the existing support tool, we found that it was rarely used because people more often visited the tool to allow the software to check for common issues, and the ability to search the documentation required a separate work flow through the support wizard. With the block always available (and searches performed "live" via AJAX), we expect users will find the ability to search our documentation from the AdminCP much more useful now.
    Next up, the Tools and Diagnostics block gives you access to common tools you may need to use. You can quickly clear your system caches, as well as access phpinfo, the SQL toolbox (for self-hosted clients only), and disable all third party customizations. The process and behavior for disabling customizations is very similar to the existing process within the support tool, with the list of customizations disabled opening in a modal window and the ability to re-enable all customizations, or selectively re-enable individual customizations, still available.

    Disabling customizations is still simple
    Finally, the ability to submit a support ticket is still available right from this screen. Upon clicking the button to submit a support ticket, you will be presented with a form inside a modal dialog that behaves very similarly to the existing form with one minor but useful addition: if there are any patches not yet installed on the community, you will be alerted to this right on the form before submitting your ticket. Think of this as one last reminder that your issue may already be solved by installing any available patches before reaching out to us for official technical support.

    Submitting a support ticket is still just a few clicks away
    We believe the improved workflow and user experience will help administrators and support technicians alike more quickly identify any issues that need addressing on the community.
  13. Like
    aXenDev reacted to Matt for a blog entry, Highlight Topics With Replies From Groups   
    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.
  14. Like
    aXenDev reacted to bfarber for a blog entry, Solved Content Improvements   
    For a long time, Invision Community has supported a Question and Answer mode within the Forums application which allows a reply to be flagged as the "best answer" to the question posed. With the release of 4.5, we also introduced a way to allow topics to be marked as "solved" which introduces similar functionality without transforming the look and feel or other behavior of the forum itself.
    Based on the popularity of this new addition in 4.5, we have made some further improvements to solved topics and answered questions in our next release.
    Notification to topic/question starter
    While notifications were available to the poster who answered a question or solved a topic with the release of 4.5, this release also adds notifications for the topic or question starter so that they can be made aware that an answer is available to their question.

    Topic and question starters now get notifications for solutions
    AdminCP Statistics
    Solved topics and answered questions provide for measurable statistics that can help you determine the health and direction of your community, particularly for support communities. To that end, we have introduced two new content statistic blocks that can help you measure how well areas of the community that support answers and solutions are faring.

    New AdminCP statistics
    You can now quickly see the percentage of topics/questions that have been solved (relative to the total number posted in areas that support solutions), as well as the average time it has taken for a solution to be marked on a topic or question (relative to the time the topic or question was initially posted). These statistic blocks support time period filter, time period comparisons, and node filtering to narrow down the statistical data for your specific needs.
    User profile enhancements
    User profiles now show the number of solutions the user has posted, and also allows you to view all of those solutions, in a manner very similar to reputation.

    Prolific problem solvers will now be called out boldly

    Answers can be quickly found on user profiles
    These improvements should help reward the most helpful users on your community by giving them more prestige and helping other users find their answers quicker.
    Collectively, we hope that these changes make the question and answer and topic solution features in the Forums application more useful for your community members, and the administrators behind the community.
  15. Like
    aXenDev reacted to Matt for a blog entry, Trial Invision Community 4.5 Now   
    If you're preparing to upgrade to Invision Community 4.5, there's now an easy way to test it out.
    We have updated our Invision Community demo system to use Invision Community 4.5! This is a quick and easy way to take 4.5 for a test drive and test all the new functionality before making your upgrade plans.

    Taking out a demo is very simple, just head over to our demo sign up page, follow the instructions and within a few minutes you'll receive your own private demo log in.
    We'd love to know what you think! Please let us know in the feedback forum.
  16. Like
    aXenDev reacted to Joel R for a blog entry, Lessons from the Virus: Community Engagement from WHO   
    The World Health Organization (WHO) is the world's most trusted source of information on international health, and a foremost partner to public health agencies combating the coronavirus.  They also understand the critical need for risk communication and community engagement to respond to the coronavirus pandemic -- a valuable strategy that any online community can adopt in these volatile times.  
    In March of this year as the coronavirus was already rampaging across nations, WHO published a series of guidance for risk communication and community engagement.  One of the major lessons they learned during some of the most perilous outbreaks including SARS, Ebola, and MERS was that community engagement was a critical factor in the success of containing any pandemic.  

    Here are 3 best practices from the World Health Organization that can help online communities navigate any crisis.  
    INFODEMICS
    One of the biggest problems hampering the effective treatment of coronavirus, or any major disruptive event in a community, is the excessive abundance of information - an "infodemic" from multiple and untrustworthy sources that reduces trust in any advice.  The flood of information can quickly overwhelm any at-risk population.  
    Community leaders need to proactively communicate.  As WHO recommends, "One of the most important and effective interventions to any event is to proactively communicate what is known, what is unknown, and what is being done to get more information."  Communication from community leaders establishes the chain of communication and establishes themselves as a source of credible information.  By getting out in front of disruptive events and staying in regular communication with your members, you build trust and ensure that proper advice will be followed.  
    PERCEPTIONS OF RISK 
    Different groups of people perceive the same problem differently.  In the case of coronavirus, WHO discovered that certain segments of the population didn't understand the risk of the virus as much as they should have - a gap of knowledge that effective communication would have addressed for different populations.  Part of the goal of WHO's risk communication and community engagement is to "help transform and deliver complex scientific knowledge so that it is understood by and trusted by populations and communities."  
    Community leaders need to tailor their communication to sub-groups.  While regular announcements and general updates are important for the community at-large, it leaves knowledge gaps for different sub-groups of your community membership: clients need to be informed of service interruptions; vendors need to be informed of supply chain disruptions; superusers need to know how to direct users for help.  Different stakeholders have differing needs, and each group requires customized and tailored communication to best navigate through the crisis.  
    ADDRESSING THE UNKNOWN & MISINFORMATION
    One of WHO's recommended actions for leaders was to be prepared to communicate about the first coronavirus case, even before the full picture was known.  Even today, much is unknown and data is still being compiled about coronavirus.  But in a digital world where misinformation gets mixed in with the ease of a tweet or share, it's more important than ever to communicate factually while acknowledging uncertainty.
    Address uncertainty by systematically collecting questions and providing answers to all questions.  In the beginning of any crisis, you won't have all the answers and events will still be unfolding.  It's critical to establish an early dialogue with your community to gather concerns from members, to monitor for misinformation, and to systematically compile questions into a FAQ. 

    Source:   Risk communication and community engagement readiness and response to coronavirus disease (COVID-19). Interim guidance 19 March 2020. World Health Organization.  
     
    On behalf of the entire IPS team, we wish our clients well wishes during these difficult times!  
     
    Executive Summary
    Problems of crisis: infodemics with excess information, different perceptions of risk among sub-groups, and uncertainty with misinformation. Solutions for community leaders: proactive communication, customized communication, and addressing uncertainty.  
  17. Like
    aXenDev reacted to Matt for a blog entry, Welcome to Invision Community 4.5   
    We've been on a little journey together since we announced the first Invision Community 4.5 feature way back in November 2019.
    The first feature we announced was a revamped Admin Control Panel interface which created more visual space and brightened it up. Actually, we made it so bright that the first feature request was to add a dark mode (which we did).
    In the space of three short months, we had spoken about Club improvements, invites and referrals, RSS feed improvements, blog categories, the simple stock photo picker, search insights, security enhancements, user interface updates, new statistic views, and notification improvements.
    Most will agree that March and April seemed to last months, thanks to a global pandemic. We used these extra days to talk about marking posts as a solution, topic view summary, Zapier integration, forum view updates, post-installation onboarding, private staff notes, page builder widgets, theme designer improvements, a new default theme, language system updates and everything else we missed.
    We have also revamped the front end user interface to modernise the look and feel but also to introduce new CSS frameworks, variables and other time-saving features our design team have been eager to implement.

    On the subject of modernisation, we've deprecated some legacy functionality. We've given up trying to make anything look good with IE11 which last saw an update in 2013. We've also deprecated older caching engines like Memcache, APC and Wincache and recommend using Redis instead. The web hosting and domain management features of Commerce are also deprecated as is BBCode. BBCode has its roots in the earliest bulletin-board systems long before rich text editors were common use. It's 2020; we should no longer be asked to type in special codes in square brackets to format text. BBCode is still functional in Invision Community 4.5, but it is likely to be removed in a future version.
    Now that primary development has finished, we move onto the beta testing stage. This is where you get to try it out and evaluate the new features before scheduling your own upgrades.
    As always, we do recommend that you only test early betas on staging sites or simple test sites. Many a weekend has been ruined by over-enthusiastic upgrading of live sites; so we don't recommend that.
    You'll also notice that we're running Invision Community 4.5 on our own site. If you do spot an issue, please let us know in the bug tracker.
    I've been creating and releasing products for close to twenty years now, and I still get a real buzz out of hitting the release button. It's always a pleasure to see the result of hundreds of hours of coding, dozens of meetings and numerous passionate exchanges among the team.

    You can access the beta in your client area.
    We hope you enjoy Invision Community 4.5!
  18. Like
    aXenDev reacted to Stuart Silvester for a blog entry, 4.5: One More Thing...   
    Almost ten years ago we launched the Marketplace; a place to connect Invision Community owners with talented developers creating new functionality.
    Over the decade, the Marketplace has grown to hold thousands of applications, large and small. For many Invision Community owners, the Marketplace has become an essential resource.
    Our aim was always to have the Marketplace available inside your Admin Control Panel to make it even easier to purchase and install extra functionality.

    I'm pleased to say that as of Invision Community 4.5, this is now a reality. You can browse the Marketplace and install new add-ons without leaving the Admin Control Panel.

    Obtaining Resources
    Paid resources can be purchased directly from the Marketplace and are available to install immediately after the payment is complete. You no longer need to download and install the files yourself.
    You may also notice some additional information with the resource listing, we'll be introducing a new 'tab' to marketplace resources to allow the authors to provide more useful information such as answers to frequently asked questions, or configuration instructions etc.

    The video below takes you through the purchase and installation of a Marketplace application.
    marketplace-install.mp4
    Installing an Application
    Updates
    Some of the eagle-eyed among you may have noticed in the first screenshot that there are more 'bubbles' showing in the menu on the left. These are supported for Applications, Plugins, Themes and Languages.
    In Invision Community 4.5 every resource available via the AdminCP is automatically versioned, you will see update notifications for everything you have installed (previously, you would only see update notices if the resource author supports them).
    Installing an update is as simple as clicking on the update notice, then clicking 'update' on the Marketplace listing.

    Installing Updates
    Downloads Changes
    Our Marketplace is built on our Downloads application, during development of this feature we needed to add new functionality. We have included as many of these improvements as possible in our software for the benefit of our customers, some of these are:
    Custom Fields can now be set to only show to members that have purchased a file. Files can now be set to accept a single file upload instead of multiple. New file versions can now be moderated without hiding the current version from view. Downloads REST API Performance Improvements New /download endpoint that counts the download Added more data to the /downloads/file/{id} response Ability to sort file results by last updated date We hope you're as excited about this feature as we are.
  19. Like
    aXenDev reacted to Matt for a blog entry, 4.5: Two feature additions   
    As the deadline slowly comes down, two last feature additions race towards the descending door and slide in underneath with seconds to spare. 
    If you've never seen "Raiders of the Lost Ark", then you probably think this is a weird way to start a blog.
    As we wrap up development for Invision Community 4.5, we squeezed in two extra features that I want to talk about today.
    Per Topic Post Approval
    The first is a way to cool down a heated topic without locking it. Right now you can put an entire forum on post-approval. This means that moderators must review and approve all new posts before they are allowed to be publicly displayed.
    As of Invision Community 4.5, you can now choose to set a single topic to post-approval regardless of the forum setting.

    This is a great way to let a topic cool off but still receive new replies to review before adding to the topic.
    Club Terms and Conditions
    The ways that clubs are used throughout the many communities that run Invision Community are becoming increasingly varied.
    A popular request is to allow members to agree to a set of club-specific terms and conditions before they can contribute to the club.

    Invision Community 4.5 now allows the club owner to set up its own terms and conditions. You can optionally enforce that members agree to them before continuing.
    That's it for feature announcements. We're excited to be closing development on Invision Community 4.5 and move towards a beta in the coming weeks.
  20. Like
    aXenDev reacted to Matt for a blog entry, Test drive Invision Community 4.5   
    We started talking about Invision Community 4.5 way back in November of last year. Now, less than six months later, it's ready for you to test.
    While we put the finishing touches to a few features, we have set up a preview site so you can test out the new features, leave your feedback and make a note of any bugs you spot.
    Head over now to the Invision Community Alpha test site.
    Please be aware that this test site is running in 'development mode' so it is automatically updated with the latest fixes throughout the day. This means it has to work extra hard on each click as there are no caches, pre-built languages or templates to use, so it will be a lot slower than a production version. So please don't worry about it being a touch slow, and definitely don't try and run Page Speed analysis tools on the alpha site!
    You can read about the headline features over in our product updates blog.
    Let us know what you think!
  21. Like
    aXenDev reacted to Matt for a blog entry, 4.5: Everything else   
    We have announced a lot of new things coming soon with Invision Community 4.5. Most of these are pretty big new features worth a blog on their own.
    However, we've made a lot of smaller changes that may not deserve their own blog but still have a significant impact.
    Let's run through some of those.
    Performance Improvements
    For every major release, we take some time to run through the code and look at ways to make Invision Community run more efficiently.
    For Invision Community 4.5, we've made node forms, sitemaps and commonly run SQL queries more efficient, which is excellent news for you and your users who get reduced server load and a snappier community.
    TikTok Embed
    Although it confuses me greatly, TikTok has taken the internet by storm. We have added it to the embed list so pasting a TikTok share link automatically shows the video ready to play in the comment.

    A TikTok
    Upload Chunking
    Uploading large files can be tricky. Typically trying to push a large file to a server results in timeouts, memory issues and eventually frustration. We have added chunked uploading when using S3. Put simply; this uploads part of the file at a time to prevent memory issues and the server timing out waiting for the upload to finish.
    View Members by Rank
    Very recently, we were asked how you can view all members in the ACP of a specific rank. It turned out you couldn't. This quick change was added into Invision Community 4.5.

    Showing members with a specific rank in the AdminCP
    Download Statistics
    While Invision Community 4.5 has new and improved statistic displays, a common request was to be able to download the raw data. This is now possible.

    Export stats as a CSV
    Downloads
    In Invision Community 4.5, when you require approval of new versions of files submitted to Downloads, the original version will no longer be hidden from view. We've added a new flow for moderators to approve these new versions.
    Live Meta Tag Editor
    Invision Community 4.5 seemed like a great time to run through this feature and tweak the functionality to make it more useful. Now it's possible to remove default meta tags, and it's easier to remove custom tags.
    Closed Tag Autocomplete
    When using the closed tag system where a user can select from one of your preset tags, we have added a search box to make it easier to find a single tag from a list of potentially hundreds.
    EU Tax Support in Commerce
    Tax doesn't have to be taxing! But it generally is. Countries within the EU often have complex tax rates. Commerce now supports multiple tax rates for consumers, businesses and EU VAT-registered businesses.
    That concludes our mini round-up of all the things we've not talked about yet. Let me know which one you're looking forward to most!
  22. Like
    aXenDev reacted to Ryan Ashbrook for a blog entry, 4.5: Language System Updates   
    Ever since Invision Community 4.0, there has been a huge focus on making communities multi-lingual by providing translation features inside the AdminCP.
    We have received a lot of feedback on our multi-lingual and translation tools over the past year, and we're happy to announce these new features coming to Invision Community 4.5.

    Pages Phrase Tools
    If you have the Pages application, you can also use these phrases in HTML pages and HTML Blocks without needing to visit the translation tools area. Simply use the tag editor in the sidebar when editing a page or block's contents.



    The new phrases sidebar options
    You can quickly create new multi-lingual phrases by clicking the + icon.

    The new add phrase dialog
    Additionally, WYSIWYG Blocks have now been made translatable, so you can now create WYSIWYG blocks that will display their content in specific languages.
    Translation Tools
    Language pack creators can now set a version update URL which is checked to notify admins within the AdminCP that an update available, just like the theme system. This is a great way to notify customers when fixes are available.

    Finally, you can now quickly add a new phrase from the Translation Tools page without the need to use the developer tools.

    The new "Add Phrase" option

    These little changes should make a huge difference in your workflow, and make it easier than ever to create fully multi-lingual pages throughout your site.
  23. Like
    aXenDev reacted to Rikki for a blog 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.
    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)
     
  24. Like
    aXenDev reacted to Rikki for a blog entry, 4.5: Improvements for theme designers   
    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.
  25. Like
    aXenDev reacted to Matt for a blog entry, 4.5: Page Builder Widgets   
    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!
×
×
  • Create New...