Responsive design for mobile and tabs

[mathias]

Hi, quick question. We're looking at smartgwt 5 for a potential upgrade, and one of the things we're thinking about is how to make our site look better in mobile phones, our clients are not pleased.

Our app is basically a huge TabSet with pretty complex components inside.

I didn't find anything in the responsive examples regarding tabs, is there anything in that department, or anything planned?

[Isomorphic]

Many mobile applications are tabbed, including the most common applications created by Apple.

What did you have in mind?

[mathias]

I think perhaps i wasn't clear enough. Let me re-phrase.

Our smartGWT app is tabbed, extending the TabSet class.


In SmartGWT 5.0 there's lots of promotion about "responsive", "mobile" etc.
There's an entire segment about "mobile" in the 5.0 showcase with various examples such as "timeline", "windows and dialogs", "splitpane", etc. Showing how various components adapt to the clients running.

However, there's nothing in the responsive showcases regarding your TabSet component, hence my question.

One could, for example, imagine something akin to the famed "hamburger" menu, or something else that makes the tabs behave better in a mobile unit.

So i was just wondering if there had been any effort regarding tabbing and responsive design in smartgwt 5.

[Isomorphic]

What we're pointing out is that tabs make perfect sense to use with a small screen, and common mobile applications, such as the Music app in iOS, use tabs as a screen organization tool.

You could, in a given app, switch to menu-driven navigation for a small screen, but there's not really a way for a TabSet to convert itself to that pattern, because replacing the tabbed area with a toolbar that contains a menu would not make the tabSet more compact.

[mathias]

Oh sure, i agree, our native apps are tabbed too. However, there could be a case for arguing that how those tabs are displayed could differ on small and big screens.

It would make it more compact if it was hidden/shown like a proper "hamburger" menu.

Oh well, just checking.

[Isomorphic]

We're not following where you would put the hamburger menu in this case. If you mean that some tabs would be shown and then the hamburger menu would be used to show the rest, that seems to be just a skinning difference compared to how tabs currently work (there's a drop-down shown when not all tabs fit) and not something that would be more compact.

As far as different appearance on desktop vs mobile, current trends seem to have the two as close as possible, with behavioral differences (like SplitPane) but mostly not appearance differences.

[bkelly]

Hamburger Menu

I was about to post a question related to menus so perhaps it is the same thing mathias is after...

We are looking for a way to have a more complete menu presented when the user clicks a hamburger icon if using a desktop versus having menu-navigation on mobile device. The only options we can find within smartclient at the moment are the traditional desktop menu-navigation or ribbon. We're after something that shows a more comprehensive view for desktop users and when a device has less screen space reverts to menu-navigation such as:
1. https://www.oracle.com/products/index.html (select one of the items Products; Solutions; Downloads; ...)
2. http://razonartificial.com/themes/reason/v1.4.3/ (click UI Elements)

Following the Oracle example. On the desktop when you click "Products" you can see the full menu within the products heading. If you visit oracle.com from a phone you have to navigate by first selecting a heading. The razonartifical site works in much the same way.

[Isomorphic]

This has been introduced, in quite sophisticated form, in 6.0. There is an AdaptiveMenu component that will either show menu items horizontally, or offer them via a drop-down, or a mix, depending on the available space.

There are also new core APIs (Canvas.canAdaptWidth and adaptWidthBy()) that allow you to implement similar behaviors for a custom component that wants to negotiate with a Layout about how much space it will use.

In 5.0/5.1, for the simpler behavior shown by these web sites, you would just create a custom component that either uses TabSet or a Menu depending on the device.

Note that these sites nicely demonstrate what we mean about a TabSet converting to a "hamburger" menu not being more (vertically) compact. Each site just sticks a big logo where there would otherwise be tabs.