Thinking about responsiveness and the mobile view

Gary Monday February 23, 2015

We've been looking at the site logo, title, top menu, search and so on that are typically at the top of the page of a Tiki web site, and thinking about how to make them responsive. There are various ways to handle this, by reducing the size of items or not displaying them at all, and so on. The challenge for a web application like Tiki is to provide a good default behavior, and also provide ways for its users to customize it, because no single responsive behavior and appearance is going to be the right one for every Tiki site.

Here are some good resources, to see possibilities and examples: http://bradfrost.github.io/this-is-responsive/ http://mediaqueri.es/

Currently in Tiki 13 and the soon-to-be-released Tiki 14, we provide the standard Bootstrap navbar, which can scroll along with the content or be fixed to the top of the page. Other layouts are also provided, to continue the legacy Tiki site appearance, but the strategy for these to be responsive isn't really worked out or document yet. As with past matters of site layout, I imagine it'll be a combination of pre-set functionality and docs on how to configure the site. Site admins can choose the theme, layout, modules, and so on as before, and then use appropriate CSS classes on the modules of the top and topbar (and footer) module zones to control the size and visibility of the site's page header and footer content.

Tiki, as a veteran web application, has its roots in desktop computing rather than mobile. That said, the mobile phone view was enabled over 10 years ago (see https://doc.tiki.org/Mobile) and has evolved along with mobile devices. The current focus on improving the mobile experience for smart phones and tablets is another challenge along that path. Already it's possible and even fairly pleasant to access a Tiki site with a mobile device, but we want to further improve the quality of the experience.


Permalink: http://www.cunningham-lee.com/tiki-view_blog_post.php?postId=50