Decide on an app approach

What experience should users have when they launch your app? How many levels of browse pages will you provide? Will your app have a horizontal or vertical orientation, or different orientations for phone and tablet? What should your browse pages look like?

You can create different types of app experiences. Consider looking at existing apps to get ideas. See the list of use cases and examples at Inspirational resources for AEM Mobile.



App Design Video

Andrei Ganci and Martin Hecko delivered the following session at the Adobe MAX 2015 conference:

Designing Killer Mobile App Experiences (1:15:32)

Use separate designs for tablets and phones?

When you create a project, you determine whether you'll use the same top-level collection for phones and tablets, or different top-level collections. The primary reason for using separate top-level collections for tablets and phones is to add different content to tablets and phones. For example, your tablet app could include horizontal articles, and your phone could include vertical articles. See Creating projects for AEM Mobile.

If you want to use the same content for tablets and phones but specify different browse page layouts, you can create layout templates with different renditions for phones and tablets. See Creating cards and layouts: Layout renditions.

Decide whether you want to use a different design or different content for phones and tablets
Decide whether you want to use different content for phones and tablets.

Create content for your app

Use the Content and Layouts section of the On-Demand Portal to add the articles, banners, and collections that you'll be using in your app. Having content and collections in your project will help you experiment with different browse page designs.

Decide which format you'll use for your article files. For example, you can create reflowable HTML articles, or you can create fixed-layout articles based on source InDesign documents. See Methods for authoring AEM Mobile content.

When you create collections, choose the setting to determine whether they should open to the Browse Page (with layouts and cards) or to Content View (displays the first article of the collection).

Add articles to your project
Add articles to your project.

Create a "home" collection

When users launch your app, what should the initial experience be? Identify a collection that will be your "home" collection. There is nothing special about this collection. It just needs to be the first item in your top-level collection.

Add the items to your home collection. It can be any combination of banners, articles, and other collections. You'll determine the appearance of these items when you create cards and layouts.

Do you want users to be able to swipe left and right to swipe between different items in the top level? If so, select the Enable horizontal swipe to navigate content option. If you deselect this option, users need to tap cards or use the app menu to jump to different content.

Determine your top-level content

When you create a project, you indicate whether you want to use the same or separate top-level collection for phones and tablets. If you use the same top-level collection for both phones and tablets, a collection called "default" appears in the Collections section of the Portal. If you use different top-level collections for phones and tablets, collections called "default phone" and "default tablet" appear in the Collections section.

Use these collections to determine top-level content. The first item in this top-level collection should be your home collection. Any other item will appear in the app menu. In addition, swiping left and right from the home collection can cycle through other top-level content if the Enable horizontal swipe to navigate content option in the home collection is selected.

For details, see Managing collections in AEM Mobile.


Even though top-level collections do not appear in the app as browse pages, providing a Product ID and collection image is still required.

Manage collections
In this example, the the first item in the top-level collection ("default tablet") is the "Home" collection.

App menu display
The app menu displays the Brand Image (specified in project settings), the items added to the top-level collection, and an Account option.

With the Content Map, you can drag and drop items to change the app structure.

Create cards and layouts

You apply a layout to each collection to determine the appearance of the collection browse page. Each layout consists of cards that represent content—banners, articles, or other collections. You can create different layouts for different kinds of collections.

For more information about creating cards, see Creating cards and layouts.

Sample browse page with 5-column layout
Sample browse page with 5-column layout