[Front end] Prepare for Mobile First World #725
Description
Context
Our app is currently designed and built in a desktop-first web manner. We'll need to take a mobile-first approach and take responsive design into account.
Definition of Done
- app works well in common mobile / desktop / tablet etc browsers (latest -2 versions)
- easy to maintain and modify breakpoints and related UI
Engineering Details
We ideally have one set of code for each component / page that has as its base a mobile layout that gracefully and progressively scales up via breakpoints and/or fluid layout.
As an example, mobile-hazard-cards and hazard-cards (and their associated files) would be collapsed into one set of files with responsive design taking care of the changes between different eg viewports.
Potential sub-issues
- help UX via prototyping and spikes?
- [Dependency] Important to finish before marketing efforts
- [Dependency] Need UX/Design guidance for this, especially w/regards to responsive design (looking for something in Figma similar to this, but mobile-first and with responsive design in mind)