Branding Specifications
Overview
Setting up the mobile branding for your company's MangoApps mobile application is essential for ensuring a seamless, branded experience for employees. This guide walks you through the necessary steps and specifications for configuring your MangoApps mobile app, covering required resources, branding elements, and distribution processes.
Icon and Login Collateral
To start setting up your mobile branding, your Account Management team will need to the following from you:
Company Logo: Provide your company logo in vector formats (.AI or .SVG) for scalability across different devices.
Application Name: Decide on the name of your application, as it will appear on the phone’s home screen and in alerts. Unlisted App option only.
Application Icon: Design an icon (1024 x 1024 px) for the app, to be displayed on the phone’s home screen.
Splash Images: Prepare splash images that will appear when the app is launched. Multiple sizes are required. Unlisted App option only.
iPhone X and newer: 1242 x 2688 px
iPad (Portrait): 1536 x 2048 px
iPad (Landscape): 2436 x 1125 px
Mobile Specific Branding Elements
Most branding elements within your mobile app will automatically inherit the branding used on your MangoApps web portal. However, a few options can be customized to apply just to your mobile platform.
These include:
Mobile Login Screen Background: Minimum resolution of 1257 x 1536px
Mobile Home Page background Image: Recommended size for mobile: 750 x 450 px
Widget Headers: Mobile widgets will all share the 1 column widget header recommended size. Minimum: 400 x 96 px Recommended: 600 x 144 px.
Company Banner
Unlike the desktop version, the banner on mobile and tablets does not include widget-like effects. Instead, it maintains a clean and simplified appearance, adhering to the design mockups.
The company banner has a fixed height of 60px/pts. The width dynamically adjusts based on the device's screen size, ensuring optimal display across different devices.
Company Hero Banner
The hero banner also features a fixed height of 60px/pts, with a responsive, full-width design that stretches end-to-end on all devices. This ensures a seamless and consistent user experience, aligning with the desktop layout while maintaining mobile-first responsiveness.
Last updated