Best practices checklist

Responsive design checklist

✓ Viewport meta tag present। ✓ Mobile-first CSS approach। ✓ Flexible widths (%, em, rem)। ✓ Key breakpoints के लिए media queries। ✓ Responsive images (max-width: 100%)। ✓ Touch-friendly buttons (44x44px)। ✓ कोई fixed-width layouts नहीं। ✓ 320px, 768px, 1024px, 1440px पर test करें। ✓ Core Web Vitals optimized। ✓ WCAG 2.1 AA contrast ratio।

Common pitfalls जिन्हें avoid करना है

❌ Viewport meta tag को omit करना। ❌ Fixed widths और pixel-based layouts। ❌ Hover-only interactions। ❌ बहुत छोटा text (mobile पर < 14px)। ❌ Small tap targets (< 44px)। ❌ Unoptimized images (जरूरत से ज्यादा बड़ी images)। ❌ Real devices पर test न करना। ❌ यह मानना कि सभी screens 16:9 हैं।

Minimal responsive CSS template

हर project को इन essentials के साथ शुरू करें।

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; }

body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; }

img { max-width: 100%; height: auto; display: block; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }

@media (min-width: 768px) { html { font-size: 18px; } }

Progressive enhancement

Semantic HTML से शुरू करें, CSS से enhance करें, interactivity के लिए JavaScript जोड़ें। यह ensure करता है कि site CSS या JS fail होने पर भी काम करे।