File size: 1,348 Bytes
292d92c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
Evaluate mobile-friendliness and propose responsive design improvements.
Your task:
1. Audit current responsive design:
- Test at common breakpoints (mobile, tablet, desktop)
- Check viewport meta tag
- Evaluate touch targets (minimum 44x44px)
- Test horizontal scrolling issues
- Check font sizes on mobile
2. Identify issues:
- Text too small to read
- Content wider than screen
- Links/buttons too close together
- Images not responsive
- Poor mobile navigation
- Viewport not configured
3. Propose improvements:
- Add/fix viewport meta tag:
```html
<meta name="viewport" content="width=device-width, initial-scale=1">
```
- Implement responsive images:
```html
<img src="image.jpg" srcset="..." sizes="..." alt="">
```
- Fix CSS for responsive layout:
```css
@media (max-width: 768px) {
/* Mobile styles */
}
```
4. Mobile-specific enhancements:
- Touch-friendly navigation
- Hamburger menu if needed
- Appropriate spacing
- Readable font sizes (minimum 16px base)
- Optimized images for mobile
5. Testing recommendations:
- Chrome DevTools device mode
- Real device testing
- Mobile-Friendly Test (Google)
- Lighthouse mobile audit
Deliver a comprehensive mobile optimization plan with actionable improvements.
|