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.

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.

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.

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:

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.

If you’re interested in learning the fundamentals of building BlackBerry 10 Cascades or WebWorks apps, we have a series of over 30 (and counting) online courses to help you get started. These courses can also be useful if you’re planning on taking the BlackBerry Certified Builder exams and need some extra resources to get prepared.

Each and every one of the BlackBerry 10 Cascades and WebWorks courses include the following:

an online lesson, typically around 15-30 minutes long

a downloadable, self-directed lab exercise to give you the opportunity to apply the concepts you learned in the online lesson

a quick quiz to help assess your knowledge of the info covered in the lesson and lab

a dedicated message board to post questions or comments relating to the specific course

Additional courses are on their way and we’ll also be updating all of the existing courses once the BlackBerry 10.2 Gold SDKs are released, so check back here and our Developer Zone often for new and updated resources!

Have you downloaded the BlackBerry 10.2 SDK beta? If so, your first step should be to check out the updated UI Guidelines for BlackBerry 10. The BlackBerry 10 UI Guidelines explain the key design principles on which BlackBerry 10 was founded, teach you about designing for different screen resolutions, and document best practices for implementing BlackBerry 10 specific features. The UI Guidelines are an important tool to utilize when designing and developing your app.

We’ve just updated the UI Guidelines to help developers learn even more about great design and make it easier to build beautiful apps:

We’ve added an Earconography section that explains what’s involved in good sound design. Each of the default BlackBerry 10 sounds are available for you to listen to, and you can read about the thought process and intention behind each one.

Wireframe prototypes are now available! Dozens of images have been created and are available for you to use when mocking up your UI designs. We’ve also documented best practises to keep in mind when prototyping your UI.

Fluxible is a new conference this September that brings user experience and design experts from around the world together for two days of workshops and talks. The team at Research In Motion® (RIM®) is especially excited that our own Dan Gärdenfors (Senior Concept Designer of The Astonishing Tribe) has just been announced as closing keynote speaker.

While I was making my way back from the BlackBerry® 10 Jam World Tour and @StartupFest in Montreal, I had the chance to speak with Mark Connolly, one of the organizers of Fluxible, about the origin of the conference, who should attend, and what the event means to the region of Waterloo.

Thanks for taking time to talk with us. Who should register for the conference?

Fluxible was conceived for UX practitioners and researchers – but it’s also a great opportunity for developers, product managers, and others who want to learn about designing front end interfaces and experiences.

I took a look at the agenda and you’re definitely taking advantage of the event spaces here in town.

Yes, we’ve had great support from Communitech. We’re starting at the Conrad Centre for the Performing Arts, which is where the main talks will be. We then move to Kitchener City Hall for a Saturday evening party, and then finish at the Communitech Hub on Sunday with the workshops. It’s very exciting.

What does Fluxible mean to the Waterloo region?

As you likely know, design has become crucial to the success of products and companies in the last several years, and the Waterloo Region has developed the same focus on design that has been visible globally. Bob (Bob Barlow-Busch) and I, as long time champions of uxWaterloo Communtech Peer 2 Peer (P2P), have seen this increased interest and awareness firsthand. To us, the awareness is another sign of the maturation of the region’s transformation into a digital economy. Fluxible is not only an opportunity to show what’s happening in Waterloo Region to the larger UX world, but also to bring the larger UX world to Waterloo Region. In addition to Dan as a keynote speaker, we have an amazing lineup of speakers who will be delivering terrific talks and workshops. Do check them out.

Definitely sounds like it’s going to be a great event.

We think so too! This is the first event of its kind in the area, and we’re really looking forward to attendees coming in from the region, the province, and around the world. It’s an opportunity to network and have a great time.

Early bird registration is open now and available until July 31. For information, check out the Fluxible site. The Fluxible conference takes place on September 22nd and 23rd, 2012.