“Universal” apps allow you to build and deploy a single app that automatically presents phone-specific UI on phones, and tablet-specific UI on tablets.
Let’s examine the technique.
When building mobile apps to reach phone and tablet users, there are two options for supporting tablets:
The first option is the easiest and least expensive because it only requires one app design. It eliminates the need to work through a second design for an app that is optimized for tablets.
Of course, Option #1 also fails to treat tablets like a unique form factor. More than a bigger screen, tablets have unique UI conventions not found on smartphones, such as the split views common in iPad apps. Developers serious about targeting tablets should aim to deploy apps that are optimized for these unique usability requirements. Building one app with one UI is easy, but it’s not enough to properly target multiple form factors.
Universal apps simplify the deployment of two distinct app experiences, while simultaneously making it easier for developers to share common app code between phone and tablet app variants (like common data handling code). When developers take the time to design unique experiences for both form factors, universal apps help put the right experience on the right device.
Fortunately, Kendo UI Mobile provides both tablet and phone specific UI widgets. Developers can leverage these widgets to create a perfectly tailored UI for both form factors, and then apply the following universal technique to easily deploy the results.
Building a universal mobile app using Kendo UI Mobile is not automatic, but it is very simple. There are 3 steps involved in the entire process:
That’s it. Like I said, easy. The result allows the same deployed app to look like this on phones:
And like this on tablets:
In code, handling a universal app looks something like this:
You can try a live example using this jsFiddle. To test the behavior, I recommend using Chrome and the built-in Developer Tools to override the browser’s User Agent. Try changing between an iPhone and iPad UserAgent to see how the app initializes differently (refresh the page to see the app reinitialize).
REMINDER: Kendo UI Mobile only supports Webkit browsers today, so the previous demo will not work in IE or Firefox. Please use a mobile device or Chrome/Safari to view the demo.
In english, the prior code snippet is conceptually doing this:
In the example linked above, I use this technique:
As you can see, both HTML containers for the tablet and phone views are initially hidden via CSS. As part of the loading process, the correct container is shown after the Kendo UI Mobile application has been initialized:
You could make the effect even fancier with CSS3 transitions and opacity:
Now the correct app will fade in to view (hardware accelerated by CSS), and the unused views will remain properly hidden. No flash of uninitialized HTML. No ugly plain HTML displayed to users before your app is ready to go.
After trying this technique, the question often arises: “Why doesn’t Kendo UI Mobile automatically adapt phone UI for tablets?”
The answer is simple: we don’t know how. It’s not that we’re technically incapable, but adapting a phone UI to a tablet UI is not so dissimilar from trying to automatically adapt desktop UI to a phone. They are fundamentally different platforms with different usability considerations, and something that makes sense on phones may or may not belong on tablets. There is no predictable way to automatically transpose phone UI to tablet-specific UI.
Of course, Kendo UI Mobile apps can be built to run on both tablets and phones with a single UI, but as with any “one size fits alls” app, you will lose the benefit of optimizing for specific platforms.
What about responsive design, you ask?
Responsive design is great for creating mobile sites, but it’s not as useful for creating mobile apps. Responsive design can help you hide, show, resize, and reformat UI for screens of varying size, but it is less suited for presenting completely different modes of usability on different form factors.
This is where we need your feedback again. We think the process for creating and configuring universal apps with Kendo UI Mobile is easy today, but clearly we could do more to make the process even easier to configure.
What else would you like Kendo UI Mobile to do for you if you’re building universal apps? Should we make it easier to define the entry points to the phone/tablet app UIs? Should we enhance any of the APIs?
Let us know. Sound-off in the comments and on the Kendo UI UserVoice site: feedback.kendoui.com.
For now, have fun building (and deploying) universal mobile apps created with Kendo UI Mobile!
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required