| 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. |
|
|
