Design variables (spaced, colors, radios and shadows), a fluid typographic scale for mobile, a responsive container with `padding-inline 'insurance and global rules that avoid horizontal overflows were added.
Comparisons before and after for lists in multiple screen sizes.
Cards and mobile detail view were improved: consistent padding, Responsible chips, accessible buttons and containers that avoid design leaps.
Comparisons before and then are found in external files due to the restrictions of repository binaries.
The catches before/then are also stored externally.
- Design foundations and fluid typography.
- Navigation settings and accessible controls.
- Review of lists and responsive tables.
- Cards and detail view with fluid components.
- Administrative metric panel.
- QA Final mobile and documentation.
| Viewport (px) | Chrome/Android | Safari/ios |
|---|---|---|
| 360 × 640 | ✅ | ✅ |
| 390 × 844 | ✅ | ✅ |
| 414 × 896 | ✅ | ✅ |
| 768 × 1024 | ✅ | ✅ |
No horizontal displacement in key views and lighthouse ≥ 90 in good practices and accessibility.
| View | Before | After |
|---|---|---|
| List of talks | * (External: Talk-list-before.png)* | * (External: Talk-list-after.png)* |
| Talk detail | * (External: Talk-dotail-before.png)* | * (external: talk-dotail-after.png)* |
| Admin metric panel | ! [Before] (admin-metrics-before.png) | ! [After] (admin-metrics-after.png) |
| Login screen | * (External: login-before.png)* | * (external: login-affter.png)* |
- Verified AA contrast
- keyboard navigation
- Aryan labels in critical buttons
- [] lazy-load in long lists *(all future iteration) *
-
font-display: swapin web sources *(no external sources are currently used) * * - CLS <0.1 on lists thanks to `Aspect-Ratio 'reserved
- [] lazy-images on lists *(all future iteration) *