Jump to content

sulervo

Clients
  • Posts

    113
  • Joined

  • Last visited

Reputation Activity

  1. Like
    sulervo reacted to Ehren for a blog entry, 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.
  2. Like
    sulervo reacted to Jordan Miller for a blog entry, An easier way to edit your theme   
    In a digital world with no shortage of places to connect, a beautiful theme will help you stand out from the crowd. 
    We previously touched on the importance of branded communities, and now we’re unveiling new functionality that will help make your theme more functional: easy access to header and footer tabs within our new simple theme editor. 
    Invision Community already has a powerful and advanced theme editor allowing total control over every aspect of your community’s UI, however this power comes at the cost of ease of use. We often get asked if there’s an easier way to add a site wrapper, or header and footer with some tweaks to the CSS without learning the complexities of the theme editor. Now, we do!
    Invision Community 4.7.0 comes with a simple theme editing mode.
    Utilizing a clean interface, this editing mode allows you to quickly and easily add header and footer HTML, along with any CSS.
     


    When editing a theme, after clicking the big green button that says "Use Simple Theme Editing," you're taken to a simplified theme editor page where you can add in code for your header and footer, as well as custom CSS.
    Previously, this option was not available. Before, community leaders had to sift through a theme’s template structure to modify anything within the header and footer code by manually editing Core > Global > GlobalTemplate and work out where to put the HTML. Now, there are header, footer and CSS tabs for easy access.
     

     
    The same Header and Footer tabs are also viewable when editing a theme. 
     

     
    TL;DR? We streamlined an important theme editing process.
    Our mission is to further simplify the more complex parts of the Admin Control Panel without losing the extensibility and customization Invision Community is famous for. The simple theme editor is a single step in that direction.
    The new, easy-to-use header / footer / CSS theme options are available to use in our new release, 4.7.0.
     
  3. Like
    sulervo reacted to Mark for a blog entry, New: Editor Uploading   
    This entry is about our IPS Community Suite 4.2 release
    IPS Community Suite has supported drag and drop uploading to the attachments area at the bottom of the editor since 4.0. In 4.2 we're pleased to add the ability to drag and drop right into the editor, so you can drop your attachment exactly where you want it to show without having to add it afterwards.

    Drag and drop into editor
    If your browser and OS supports it you can also copy and paste, either from the desktop or from other content on the web:

    Copy and Paste
    Naturally this works for ordinary files as well as images:

    Drag and drop a file
     
×
×
  • Create New...