Module 6: Mobile & Responsive Design
Design beautiful experiences that work seamlessly across all devices and screen sizes.
Mobile-First Design
Mobile-first means designing for small screens first, then scaling up to larger screens. Why? Because over 60% of web traffic is mobile, and it's easier to add features for desktop than remove them for mobile.
📱 Mobile-First Mindset:
- Start small: Design for 375px width (iPhone) first
- Prioritize: Only essential content fits on mobile
- Touch-friendly: Buttons must be 44x44px minimum
- Progressive enhancement: Add features as screen grows
Responsive Breakpoints
Breakpoints are screen widths where your layout changes. Think of them as checkpoints where you reorganize content to fit the screen better.
Single column, stacked content
2 columns, some side-by-side content
3-4 columns, full features
Max width container, extra spacing
iOS & Android Design Guidelines
iOS (Apple)
- Navigation: Bottom tab bar for main sections
- Typography: SF Pro font, clear hierarchy
- Gestures: Swipe back, pull to refresh
- Style: Minimalist, lots of white space
- Safe Areas: Respect notch and home indicator
Android (Material Design)
- Navigation: Bottom nav or navigation drawer
- Typography: Roboto font, bold headers
- FAB: Floating Action Button for primary action
- Style: Cards, elevation, shadows
- Colors: Bold, vibrant color schemes
⚠️ Platform Differences:
- • iOS: Back button top-left, Android: System back button
- • iOS: Centered titles, Android: Left-aligned titles
- • iOS: Subtle animations, Android: More pronounced motion
- • Design for both or pick one platform to start
Touch Targets & Gestures
Fingers are bigger than mouse cursors! Touch targets must be large enough to tap accurately, with enough spacing to avoid mis-taps.
Minimum Touch Target Sizes
32x32px
❌ Hard to tap
44x44px
✅ Apple minimum
48x48px
✅ Google minimum
Common Mobile Gestures
Tap
Primary action, like clicking
Long Press
Secondary actions, context menus
Swipe
Navigate, delete, reveal actions
Pinch/Zoom
Images, maps, content scaling
Mobile Navigation Patterns
Bottom Tab Bar
3-5 main sections, always visible. Easy thumb reach. Best for frequently accessed sections.
Home
Search
Profile
Hamburger Menu
Hidden menu that slides in. Saves space but less discoverable. Use for secondary navigation.
Floating Action Button (FAB)
Circular button for primary action. Floats above content. Common in Android apps.
App Onboarding Flows
Onboarding introduces users to your app. Keep it short (3-5 screens max), show value quickly, and let users skip if they want.
Screen 1: Welcome
Brief intro, what the app does, compelling visual
Screen 2-3: Key Features
Show 2-3 main benefits, not every feature. Focus on value.
Screen 4: Permissions
Explain why you need permissions before asking
Screen 5: Get Started
Sign up or dive right in. Make it easy to start.
💡 Onboarding Best Practices:
- • Always include a "Skip" button
- • Show progress dots (user knows how long it'll take)
- • Use illustrations, not just text
- • Consider progressive onboarding (teach as they use)
- • Test with real users - many skip onboarding entirely!
📱 Hands-On Project: Mobile Banking App
Design a complete mobile banking app with responsive layouts.
Project Requirements:
- ✓ Design for iPhone (375px) and iPad (768px)
- ✓ Include: Home, Transactions, Transfer, Profile screens
- ✓ Use bottom tab navigation
- ✓ All touch targets 44x44px minimum
- ✓ Design 3-screen onboarding flow
- ✓ Follow iOS or Android guidelines
- ✓ Include empty states and loading states
📚 Module Summary
You've mastered mobile and responsive design:
- ✓ Mobile-first design approach
- ✓ Responsive breakpoints and layouts
- ✓ iOS and Android design guidelines
- ✓ Touch targets and mobile gestures
- ✓ Mobile navigation patterns
- ✓ App onboarding flows
Next: Build design systems and ensure accessibility!