Build Responsiveness into Your APL Templates

Responsiveness is the ability of an APL template to adapt its visual appearance and functional behavior to the needs of different screen characteristics. These characteristics include display dimensions and shapes, device modes and orientation. To avoid you needing to consider every single combination of these settings when you design your visual UI, APL introduces viewport profiles. For details about viewport profiles and how to use them, see Viewport Profiles on the APL technical documentation pages.

Amazon already provides best practice guidance about building responsive APL documents and how to support different types of devices in an APL design. Moreover, the Alexa Design System for APL provides useful development resources to implement responsive designs. There is the ever-growing alexa-layouts package provided by Amazon that gives you pre-built responsive component and templates to add to and customize in your individual APL templates so that responsiveness is covered for you right from the start.

If you need to customize UI elements, you cannot entirely rely on pre-built responsive components and templates that are part of the Amazon-provided alexa-layouts package. When you need to build your own responsive APL components, consider the following best practices:

  • Familiarize yourself with APL Viewport Profiles and use them whenever possible, unless you have a requirement to address specific viewport characteristics individually. For example, don't write logic that checks for viewport size in absolute dimensions. Instead, write logic that checks for a specific viewport profile such as @hubLandscapeMedium.
  • Familiarize yourself with Alexa Styles and Resources from the alexa-styles package. They provide standard color and font themes, responsive resource dimensions, and more, and use them for creating your own responsive APL layout components. These pre-defined resources and styles allow you to create consistent visual experiences across different devices while also sticking to Amazon best practices in terms of UI dimensions, colors, and more.
  • Learn from Responsive Component and Templates and explore their changing behavior and appearance with different viewport settings. In fact, all components and templates contained in the alexa-layouts package use pre-defined styles and resources from the alexa-styles package and they apply design best practices as they are described in the Alexa Design System for APL and the UX design guide on Multimodal Design: Introduction.
  • Get practical knowledge solving the most common design tasks and challenges by reading the Display Content on Screen pages in the APL technical documentation as they also provide useful tips on making APL components responsive e.g. considering to add padding to APL Text components on round screens.
  • Use APL Styles and make use of Style Definition and Evaluation features as a best practice to dynamically change a set of styled component properties that should depend on certain viewport characteristics.
  • Use APL Resource blocks that are conditionally defined based on certain viewport characteristics. By using APL resources you are able to dynamically apply viewport-specific dimensions, colors, strings, numeric values, easing functions, etc. to properties of an APL component.
  • Consider using APL Conditional Component Inflation to make more fundamental changes to APL template layouts. Conditional inflation allows you to include or exclude APL components efficiently.
  • Refer to Localize your templates efficiently. Most of the concepts presented there can apply to building responsive templates as well. Technically, creating dynamic components to adapt to changing viewport characteristics is similar to preparing them for localization. In both cases, their visual design and functional behavior can change based on changing environment settings.
  • Think beyond responsive design. Some devices come with different input modalities like remote control on Fire TV. Navigating through the visual UI using a cursor or remote control is different from using touch and requires functional changes to the APL template as well. For example, it is important to visualizing UI elements that are focused or hovered by a cursor or remote. Familiarize with Component state control using APL styles, Keyboard Events and Handlers and Gestures control to get a sense of what specific functional needs user interfaces can have and how to address them in a proper way.
Was this page helpful?

Last updated: Nov 28, 2023