Jump to content

Charles

Management
  • Posts

    20,452
  • Joined

  • Last visited

  • Days Won

    435

Reputation Activity

  1. Like
    Charles got a reaction from WebCMS in Invision Community 5: A more performant, polished UI   
    Actually it's not a pity seeing as we have that already and are making it better.
  2. Like
    Charles got a reaction from Marc Stridgen in Invision Community 5: A more performant, polished UI   
    Actually it's not a pity seeing as we have that already and are making it better.
  3. Like
    Charles got a reaction from Robert Angle in Invision Community 5: A more performant, polished UI   
    Actually it's not a pity seeing as we have that already and are making it better.
  4. Like
    Charles got a reaction from Jim M in Invision Community 5: A more performant, polished UI   
    Actually it's not a pity seeing as we have that already and are making it better.
  5. Like
    Charles reacted to Ehren in Invision Community 5: A more performant, polished UI   
    As showcased in our past blogs, Invision Community 5 introduces a brand new, modern interface which brings improvements to performance, aesthetics and mobile usability.
    An optional side navigation panel, new view modes, light/dark modes, customizable header layouts, a search modal and a mobile navigation bar are some of the things we've showcased previously. Today, lets take a closer look at some other miscellaneous changes that we've been working on while developing Version 5, including some of the code reductions and performance improvements that we've been able to achieve in the process.
    For those of you who are developers, we'll also give some simple explanations of how (and why) we've implemented these changes.
     
    Widgets
    Sidebar widgets are perfect for displaying content feeds, featured members, announcements, advertisements and more on your page. In version 4 however, the widget column would often become an empty space once the widgets had been scrolled past:
      widgets-v4.mp4  
    In version 5, widgets now stick to the screen once the last widget has been reached, ensuring your readers have more convenient  access to your widgets rather than a void space:
      sticky-widgets-v5.mp4  
     
    Messenger
    The Messenger is a great way to reach out to members when a private chat is more appropriate than a topic. Inspired by modern email clients, the messenger in Version 5 has been revamped with a full-height, sticky inbox, a longer message snippet, mini profiles and a more polished UI - all with a 25% reduction in CSS and a 100% reduction in Javascript.
    messenger-v5.mp4
     
    Sticky elements
    We've mentioned sticky elements a couple of times now, so lets take a look behind the scenes at how they're created, and some of the performance improvements with Version 5. Traditionally, sticky elements were created using Javascript which would calculate the position of the element on the page and adjust it's stickiness every time the page was scrolled. Scroll events can be quite taxing for browsers, and when it comes to Javascript, the less, the better (especially when aiming for great page speed scores)!
    With that in mind, all sticky elements are now handled using sticky positioning via CSS, which is a native and much more performant way of controlling these elements. We've been able to replace an entire 400 line Javascript component with just 3 lines of CSS.
     
    Grids and Masonry
    Grids have previously been handled in a similar fashion. Javascript would scan all elements within a grid to determine how many could fit on a single line, and would then shuffle these elements into position after the page was loaded or resized. CSS has since introduced its own grid properties, which has allowed us to replace more than 350 lines of Javascript with just a few lines of CSS, resulting in more performant page rendering and nicer looking grids (especially on small-medium displays such as mobiles and tablets).
     

     
    Fun fact: We first introduced a similar performance improvement to "masonry grids" in our Gallery update from January this year, by replacing more than 400 lines of Javascript with, you guessed it, just a few lines of CSS.
     

     
     
     
    Click targets
    We wanted to make Version 5 as simple as possible to navigate, and one way of doing that has been by implementing larger click targets. Clicking anywhere inside an entry in a table or grid will now take you to that entry (you can still click on other links like normal within the click target, such as subforums or profile links). Click targets are optional and can be disabled via your theme settings if necessary.
     
    click-targets.mp4
     
    Data Lists (tables)
    Speaking of tables, they too have been revamped. Tables automatically adapt to the space they've been assigned to (for those curious, this is done using CSS container-queries), so they're always neat regardless of the screen size, with no overflow or squashed layouts. Behind the scenes, the two columns below are created with identical code, yet they're quite different visually due to the size which they've been allocated. Even with these improvements, tables have received a 25% reduction in CSS.
     

     
    Profiles
    Profiles have been polished for Version 5 and include some nice improvements such as sticky widgets and tabs. 
    profile-desktop.mp4
     
    On mobiles, the side column collapses into a carousel, and the sticky tabs allow you to easily flick between content types without scrolling to the top of the page.
    profile-mobile.mp4
     

    Tabs
    You may have noticed in the above clip that tabs on mobiles are now scrollable, compared to a dropdown menu from version 4. We made this change to ensure that tabs are given more equal exposure on small devices, and have managed to reduce the CSS by a whopping 80%.
     
    Carousels
    Last and certainly not least, are carousels. Carousels are great for displaying large amounts of data in a confined space and they've been rewritten from scratch for version 5. Previously, a Javascript library was used to create the "scroll effect", however this has never been the smoothest experience on laptop trackpads and touch devices.
    In version 5, carousels are powered by native smooth-scrolling and scroll-snapping, which results in a much nicer user experience, especially on touchscreens. We've been able to remove a staggering 95% of the Javascript, substituting it with just a few lines of CSS.
     
    carousel.mp4
     
    To be honest, we've only just scratched the surface here! In addition to these changes, we've modernized (and reduced code) in almost every component throughout the suite including avatars, cover photos, dropdown menus, forms, inputs, buttons, lists, off-canvas menus, side menus, columns and more!
    Combined, these changes result in not only a significant reduction in code, but also a polished UI that performs smoothly on desktop and touch devices. We're excited to continue modernizing Invision Community well into the future as new technologies and techniques become available to us, and are looking forward to getting it in your hands in 2024.

    View full blog entry
  6. Like
    Charles got a reaction from Jim M in SQL performance-optimization suggestion   
    That could be true from an SQL perspective but... it's probably more performant to ask yourself why any community needs 100 subforums. Think about usability from a human perspective. 
  7. Like
    Charles got a reaction from Marc Stridgen in SQL performance-optimization suggestion   
    That could be true from an SQL perspective but... it's probably more performant to ask yourself why any community needs 100 subforums. Think about usability from a human perspective. 
  8. Like
    Charles reacted to ASI in Marketplace Closure   
    As expected yet another dev has abandoned it altogether. It is only becoming more and more effort, numerous different dev sites to sign up to, costlier to develop custom replacements, increased passing the buck chances.
    😞
     
  9. Agree
    Charles got a reaction from FanClub Mike in Invision Community 5: Topic Summaries   
    AI and LLM and all that could be another good metric but community-based metrics are useful too. For example, someone may post a long-winded rant and I might reply "ok."
    AI and such would see that as a useless reply. But, in context, a human would see it's a funny, sarcastic reply and it might get lots of likes or other engagement. So you need both AI and actual I working together to create useful data.
  10. Like
    Charles reacted to Matt in Invision Community 5: Finding community experts   
    Long ago, back in the dark ages, forums used the number of posts a member made and how long ago they joined to demonstrate trust and experience.
    Is simply posting a lot and being a member for a long time the best way to know which community members are experts?
    And is there a better way?
    We think so.
     
     
    What makes an expert, and why are they important?
    Community experts are the keystones to any thriving community. You probably recognise a handful in your community. They tend to be active regularly, are often the first to try and help others with their questions and help set a positive example within the community.
    Wouldn't it be great if newer community members could discover who these super users were a little easier? These members trying to find their feet in a new community could follow trustworthy individuals, absorb the positive tone of the community, and even get help a little quicker.
    In the past, forums have shown trust and experience through basic metrics like post count and the years since they joined. However, these metrics only show that the individual has been around a long time and posts a lot. It doesn't show that they are potential role models or helpful and trustworthy.
    Community Experts with Invision Community 5
    Invision Community 5 identifies these experts through metrics such as the number of solutions they have, the volume of 'helpful' votes on their replies, the speed of answers and more.
    Each forum will have its own experts, so if you have a very broad community, someone who is very helpful in a particular area will show as an expert in that area only.
    When a member has been picked as an expert, they'll receive an email thanking them, and they can then opt-in to be shown as an expert along with a regular notification or email with any unanswered questions in forums they are experts in.

    I'm absolutely killing it in the Test Forum
    Every few months, the experts are recalculated to reflect the organic way communities grow and change. After all, there's little point in showing that a non-active member is an expert. It might even encourage new community experts to keep up the great work and remain active longer.

    Community experts have a badge shown with their posts, along with the option to follow them. Encouraging new members to follow trusted community members should be a core part of any community strategy.
    Settings and control
    Of course, not everyone should be labelled as a community expert, and perhaps, in very rare circumstances, an existing community expert could have a bad day and not represent the community well.
    Invision Community 5 gives you the ability to set which groups experts can be picked from and offers you the opportunity to block existing experts, ensuring they won't be selected again in the future.

    Over to you
    All communities have to be purposeful and provide value. That value may be in close friendships, or it may be in getting answers for problems you have. Either way, locating the most helpful members will help develop trust, provide guidance and increase knowledge within your community.
    For transactional communities such as support-based communities, experts are vital in providing timely answers and demonstrating credibility and expertise to others.
    As always, we'd love to hear your thoughts. Please let us know in the comments.
     

    View full blog entry
  11. Like
    Charles reacted to Adriano Faria in Marketplace Closure   
    That’s the goal. 
  12. Agree
    Charles reacted to Chris027 in Marketplace Closure   
    I just don’t see myself looking at the providers page, then going to their individual pages, then looking at apps. Most of the apps I use were found by browsing here, not even searching. 
     
    I’m guessing I’ll gradually use the stock, less good, version of Invision Community. Kind of a bummer. 
  13. Haha
    Charles got a reaction from David N. in Back to Top button   
    Two years later and people still don't know how to get back to the top of a web page on their devices? The Internet must be a confusing bottom-of-page place.
  14. Haha
    Charles got a reaction from Hostingunlock in Buying new self hosted licence - how to choose few applications?   
    We no longer sell Invision Community Classic with individual applications. This is in preparation for v5 where there will no longer be a separation for the "applications" like there is now. It will just be all bundled together and more tightly integrated.
    Old pricing for full Invision Community Classic was $850 upfront and $300 per year.
    New pricing is $499 upfront and $199 per year.
    You can reach out to sales if you have questions about pricing or options.
  15. Haha
    Charles got a reaction from Hostingunlock in Marketplace Closure   
    The Marketplace has lost us money for many years especially as people just are not as interested in "mods" like they were decades go.
  16. Haha
    Charles got a reaction from The Old Man in Redis is enabled or disabled?   
    Schrödinger's Redis. 
  17. Like
    Charles reacted to Ramsesx in [Suggestion] v5 and Dead Space   
    There are, called widgets. Be creative.
  18. Haha
    Charles got a reaction from WP V0RT3X in Back to Top button   
    Two years later and people still don't know how to get back to the top of a web page on their devices? The Internet must be a confusing bottom-of-page place.
  19. Haha
    Charles got a reaction from Marc Stridgen in Back to Top button   
    Two years later and people still don't know how to get back to the top of a web page on their devices? The Internet must be a confusing bottom-of-page place.
  20. Haha
    Charles got a reaction from Aiwa in Back to Top button   
    Two years later and people still don't know how to get back to the top of a web page on their devices? The Internet must be a confusing bottom-of-page place.
  21. Haha
    Charles got a reaction from Robert Angle in Back to Top button   
    Two years later and people still don't know how to get back to the top of a web page on their devices? The Internet must be a confusing bottom-of-page place.
  22. Haha
    Charles got a reaction from Matt in Back to Top button   
    Two years later and people still don't know how to get back to the top of a web page on their devices? The Internet must be a confusing bottom-of-page place.
  23. Haha
    Charles got a reaction from Randy Calvert in Back to Top button   
    Two years later and people still don't know how to get back to the top of a web page on their devices? The Internet must be a confusing bottom-of-page place.
  24. Like
    Charles got a reaction from Noble~ in Back to Top button   
    Two years later and people still don't know how to get back to the top of a web page on their devices? The Internet must be a confusing bottom-of-page place.
  25. Haha
    Charles got a reaction from Jim M in Back to Top button   
    Two years later and people still don't know how to get back to the top of a web page on their devices? The Internet must be a confusing bottom-of-page place.
×
×
  • Create New...