I said Being Responsive, not Responsible 😜
Just in case any folks were worried that I was growing up, there’s zero chance of me being responsible. Instead, this post is about incorporating Responsive design into what we build.
This post applies to Power Apps, Power BI Reports & Dashboards, Power Pages sites, and more. There is also crossover with the “O – Overflowing with content” and “L – Layout Containers” posts.
What does Responsive mean?
In a world of different screens, sizes, orientations, and more there is no one layout to rule them all. What works on a 4k 32″ screen will well look cramped and tiny on a 12″ laptop screen at 1080p. It would look even worse on a mobile phone that has a weird screen ratio and resolution.
Responsive design means that a design (app, dashboard, page etc) adapts and flows according to the screen being used. Objects can slide below one another, text sizes can adjust, and controls are able move around. This ensures that they can fit common design practices for mobiles versus desktops.
The Mozilla Developer Network has a great page on Responsive Design which is well worth a read by clicking here.
Well adjusted – the content that is
Responsive design is not just about layout, it’s about size as well. In web design having an image that is a forced 1920-pixel width will not always display nicely on a portrait-oriented phone or tablet. Utilising percentages when setting sizes allows the content to scale according to the display. The image will also not scale above the actual image size so there is no concern about pixelation or blurring.
The same rule can apply to any form of sizing in a Power App, Power Pages page, or Power BI Dashboard or report. Setting a base size as an anchor and then using percentages ensures content scales proportionally. This includes when users zoom in or out of content and helps ensure the design integrity remains along with the accessibility and usability.
Keeping the flow
Part of being responsive is the inevitable moving of things around to suit the screen or the device being used. This also applies when people use zoom to aid visibility.
When doing this it is always important to make sure that the flow of the controls remains consistent. This applies in both the context of objects moving around, and the logical flow of the information or process.
A responsive design should always keep the logic in place. This then means that someone can say “The control is to the right or directly below this object”.
A bad example is where the “responsive design” moved all objects on the right below ALL objects on the left! This led to much confusion and disruption, and the service desk hated this application for that reason.
Applying a Z-pattern to content – going left-to-right then top-to-bottom – makes it easy to move content around. If the Z shrinks, then the objects move down in that order so that the flow remains. Using Layout Containers, Sections, and other grouping mechanisms allows for keeping content grouped together and means objects don’t get split apart.
How does Responsive design affect Accessibility?
So far this post has looked at responsive design as a whole, but no mention of accessibility. Let’s rectify that now!
As I’ve covered in other posts in this series, people use a variety of customisations or devices to support them in their daily lives. For people with vision-related disabilities they can use high levels of zoom or screen magnifiers. Another method is to have the Display Scaling in Windows set to 200% (as an example).
One person may use monitors that are wide or tall. Other people may use different devices, such as mobile devices (phones / tablets). Additionally people may have overridden the typeface with the Open Dyslexic font or similar, which will impact how the screen flows.
Providing solutions that are designed with responsiveness in mind ensures that all of these people will be able to utilise what we build. Not only that, but it ensures that their experience of it is not lesser compared to a “standard” user.
The importance of testing
In all things testing is an important step, but with responsive design this requires some clear thinking and planning. As part of the testing processes the below should be included in with standard test steps:
- Test Landscape and Portrait orientation
- Use different Screen Resolutions and Scaling options
- Zoom in and out – set the zoom to 200% and more (people with vision issues can use very high zoom levels!)
- Resizing the window mid-flow
It is possible to use browser extensions to simulate specific screen resolutions or devices. This can also be done within some maker portals in the Power Platform. This provides a good “finger-in-the-air”, instant feel, type of test but testing should ideally be carried out on different devices. Doing so then caters for the quirks and differences of operating systems, screens, scaling etc.
Thank you for being responsive to this post 😊
If you’ve made it this far then thank you for reading this installment of the A to Z Accessibility: Power Platform Edition. Hopefully you have found it useful and it will encourage you to include responsive design as part of your solutions. You can find all the posts in the A to Z series at the introductory article here, or clicking the “» A to Z «” in the main navigation bar.
This post is © 2025 Mike Hartley so please don’t copy the whole thing and take the content. Use of small extracts is allowed with attribution. Please contact me if you want to use anything more than that.