Loading...
 

History: Navbar improvement ideas

Preview of version: 2

Bootstrap has a mobile-first philosophy, so things are built to be usable on small devices first and then scaled up/modified to work well on larger displays.

Tiki comes from the other direction, made for pc displays. The legacy site header carries that baggage.

Goal: Have a useful and attractive site header/navbar that adapts well to all screen sizes, and is as flexible as possible in accommodating content of the site.

Approaches:

  • Use Bootstrap code (or equivalent) as closely as possible.
    • It'll scale naturally for all displays (plus).
    • This limits large-display content - how to have banner ads, non-menu/search/login content, etc.(minus).
  • Use legacy Tiki site header modules, etc.
    • This displays fine in medium (maybe) and large screens.
    • This is almost unusable in small displays as the site header take up the whole screen.
  • Coping strategies
    • Use Bootstrap visibility classes to display modules appropriately for each screen size (http://getbootstrap.com/css/#responsive-utilities-classes).
      • Mostly this is to hide non-responsive modules in small views (plus).
      • This means extra work at the admin-modules stage, and it's not documented yet (minus).
    • Take advantage of the pagetop module zone to place a small-device menu that's hidden in larger views (currently in use at themes.to.o).
      • Provides an escape from what could be a mess in the collapsed site header.
      • This means making a duplicate menu and adding it in admin-menus.
    • ??
  • Next steps
    • Make navbar with "super-module fluffy" custom module
      • Should produce the desired collapsible header (plus).
      • Why is a profile/custom module needed to provide a basic feature? (minus)
    • Should alternative menu display ideas be introduced (slidebars -http://plugins.adchsm.me/slidebars/, etc.)?
    • Is there a way to revise the code to get both a proper collapsing menu in small screens and the legacy site header contents/appearance in desktop view?

History

Advanced
Information Version
Wed 08 of Jul, 2015 05:48 GMT chibaguy Some ideas added about module zone/module visibility. 4
Mon 06 of Jul, 2015 13:32 GMT chibaguy 3
Mon 06 of Jul, 2015 10:18 GMT chibaguy Added some links. 2
Mon 06 of Jul, 2015 08:23 GMT chibaguy 1

Switch Theme

Layout

Latest Changes

No records to display ...more

Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Site Config