Power Apps – Build a Responsive App – Planning
Introduction
A responsive app resizes the app based on the browser window and moves parts of the app to make the app work in different screen sizes. The most common sizes to handle are monitor, tablet and mobile phone. Just like a choreographer has work out the position of every dancer in a dance you need to work out the position and form of different elements at every screen size. Planning is vital
YouTube version
This series is to support my YouTube video.
The posts for this series are
Screen Sizes
Although the app can be made to react to even the smallest screen size change it makes logical sense to work with a few screen sizes and these are based on the width of the screen. The sizes we will work with are small, medium, large and extra large.
Layout Planning
For this series we will be working with a simple people app that will have three layouts. The Extra Large and Large size have the same layout, the Medium size rearranges the info boxes to be on top of each other and the small hides the info box completely and will have navigation to another screen for the info boxes.
Further Planning
Each container will need some planning to select how they will look in the different layouts. For example the Gallery in the Large and Extra Large layouts could container less data as you have the info boxes, where as the small only shows the Gallery on the front screen so although its a smaller screen you might want more information in the gallery.
Conclusion
You need at least a simple wire frame before you start creating the app. Each section of the screen probably needs extra planning but this can be done once you have the app structure working.
Resources
Microsoft have some resources found at
https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/create-responsive-layout
