Choose from different layouts to design mobile app sections.
While planning and designing your app’s content, keep in mind that a variety of layouts are available to organize menus, articles, videos, and anything else you would like to publish to your Outputs. These layouts display your content in the best ways for mobile viewing.
Mobile Layouts
Mobile layouts can be set in the Design tab next to each Section of your app.
Select the icon you would like to display for each Section. Then choose the layout for your Section. Below are examples of all the current mobile layouts available:
1. List
Utilize this layout for a classic, vertically-organized look.
The optimal aspect ratio of thumbnails - at which there is no cropping - in this layout is around 0.9:1
2. Cover List
Utilize for magazine issues.
Thumbnail of any aspect ratio gets fit without any cropping in this layout.
3. Full Tile
Utilize this layout for a singular focus per scroll.
Thumbnail of any aspect ratio gets fit without any cropping in this layout.
4. Carousel
Choose this layout for a series of images, PDFs, or videos (and intuitive swiping!)
Thumbnail of any aspect ratio gets fit without any cropping in this layout.
5. Feature Grid*
Choose this layout for a series of PDFs or articles, with an editorial display.
The optimal aspect ratio of thumbnails - at which there is no cropping - in this layout is any aspect ratio less than 1.2:1.
*This is a premium layout.
6. Mosaic
Utilize this layout to display image-driven content, such as menus or articles.
Because this layout consists of a repeated pattern of three different cell sizes. First or the top cell is in landscape and then the next two cells are in portrait and of the same size and are placed side by side below the top cell. So, for a regularly updated feed, the thumbnail of an item can be in the landscape cell at one point in time or in one of the portrait cells at another point in time.
The optimal aspect ratio of thumbnails - at which there is no cropping - in this layout is 1.6:1 for the landscape cell and 0.8:1 for the portrait cells.
7. Square Cards
Select the Cards layout for image-focused vertical display.
The optimal aspect ratio of thumbnails - at which there is no cropping - in this layout is 1.15:1.
8. Text Chooser
Utilize this layout for a straightforward text style.
9. Full Screen
Utilize this layout for a full screen view of image and video content, that also allows for a description.
Because in this layout, the original image of the thumbnail is centered and displayed as is in the cell and the height of the cell is directly proportional to the screen height, some cropping of the thumbnail is inevitable.
10. Square Tile
Choose this layout for a similar spotlight as Full Tile, but with titles that overlay the image.
The optimal aspect ratio of thumbnails - at which there is no cropping - in this layout is 1.14:1.
11. Image Chooser
Select this layout for image-focused menus and PDFs. You have the option to show or hide titles.
Because here the cell size is decided by the screen size, the fitting of thumbnails varies from device to device.
Titles
Hidden Titles
12. Podcast
Select the Podcast layout for your native audio content. This layout contains podcast specific UI to highlight episode descriptions, thumbnails and audio playback navigation.
13. Full Cards
Select this layout for daily content feeds. Highlight article thumbnails with titles below each article. A "tetris" look and feel and makes a good choice for articles without images as well.
Thumbnail of any aspect ratio gets fit without any cropping in this layout.
14. Video Grid
More video thumbnails per row to make it that much easier to navigate through large video archives!
Note: The background of this layout can be changed from the backend. If you would like to change it to some color other than white, please write to success@mazsystems.com.
Finally, if you would like to change the logo displayed when navigating to a particular section, upload that logo in these settings.
These layouts provide a variety of content-creating possibilities – experiment & explore all of the ways your app can shine.
The optimal aspect ratio of thumbnails - at which there is no cropping - in this layout is 1.77:1 for landscape orientation and 0.75:1 for portrait orientation.
IMPORTANT NOTES: For both Articles and Images, Subtitles and Descriptions are only visible to the user in feeds where the layout in Experience Creator is set to Detail View. Certain themes like Image Chooser, Text Chooser Podcast, Featured Grid, and Video Grid do not support Ad articles.
Publishing to OTT? Check out our OTT Layouts.