Build Responsive Apps with Power Apps | Online | Tue 13 Apr 2027

* Please note that this is an online course, delivered remotely by a live instructor *

Duration: 2 Hours

Course Overview

Modern business apps need to provide a consistent and intuitive experience across phones, tablets, laptops, and desktop screens. This practical course introduces app makers to the principles and techniques used to create responsive Canvas Apps in Microsoft Power Apps.

Participants will learn how to structure screens with responsive containers, adapt layouts for different screen sizes and orientations, apply consistent branding and themes, and use reusable components to improve maintainability. Demonstrations and guided activities will help participants redesign fixed-layout screens as flexible, professional app experiences.

Audience

This course is designed for Power Apps makers, citizen developers, Microsoft 365 Champions, business analysts, and other users who create or maintain Canvas Apps. It is particularly suitable for app makers who understand basic Power Apps controls and formulas but want to produce more flexible, consistent, and professional solutions for users working across different devices.

Course Prerequisites

Participants should have introductory experience creating Canvas Apps in Microsoft Power Apps. They should be familiar with adding screens and controls, setting properties, connecting to a data source, and using simple Power Fx formulas. No traditional programming experience is required.

If you don’t feel you have the required prerequisite experience, you may want to attend our Power Apps for Super Users course prior to attending this course.

Course Modules

Module 1: Principles of Responsive Power Apps Design

This module introduces responsive design and explains why fixed-position layouts can create usability problems across different devices and window sizes. Participants will examine the relationship between screen dimensions, orientation, control positioning, and available space. The module establishes a practical design approach that can be applied throughout the app-building process.

• What is responsive app design?
• Understanding fixed and responsive layouts
• Screen size, aspect ratio, and orientation
• Designing for variable width and height
• Planning content hierarchy and screen structure
• Understanding responsive property formulas
• Using relative sizing and positioning
• Responsive design considerations and common pitfalls

Module 2: Building Layouts with Containers

This module focuses on using containers to organise controls and create layouts that adapt automatically as the available space changes. Participants will work with horizontal and vertical containers, configure alignment and spacing, and combine containers to construct common interface patterns. The module also demonstrates how a well-planned container structure can simplify ongoing design changes.

• Understanding layout containers
• Horizontal and vertical containers
• Container width, height, direction, and alignment
• Configuring gaps, padding, and overflow
• Using flexible and fixed-size content areas
• Nesting containers to create structured screens
• Building responsive headers, navigation, and content areas
• Restructuring an existing fixed-layout screen

Module 3: Designing Mobile and Desktop Experiences

This module explores how to create an app that remains useful and easy to navigate on both smaller mobile screens and larger desktop displays. Participants will learn how to adjust layouts, visibility, navigation, and content density according to the available screen space. The focus is on creating one coherent app experience while making deliberate design choices for different device categories.

• Comparing mobile, tablet, and desktop experiences
• Using breakpoints and screen-width conditions
• Changing layout direction for smaller screens
• Showing, hiding, or repositioning controls
• Adapting navigation for compact layouts
• Managing galleries, forms, and content density
• Supporting portrait and landscape orientation
• Previewing and testing at different screen sizes

Module 4: Branding, Themes and Visual Consistency

This module demonstrates how to apply a consistent visual identity across a responsive Canvas App. Participants will consider colour, typography, spacing, control states, and accessibility when defining the look and feel of an app. The module also introduces practical methods for centralising design choices so that branding can be updated more efficiently and applied consistently throughout the solution.

• Establishing an app colour palette
• Applying consistent typography and spacing
• Creating visual hierarchy across screens
• Designing consistent buttons, inputs, and navigation
• Using variables or named formulas for theme values
• Applying themes across responsive layouts
• Colour contrast and accessibility considerations
• Maintaining consistency as the app evolves

Module 5: Creating and Using Reusable Components

This final module introduces reusable components as a way to standardise common interface elements and reduce repeated design work. Participants will learn how components can support consistent navigation, headers, notifications, and branded elements. The module concludes with guidance for testing the complete responsive experience and maintaining a scalable design system across future apps.

• Understanding Power Apps components
• Identifying suitable reusable interface elements
• Creating responsive headers and navigation components
• Working with component input and output properties
• Applying branding within reusable components
• Reusing components across screens and apps
• Testing responsive behaviour and usability
• Design standards, maintenance, and next steps