Introduction
PassKit offers a powerful platform for creating and distributing passes for Apple and Google Wallet. While PassKit allows for a high degree of customization, it's crucial to understand that the font style, size, and placement of text and images within these passes are not controlled by PassKit itself. These elements are determined and enforced by Apple and Google within their respective Wallet platforms.
Apple and Google Wallet dictate how content is displayed on a pass
Furthermore, it's important to note that when using the PassKit Portal Pass Designer, the image displayed in your browser is not an actual pass. It is a visual representation of a pass, designed to provide a user-friendly interface so that you don't need to learn the complexities of coding Wallet passes directly. This visual representation allows designers to arrange elements, upload images and preview the general layout.
A pass is created by combining a pass template with specific pass data. This combination results in a wallet file, which contains the pass definition. This wallet file is then signed with a signing certificate to ensure its integrity and authenticity. It's this signed wallet file, packaged appropriately, that is then delivered to the user and ultimately displayed within their Wallet app (Apple Wallet or Google Wallet). The final appearance of the pass within the Wallet app may differ slightly from the preview in the PassKit Portal due to the platform's styling rules.
This article clarifies the reasons behind these platform-imposed limitations and provides insights on how to best design your passes within these constraints.
Reasons for Wallet imposed Constraints
Apple and Google impose certain design constraints on passes to ensure a consistent, secure, and user-friendly experience. These restrictions, while sometimes perceived as limitations, are in place for several key reasons.
Consistency and User Experience
Apple Wallet and Google Wallet prioritize a standardized user experience across all passes. This includes controlling fonts, text sizes, and image placements to maintain a cohesive and recognizable visual identity. This consistency ensures users can quickly identify and interact with passes without confusion, regardless of the issuer.
Branding and Aesthetics
Both platforms maintain control over the appearance of passes to align with their respective branding and design guidelines. By restricting font usage, text size, and image placement, they prevent designs that might compromise the overall user experience or clash with the platform's aesthetic.
Accessibility
Apple and Google prioritize accessibility for all users, including those with visual impairments. Enforcing design limitations helps ensure passes remain readable and usable by a wide range of individuals, promoting inclusivity.
Technical Constraints
Passes are rendered dynamically on a variety of user devices. To ensure efficient rendering and consistent appearance across different screen sizes and resolutions, the platforms impose these limitations. Allowing complex customizations could lead to rendering issues, performance problems, or inconsistent display across devices.
Pass Design Constraints
Different pass types have slightly different layout constraints. While the core principles of platform control over font, size, and placement remain consistent, understanding the variations can help optimize your design. Here are some common pass types and their general layout characteristics.
Loyalty Cards
Membership Cards
Coupons
Event Tickets
Design Tips
Optimize Images
While image placement is restricted, ensure your images are appropriately sized and fit well within the allotted space. Avoid placing critical information near the edges of images, as these areas might be cropped or obscured on different devices.
Brand Alignment
Customize the pass colors, logos, and other visual elements within the platform's guidelines to align with your brand. Remember that font and layout are ultimately controlled by Apple and Google.
Use Clear, Concise Text
Passes have limited space, and text display is controlled by the wallet app. For the front of the pass, use short, impactful fields to convey the most critical information at a glance.
If the content of a field on the front of the pass is too long it will be truncated
Keep in mind that if the content of a field on the front of the pass is too long, it will be truncated with an ellipsis (...). There's no precise character count you can rely on, as Apple and Google dynamically adjust the amount of text displayed based on the user's font size settings on their smartphone. Multi-line text is better suited for the details section. Prioritize clarity and readability by using concise language, avoiding jargon, and keeping front-of-pass fields short and to the point.
Test Across Devices
Thoroughly test your pass on a range of devices and screen sizes to ensure it renders correctly and maintains its intended appearance within the platform's limitations.
Stay Updated
Platform guidelines can evolve. Stay informed about updates from Apple and Google to ensure your pass designs remain compliant with the latest standards.
Conclusion
While the limitations on font selection, text size, and image placement might seem restrictive, they serve to create a seamless, standardized, and accessible experience for users of Apple Wallet and Google Wallet. By understanding and working within these platform-defined constraints, and by recognizing the difference between the PassKit preview and the final rendered pass, you can design effective and user-friendly passes.