Preparing for Tiki25, this brainstorming is about the interface but doesn't get into WYSIWYG editor implementation and editor syntax issues, Vue.js, or page builder possibilities, etc. It's just about what goes where and how it looks and functions. The goal is to bring to Tiki some of the features and innovations of other platforms, etc. as well as make general improvements and updates.

Some ideas:

  • Overall
    • Meet WCAG accessibility guidelines (https://www.w3.org/TR/WCAG22/, https://webaim.org/)
      • Color contrast (fix default values and in themes — there are patterns of particular page elements and classes having trouble)
      • HTML problems — missing form labels, empty headings, empty buttons, empty links, broken ARIA menus (fix as part of Bootstrap upgrade)
    • Reduce/eliminate extra white space above the actual page. Any controls, icons, etc. (identify and list these) that stack vertically when activated should instead line up horizontally so they take up only one row. This is a problem on "presentation" type pages where there's an image or colored section at the top of the page, not to mention wasting space above the fold. (Themes or individual pages can add whitespace back as desired.)
    • Reconsider the size and placement of functional icons.
      • Thinking of the side column hide/show switch icons, for example. They seem quite small compared to such controls on other websites (compare to menu hamburger icons, for example). Also it's more standard for the icon to be attached to the center-facing edge of the moving column and move along with it rather than being stationary above it. Should it be moved?
    • Is it necessary to have a separate site icon and site logo? Why not just inform admins that the logo should scale nicely in all displays and layouts? This is quite confusing to new admins.

  • Horizontal page-top navigation
    • We need to figure out how to avoid having two nested navbars for page-top navigation
      • This results in two hamburger icons in top navbar
      • Unfortunately this is hard to avoid with Tiki's current code, which nests one navbar inside another when a menu is assigned to the module zone. The fixed-top navbar ("Bootstrap layout") has a hamburger icon by default. When a menu is added to that module zone it also has a hamburger icon unless it the default is turned off when the module is assigned, but then that menu doesn't collapse in small displays.
      • The current arrangement also complicates non-menu link coloring because the navbar links get their colors based on navbar-light or navbar-dark, but other links such as the log in link and Quickadmin icon don't.
      • This assumes that best practice is for a menu (navbar) and the entire top or topbar module zones to have the same background colors.
    • Horizontal navbars should be full-width navbars when site or page is full-width.
    • Brand / Site icon and Module Logo (link to the Home) [This is also discussed below.]
      • Site/Brand icon
        At tiki-admin.php?page=look#contentadmin_look-2 the admin can set the Site Icon and it will be used for the Bootstrap layout as the Brand (icon). This works when there is no Logo module set for the Top area. The size is not enforced and in some cases (like when using the Unified Admin Backend) a big brand icon will overflow other elements.
        However: This setting is expected to be moved from here to the admin-modules page. (to the module Logo)
      • Logo module
        The site icon is missing from the logo and it should be added there. As well it should be useable as the Brand bootstrap icon and size should be enforced when displaying it (in case of Brand usage as in the bootstrap layout).
        • I'm in favor of consolidating the site logo and icon. Having both is really confusing to new users, and sites should just use a logo/icon image that scales nicely (such as by using an SVG image) as is done on other websites.
    • Remove CSS menus ("suckerfish" menus) because features and functionality are now replaced by Bootstrap + Smartmenus.
  • Vertical navbar/menu
    • Option to display a vertical menu as an accordion
      • This brings the challenge of devising a multi-level accordion, but presumably that can be worked out.
  • Blogs and Articles
    • Enable putting a "featured image" at the top of the post or article, optionally with text (title and/or lead text) overlying it.
    • This can be done, probably, with the jQuery append function, but having a solution coded into these features would be best.
    • Mosaic or card array style of blog and article top page
      • Instead of just listing posts and articles vertically down a text-dominated page, have the option to display them more graphically in a grid, optionally with the post/article featured image.
    • Use larger user/author images with posts and articles (as the resolutions of displays have increased, Tiki's image specifications haven't kept up).
    • Update obsolete Bootstrap media class according to recommendations (use utility classes, etc.) and improve layout in the process.
    • "Article heading" section and blog should be div class="lead".
    • Articles: "Read more" link should be more prominent and, if possible, modified to comply with WCAG guidelines (maybe a text field on edit page to add specific text).
    • Articles regression fix todo: reinstate float around article image. [Done}
  • References:

  • Wiki features
    • Plugin Accordion
      • This seems like a natural addition as Bootstrap 5 makes it simple. The plugin could be very much like PluginTabs in terms of the editor interface.
      • Update: Done! Adrien coded the new PluginAccordion and it will be part of Tiki 25! Thanks.
    • Improve structure navigation
      • Just an impression that needs thinking through, but the arrangement of arrows, etc. probably isn't clear especially to new users. Is there a more standard approach?

  • Admin interface
    • Remove obsolete admin options (example: background color behind site logo).
    • Complete/fix/improve Unified Admin Backend (see Unified Admin Backend ).
    • Enable the option for themes to style the UAB.
    • Consolidate site logo preferences at the Admin Modules page, moving from L&F admin the ones remaining there. (see navigation about Brand icon / Site icon).
      • This means the site logo module would need to be used in the social layout also, as in the other layouts. This will fix the overlap in the Unified Admin Backend topbar.

  • My Account
    • Eliminate redundant information
      • User contributions to the website are listed twice
    • Remove broken features
      • "My level", for example. Maybe more.
    • Relocate content to make better sense — suggestions:
      • Move the Basic Data tab of My Info and also the content of Preferences to MyAccount
      • Rename "My Info" to "My site contributions" (for consistency changing the name from "User Contribution")

  • Related: Improve the initial experience (thanks, Horia)
    • Tiki default Homepage
      • This should be an attractive page that is a model for new admins/editors, including:
        • A nice page-top image maybe in a hero section
        • A row of cards
        • Anything else that can be used as a model and improves the first impression
    • An example top navbar
    • We should do a survey to see what's the most common/popular navbar placement, and see if maybe the fixed-top navbar should be the Tiki default

  • ...

Just indirectly related, but added here to keep it on the radar:

  • There was a suggestion to be able to easily create a "Black" version of the site's theme so the site can "go black" as a sign of social protest.
    • This serves a social purpose, but to expand the idea to cover more use cases, it might be good to think of this also as a way to have "dark mode" versions of themes, where people might like to have a dark version of a light-background theme because they like the theme overall and want to keep using it (although now dark), instead of switching to a separate dark-background theme, which isn't as clearly a statement or exactly a dark version of the site's theme, where you want to switch the colors but leave everything else as is. Tiki's Theme Customizer needs to be checked for this purpose, so that any theme can have a dark mode easily. If not , the dark version would have to be created in the standard way of assigning values to color variables and compiling. So the process to make a color-variant child theme, which can get involved if button colors, etc. need to be changed, should be tested again with Bootstrap 5 and documented. And, depending on user requests, some could be added to the package themes. (I like the idea of a "Blackberry" theme for Five Alive and Five Alive-lite ;-) . )