DEVELOPERS BLOG

Developing Cross-Platform UIs for the Enterprise, Part 1: Introducing the PantherUI Carousel

pantherui_1

Challenges

As Enterprises try to figure out their device strategy of whether to support BYOD (Bring Your Own Device), CYOD (Choose Your Own Device), COPE (Corporate Owned, Personally Enabled) or CLEO (Corporate Liable, Employee Owned), the benefits of building cross-platform hybrid applications becomes more obvious. Although native apps offer better performance, web apps simplify development, reduce costs, provide device flexibility and future-proofing, and they have a faster time-to-market. Hybrid apps can give you the best of both worlds — they’re built using web technologies, and they run inside a native container that has access to device capabilities.

Given that HTML5 and tools like PhoneGap/Cordova have made cross-platform development much easier, one of the challenges that developers still struggle with is how to handle different screen sizes and orientations. If that wasn’t hard enough, some enterprises also want their apps to work on larger tablets, desktop screens and even TVs. The reason for this is: (1) a company may have to migrate from a legacy desktop app so they need to re-use existing assets because they don’t have time to rewrite those pieces, or (2) a company may have requirements to build a seamless app for their users so they can move from their office to a meeting room to their car.

Use Virtual Space

Of course, the focus and functionality of such a desktop app will be very different from the mobile app, but if we use a Mobile First approach and Responsive Web Design (RWD), we can get closer to a layout solution that works across multiple devices and platforms. In fact, this was the motivation for creating the PantherUI Carousel — to provide a responsive template that leverages the maximum amount of usable space by utilizing depth and extended virtual space.

In Figure 1, notice how each carousel is multi-sided. By using 3D panels that can be rotated using swipe gestures, and carousels that can be scrolled horizontally in an extended screen, we can significantly increase our screen real estate.

pantherui_2

Figure 1: Small Smartphone (Square)

Tips From Downsizing Your Home

However, just because we can load all these panels with content doesn’t mean we should. Designing for mobile is a lot like downsizing from a large 2500 sq. ft. house to a tiny 700 sq. ft. apartment. All the stuff that was stored in your 2-car garage, basement, attic, and backyard shed is not going to fit on your balcony. Although you’re moving the same stuff, you have to make decisions about what items to get rid of, what needs to be replaced, and how to layout your furniture. The same applies to mobile content — be selective and only provide what a person will actually use.

There are also many interior design tips that we can use to make our “place” look bigger:

  • By hiding navigation, we can remove unnecessary clutter to keep our space clean.
  • By using slightly transparent panels and lighter colors, we can let in more light to open up the space.
  • By using a monochromatic color palette, we can define a more cohesive space that is balanced.
  • By organizing our content into logical blocks, we can create multi-functional furniture like a sofa bed.

So in Figure 2, notice how the layout automatically switches to a semi-stacked layout for a larger mobile screen. In this case, Carousel 1 is used for displaying actual content while Carousel 2 and 3 are used for showing lists and debugging information. In practice, Carousel 2 can be used to drive the content in the other carousels based on the context. It can turn carousels simultaneously to a specific side, and dynamically add panels as new data comes in.

pantherui_3

Figure 2: Large Smartphone (Portrait)

For larger screens (see Figure 3), we can fit all the carousels without needing an extended screen. This gives us the best user experience, and we can make it better by letting the user maximize and restore the size of each carousel.

pantherui_4

Figure 3: Tablet and Desktop (Landscape)

Under The Hood

So how did we do this? Basically, we used some of the latest features in CSS3 (transforms and animations) to create the carousel and panels with a 3D perspective. Here’s a code snippet of the important parts:

<style>
.panther-Carousel-container {
 perspective: 1050px;
}
.panther-Carousel-carousel {
 transform-style: preserve-3d;
 transition: all 750ms ease;
}
</style>
<section id="container1" class="panther-Carousel-container">
 <div id="carousel1" class="panther-Carousel-carousel">
 <figure style="transform: rotateY(0deg) translateZ(180px);">
 <!-- Panel 1 -->
 </figure>
 <figure style="transform: rotateY(90deg) translateZ(180px);">
 <!-- Panel 2 -->
 </figure>
 <figure style="transform: rotateY(180deg) translateZ(180px);">
 <!-- Panel 3 -->
 </figure>
 <figure style="transform: rotateY(270deg) translateZ(180px);">
 <!-- Panel 4 -->
 </figure>
 </div>
</section>

To create the extended screen, we simply used CSS media queries, position and size properties, and set the body to scroll horizontally for overflow content.

/* BlackBerry 9900, Q5, Q10 */
@media (device-aspect-ratio: 1/1) {
 html, body {
 overflow-x: auto;
 }
#container1 {
 width: 100%;
 height: 100%;
 }
#container2 {
 top: 0;
 left: 100%;
 width: 100%;
 height: 100%;
 }
#container3 {
 top: 0;
 left: 200%;
 width: 100%;
 height: 100%;
 }
}

To support other devices and orientations, we just used more media queries. The nice thing about CSS is you only need to modify the properties that are different so you don’t need to create bloated stylesheets for each device.

This responsive 3-Carousel Layout is one of several templates in the PantherUI Carousel. Other templates include:

  • 1-Carousel
  • 2-Carousel
  • Backgrounds and Buttons
  • Callback Function
  • Direction
  • Easing (Custom Timing Functions)
  • 1-Handed Thumb Use
  • URL Hash Parameter
  • Keyboard Support
  • Theming
  • Ticker
  • Thumbnail Grid
  • Slideshow

Hopefully, this gives you an idea of one approach to handling cross-platform layouts. In Part 2, I’ll cover some of the Lessons Learned, and in Part 3, I’ll introduce some Lightweight UI Frameworks.

About myjing