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