aa489c7eb8
Add detailed landing page development plan in docs/frontend_landing_plan.md: - Complete landing page structure (Hero, Problem/Solution, Features, Demo, CTA) - Design guidelines from downloaded skills (typography, color, motion, composition) - Security considerations (XSS prevention, input sanitization, CSP) - Performance targets (LCP <2.5s, bundle <150KB, Lighthouse >90) - Responsiveness and accessibility requirements (WCAG 2.1 AA) - Success KPIs and monitoring setup - 3-week development timeline with daily tasks - Definition of Done checklist Download 10+ frontend/UI/UX skills via universal-skills-manager: - frontend-ui-ux: UI/UX design without mockups - frontend-design-guidelines: Production-grade interface guidelines - frontend-developer: React best practices (40+ rules) - frontend-engineer: Next.js 14 App Router patterns - ui-ux-master: Comprehensive design systems and accessibility - ui-ux-systems-designer: Information architecture and interaction - ui-ux-design-user-experience: Platform-specific guidelines - Plus additional reference materials and validation scripts Configure universal-skills MCP with SkillsMP API key for curated skill access. Safety first: All skills validated before installation, no project code modified. Refs: Universal Skills Manager (github:jacob-bd/universal-skills-manager) Next: Begin Sprint 3 landing page development
60 lines
1.5 KiB
Markdown
60 lines
1.5 KiB
Markdown
|
|
### Mobile-First Design
|
|
|
|
**What Is It?**
|
|
Designing for mobile screens first, then progressively enhancing for larger screens.
|
|
|
|
**Why Mobile-First?**
|
|
- Forces content prioritization
|
|
- Better performance on mobile devices
|
|
- Easier to scale up than scale down
|
|
- Mobile traffic exceeds desktop globally
|
|
|
|
**Process:**
|
|
1. Design for smallest screen
|
|
2. Identify core content and features
|
|
3. Add complexity for larger screens
|
|
4. Test across device sizes
|
|
|
|
### Breakpoints
|
|
|
|
**Common Breakpoints:**
|
|
- Mobile: 320-480px
|
|
- Tablet: 481-768px
|
|
- Laptop: 769-1024px
|
|
- Desktop: 1025-1200px
|
|
- Large Desktop: 1201px+
|
|
|
|
**Strategy:**
|
|
- Design for content, not devices
|
|
- Let content determine breakpoints
|
|
- Test on real devices when possible
|
|
|
|
### Flexible Grids
|
|
|
|
- **Fluid Grids**: Percentage-based widths, scale proportionally
|
|
- **CSS Grid**: Two-dimensional layout system
|
|
- **Flexbox**: One-dimensional layout, flexible distribution
|
|
- **Responsive Grid**: Fixed columns with fluid gutters
|
|
|
|
### Responsive Images
|
|
|
|
**Techniques:**
|
|
- `srcset` and `sizes` attributes for multiple resolutions
|
|
- `<picture>` element for art direction
|
|
- CSS `object-fit` for container fitting
|
|
|
|
**Optimization:**
|
|
- Use modern formats (WebP, AVIF)
|
|
- Lazy loading for below-fold images
|
|
- Responsive image CDNs (Cloudinary, Imgix)
|
|
|
|
### Progressive Enhancement
|
|
|
|
Build core functionality first, then add advanced features for capable browsers:
|
|
1. Semantic HTML (baseline functionality)
|
|
2. CSS for presentation (enhanced visuals)
|
|
3. JavaScript for interactivity (advanced features)
|
|
|
|
---
|