Introduction

Tablets are inherently different from desktops. Screen sizes and resolutions are smaller, finger-swiping replaces mouse-pointing and yes, sometimes, the tablet rotates. Web designers need to take these distinctions into consideration when designing web applications to make tablet surfing experience a bliss. The soon-to-be-released ZK 6.5 introduces new features that enable developers to design user interfaces that take advantage of tablet-specific user interaction methods such as swiping and changing device orientations.

ZK 6.5 enables you to know the tablet better!

New Events for ZK 6.5

Using ZK 6.5, it is now possible to detect swiping motion as well as current device orientation. Please check out the video below for a demonstration on how the information could help enhance user experience when viewed on tablets.

Below are some points you may want to take away from this demo video:

1. Conservation of screen space

Since the screen size of a tablet is limited compared to that of a desktop’s, to carefully organize the information displayed on a single web page becomes very important. One layout strategy employed on tablets is the split view. The left side of the screen displays a list of selectable items while the right side of the screen displays the details of the selected. As seen in this demo, the navigation menu on the left side is composed of a series of individual listboxes while the scrolling of each individual listbox is disabled. Not only can you reveal or hide the navigation menu by clicking on the menu-toggling button, you can also swipe left or right to close or open the navigation menu, respectively. To further conserve screen space, the less important sidebar on the right-hand side is hidden when the menu is visible.

2. Orientation-aware layouts

Web developers designing for tablets need to take note of the following. “Layouts that look good in landscape-view may look funny in portrait-view.”

For instance, if the landscape-view is divided into two columns, that same two columns may be too narrow when switched to portrait-view. Thus, the ability to detect device orientation and then to adjust the layout accordingly is a must-have. ZK 6.5 gives you that ability on the server-side.

This demo application also provides some examples on how to do the following.

1. Device-specific CSS

Sometimes, having different CSS rules for desktops and tablets is unavoidable.
It may be useful to generate CSS rule sets specially prepared for the client configuration detected at page loading time.

2. Combining MVVM with composite components

When the web page contains many widgets, placing them properly becomes an unwieldy task. Composite component is one way of decomposing complex layout into small, manageable parts. You can group recurring component patterns as composite components. Test the composites separately, and then supply their parameter values through data binding. Please see source code for more detail.

Give it a Try
This demo is available for download as source code or binary war file. You can fork and clone the demo source code through Git version control system, and then employ maven to build the application. Please deploy and experience it on your own tablet.

Enjoy and have fun!

Related reading:
ZK 6.5 & responsive design: Desktop and tablet applications from the same codebase
ZK 6.5 Scrollview Component Preview

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

10 Responses to “ZK 6.5 & Tablet UI Design”

  1. […] reading: ZK 6.5 & Tablet UI Design var dzone_url = […]

  2. kkurt says:

    Thanks for adaptation, users really needs this interactions.

  3. Jeff Burton says:

    I was just trying to get some mobile events working this week. Great news.

  4. Jeff Burton says:

    Are you supporting mobile events (like touchstart) natively in 6.5?

  5. Neil Lee says:

    Hello Jeff,

    Thank you for taking interest in ZK 6.5.

    Touch events are converted internally to mouse events. For example, touchstart becomes mousedown, touchend becomes mouseup, …

    Neil Lee

  6. […] readings: ZK 6.5 & responsive design: Desktop and tablet applications from the same codebase ZK 6.5 & Tablet UI Design var dzone_url = […]

  7. […] readings: ZK 6.5 & responsive design: Desktop and tablet applications from the same codebase ZK 6.5 & Tablet UI Design ZK 6.5 Scrollview Component var dzone_url = […]

  8. Ron Grimes says:

    Have been following your 6.5 posts, and you guys are really doing a great job. Looking forward to its release. Just out of curiosity though, you say you’re releasing 6.5 soon. So, are you just going to skip 6.1 thru 6.4? And, if so, why?

  9. Kunal v says:

    I just started working on ZK and also new development field , i was trying to use your code as i want to develop one . Accordingly i downloaded the code and imported the code in my eclipse workspace using option – existing maven project but got 4 errors like missing artifact in pom.xml. I think resolved some issue by changing ZK version in it but it still has error which is as follows:
    ‘/home/kunal/.m2/repository/net/sf/jasperreports/jasperreports/4.5.1/jasperreports-4.5.1.jar’ in project ‘zkSocial-master’ cannot be read or is not a valid ZIP file.

    i manually went through terminal to that dir and it has the required zar but still it is not able to find.

    pls help me

  10. John Prekezes says:

    The example as it is runs fine on pc web browsers but not on tablets ie Galaxy tab 3 or Android 4.4 ZTEs.

    The problem is that when the top left button is pressed to enable the menu panel only a small portion of the panel appears.

    Can someone tell me on which mobile platform this example has been tested.
    Any advice to make it work with Android 4.x browsers?

Leave a Reply