Jump to content

McAtze

Clients
  • Posts

    67
  • Joined

  • Last visited

  • Days Won

    1

Reputation Activity

  1. Like
    McAtze 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!
  2. Like
    McAtze 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.
  3. Like
    McAtze 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)
     
  4. Like
    McAtze 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.
  5. Thanks
    McAtze reacted to Matt for a blog entry, 4.4: SEO Improvements   
    It's been said that the best place to hide a dead body is on page 2 of Google.
    While we can't promise to get you to page 1 for a generic search term, we have taken some time for Invision Community 4.4 to do an SEO sweep.
    Moz.com defines SEO as "a marketing discipline focused on growing visibility in organic (non-paid) search engine results. SEO encompasses both the technical and creative elements required to improve rankings, drive traffic, and increase awareness in search engines."
    We have the technical skills and were fortunate enough to have Jono Alderson of Yoast lend his time, knowledge and vast experience to improve our SEO.
    This blog article gets a little technical. It's completely fine to leave at this point with the comfort of knowing that Google will be a little happier on your site with Invision Community 4.4.
    The majority of the changes are designed to send stronger signals to Google and friends over which content to slurp and which to look at a bit later.
    Still here? Good. Let us roll up our sleeves and open the hood.

     
    Pagination
    The most visible change is that we've taken pagination out of query strings and placed it in the path.
    For example, the current pagination system looks a little like:
    yoursite.com/community/forums/123-forum/?page=3
    Which is fine but it gets a little confusing when you add in a bunch of sort filters like so:
    yoursite.com/community/forums/123-forum/?sort=asc&field=topic&page=3
    A better approach would be to make a clear signal to both Google and humans that pagination is a separate thing.
    Invision Community 4.4 does this:
    yoursite.com/community/forums/123-forum/page/3/?sort=asc&field=topic
    Not only is this good for search engines, but it's also good for the humans too as it is more readable and no longer confused with filter parameters.

    Of course, we ensure that the old style pagination is redirected (via a 301 header) to the new pagination URL automatically so nothing breaks.
    Canonical Tags
    These tags are a way of telling search engines that a specific URL is the 'master copy' of a page. This helps prevent duplicate content from being indexed.
    Without it, you are leaving it up to the search engine to choose which is the master copy of the page.
    For example:
    yoursite.com/community/forums/123-forum/ and yoursite.com/community/forums/123-forum/?sort=desc&field=time may show the same content but have different URLs.
    By setting the canonical tag to point to yoursite.com/community/forums/123-forum/ regardless of filters sends a strong signal to the search engines that this is the page you want to be spidered.
    Invision Community sets these tags in many places, but we audited these in 4.4 and found a few areas where they were missing.
    For example, viewing a member's profile doesn't always set a canonical tag which may confuse search engines when you click on "View Activity" and get a list of content items.
    Soft 404s
    When an application or website wants to tell the visitor that the page they are looking for doesn't exist, it sends a 404 header code along with a page that says something "We could not find that item" or "No rows available".
    If a search engine spiders a page that looks like a 404 page, but it doesn't have the 404 header code, it logs it as a "soft 404".
    Given the short amount of time Google has on your site to discover new content, you don't want it to hit many soft 404s.
    Invision Community 4.4 omits containers (such as forums, blogs, etc.) that have no content (such as a new forum without any topics yet) from the sitemap, and also adds a 'noindex, follow' meta tag into the HTML source.
    Google will periodically check to see if the status of the page has changed and happily slurp away when content has been added.
    Other changes
    Although the changes listed here don't deserve their own section in this article, they are no less important.
    We have audited the new JSON-LD markup added to Invision Community 4.3 to help search engines better understand the relationship between pages.
    The "truncate" method that is used to display a snippet of text in areas such as the activity stream now only sends the first 500 characters to the javascript method to reduce page loads and page 'noise'.
    The profile view in Invision Community contains a mix of information pertinent to the member and content they've authored.
    We've ensured that the content areas are using a specific URL, with appropriate canonical tags. This will help reduce confusion for search engines.
    If you made it this far, then well done. It's time to slam the hood closed and mop our collective brows.
    These changes will certainly help Google and friends spider your site a little more efficiently and have a clearer idea about what pages and data you want to be indexed which can only improve your ranking.
×
×
  • Create New...