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.