Mobile-First: Tư Duy Đúng Đắn
Mobile-first không chỉ là responsive - đó là design philosophy. Bắt đầu từ constraints nhỏ nhất để có design tốt nhất.
Tại Sao Mobile-First?
Prompt Setup:
Tiếp cận mobile-first cho landing page:
1. Design mobile trước (< 640px)
- Single column layout
- Stack all elements
- Touch-friendly buttons (min 44px)
2. Enhance cho tablet (640px+)
- 2-column grids where appropriate
- Larger typography scale
3. Maximize cho desktop (1024px+)
- Full multi-column layouts
- Hover states
- Keyboard shortcuts
Tailwind Breakpoints
Standard Breakpoints:
Tailwind breakpoint system:
sm: 640px (landscape phones, small tablets)
md: 768px (tablets portrait)
lg: 1024px (tablets landscape, small laptops)
xl: 1280px (desktops)
2xl: 1536px (large screens)
Cách dùng: base styles là mobile, thêm breakpoint cho larger
Ví dụ: text-base md:text-lg lg:text-xl
Mobile Patterns
Navigation:
Mobile navigation pattern:
- Hamburger menu (top right)
- Full-screen overlay khi open
- Animation: slide từ right
- Close: X button hoặc tap outside
- Items: stack vertical, full width
- Active state: background highlight
Cards Grid:
Card grid responsive:
Mobile: single column, full width
grid grid-cols-1 gap-4
Tablet: 2 columns
md:grid-cols-2 md:gap-6
Desktop: 3-4 columns
lg:grid-cols-3 xl:grid-cols-4
Cards: width auto, height flexible
Touch Optimization
Touch-friendly design:
- Minimum tap target: 44x44px
- Spacing giữa tap targets: 8px minimum
- Button padding: py-3 px-6 minimum
- Form inputs: h-12 cho mobile
Đặc biệt:
- No hover-only interactions
- Swipe gestures cho galleries
- Pull-to-refresh cho lists
Typography Scale
Responsive typography:
Headings:
- H1: text-2xl sm:text-3xl lg:text-4xl
- H2: text-xl sm:text-2xl lg:text-3xl
- H3: text-lg sm:text-xl lg:text-2xl
Body: text-base (16px) - không đổi
Small: text-sm (14px) - không đổi
Line height: tighter trên mobile
leading-snug md:leading-normal
Common Mistakes
| Mistake | Fix |
|---|---|
| Desktop layout trên mobile | Stack thành single column |
| Tiny buttons | Min height 44px |
| Horizontal scroll | maxWidth: 100%, contain |
| Hover-dependent UI | Tap alternatives |
Prompting Cho Mobile
Review component cho mobile:
- Touch targets đủ lớn?
- Content có bị cắt không?
- Scrolling smooth?
- Forms dễ fill trên phone?
- Loading states visible?
- Error messages readable?
🎯 Key Insight: Nếu nó hoạt động tốt trên mobile, it will work great trên desktop. Ngược lại thì không chắc.