...
MITRACK - Service requests (tc.gc.ca)
...
Responsive
In order to be inclusive to all users, we need to consider how our applications behave on smaller viewports. (For more information on viewports, see The viewport is the window to your site – Digital.gov.) While designing and building using responsive design principles will allow you to create an optimized layout for users accessing your application on smaller viewports, this is not the only benefit. This will also ensure you are supporting users with low vision who need to enlarge text by using the browser’s zoom function.
Allowing the content within cards in a list view to reflow from being horizontally stacked on larger screen sizes to being vertically stacked on smaller screen sizes is key to creating a responsive list view. Start by designing the vertically stacked cards for the smallest screen size, and then work with your development team to determine at what breakpoint(s) the content will begin to reflow. Once the design has been implemented, it’s important to test that the content and cards reflow as intended. Ensure that all content is visible, meaning it does not overlap or is situated outside of the screen.
Resources
External resources
...