bcgov
ASA: Responsive Layouts
User Story As a user of ASA, I want to see what the layout for a smartphone and tablet could look like, so that I can understand what features should be the most prominent for the screen sizes.
Background: With utilizing the "mobile first" paradigm for BC Government apps, we need to start using MUI components that will scale well to accommodate varying device widths (Desktop, laptop, tablet [portrait and landscape], smartphone [portrait and landscape]). This will give us the opportunity to do UX research with partners to determine their needs. This is towards the Cadillac.
Raj current creating Figma components that will scale their containers and contents to various sizes in order to allow them to be responsive for different device screen widths. Breakpoints need to be identifed by the devs. Suggestions:
@media (max-width: 480px) { /* Styles for small devices */ }
@media (min-width: 481px) and (max-width: 767px) { /* Styles for medium mobile devices */ }
@media (min-width: 768px) and (max-width: 991px) { /* Styles for tablets */ }
@media (min-width: 992px) and (max-width: 1199px) { /* Styles for tablets in landscape */ }
@media (min-width: 1200px) and (max-width: 1599px) { /* Styles for small desktops */ }
@media (min-width: 1600px) { /* Styles for large desktops */ }
Needs more consideration around whether we go with a mobile app or a responsive website.
Standard @mui breakpoints: https://mui.com/material-ui/customization/breakpoints/
Mockups for desktop, tablet and mobile available in Figma, ASA 14D, 14T and 14M. Ready for discussion.
Raj to include the frames for the devices and explore using a bottom tab navigation for switching views.
Raj to validate that controls and buttons for mobile meet standards criteria for usability (fat finger.) Create meeting with team for week of Nov 25 to confirm layouts are good to go towards mobile.
Reference: ASA 15Ma - Map
Raj to separate "ASA Go - Map Overview - Large Nav Up - Draft 1" so there's one component per screen to aid in legibility.