Loading...
 

Improving Responsive UX of Top and Topbar Modules

There's been a lot of progress on enabling Tiki sites to have good responsive behavior regarding the top and topbar module zones (navbars), but there's room for more improvement. Let's describe the current situation (Tiki 25 or so), the problems we see now, and ways to improve, including both code changes and documentation improvements to guide site configuration. Please edit this page or add a comment.

History and current situation

Tiki has had to make the transition from the old non-responsive portal-style website layout — where big banner ads, modules full of information, and so on were a common part of the page-top content — to today's style of web page layout where the page is responsive and the page-top navigation zones are, or can be, slimmed down to be usable in a small phone screen. The Tiki project sites, like this one, still try to put a lot of content in those areas, which works with varying degrees of success. It's no doubt a challenge for admins of Tiki sites in general to manage the top and topbar zones for good responsive performance, so this is an opportunity for the code and documentation to be improved to ease that challenge.

Current problems

Example case:

@Bernard Sfez / Tiki Specialist note :
Naturally it should be possible to have nice logo, a menu and more modules (login, multilingual) Tiki25 using the bootsrap fixed topbar layout.
From my experience it require too much of work for common mortal.

Screenshot 2023 03 29 At 16.04.56

Screenshot 2023 03 29 At 16.01.01

Screenshot 2023 03 29 At 15.53.47

Reply from Gary: I think what we need here is more/better documentation. For example, your site icon is only 8px tall. Your screenshot note says it's distorted, I guess when you tried to use the layout method in the logo module as it was designed. But, looking at the screenshot, the icon is displaying correctly, looks like to me. I would suggest you use an image the same height as you want your navbar to be, or somewhat larger and it will scale down to fit the space. An 8px-high image needs to scale up a lot to fill a 48px-high navbar (minus padding), so naturally it's going to be pixelated.

I don't know why the menu module was overlapping the other module, but we have lots of display classes, flexbox, etc. available in our CSS so this shouldn't happen if the right combination is used, so again a need for good documentation, examples, etc. IMO.

Improvement suggestions

Comparison with other platforms and websites

(Add examples of websites that do it better, etc.)

Changes in the code that would be useful

Improvement through configuration based on better documentation

  • Recommend site logo sizes and file types for best display, etc.
  • Provide examples of top and topbar module zone configuration
    • What module containing class ("topclass" parameter) to use for various types of content: site logo/icon, menu, search form, etc. Show example configurations.
    • How to use module visibility to display alternative modules in small screens where there's less space available in the navbar

Keywords

The following is a list of keywords that should serve as hubs for navigation within the Tiki development and should correspond to documentation keywords.

Each feature in Tiki has a wiki page which regroups all the bugs, requests for enhancements, etc. It is somewhat a form of wiki-based project management. You can also express your interest in a feature by adding it to your profile. You can also try out the Dynamic filter.

Accessibility (WAI & 508)
Accounting
Administration
Ajax
Articles & Submissions
Backlinks
Banner
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Calendar
Category
Chat
Comment
Communication Center
Consistency
Contacts Address book
Contact us
Content template
Contribution
Cookie
Copyright
Credits
Custom Home (and Group Home Page)
Database MySQL - MyISAM
Database MySQL - InnoDB
Date and Time
Debugger Console
Diagram
Directory (of hyperlinks)
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
DogFood
Draw -superseded by Diagram
Dynamic Content
Preferences
Dynamic Variable
External Authentication
FAQ
Featured links
Feeds (RSS)
File Gallery
Forum
Friendship Network (Community)
Gantt
Group
Groupmail
Help
History
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
jQuery
Kaltura video management
Kanban
Karma
Live Support
Logs (system & action)
Lost edit protection
Mail-in
Map
Menu
Meta Tag
Missing features
Visual Mapping
Mobile
Mods
Modules
MultiTiki
MyTiki
Newsletter
Notepad
OS independence (Non-Linux, Windows/IIS, Mac, BSD)
Organic Groups (Self-managed Teams)
Packages
Payment
PDF
Performance Speed / Load / Compression / Cache
Permission
Poll
Profiles
Quiz
Rating
Realname
Report
Revision Approval
Scheduler
Score
Search engine optimization (SEO)
Search
Security
Semantic links
Share
Shopping Cart
Shoutbox
Site Identity
Slideshow
Smarty Template
Social Networking
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Staging and Approval
Stats
Survey
Syntax Highlighter (Codemirror)
Tablesorter
Tags
Task
Tell a Friend
Terms and Conditions
Theme
TikiTests
Federated Timesheets
Token Access
Toolbar (Quicktags)
Tours
Trackers
TRIM
User Administration
User Files
User Menu
Watch
Webmail and Groupmail
WebServices
Wiki History, page rename, etc
Wiki plugins extends basic syntax
Wiki syntax text area, parser, etc
Wiki structure (book and table of content)
Workspace and perspectives
WYSIWTSN
WYSIWYCA
WYSIWYG
XMLRPC
XMPP




Useful Tools