Episode 3 of 12
Creating A Mobile PSD Mockup
Design a mobile version of the website mockup in Photoshop to guide your responsive development.
Creating A Mobile PSD Mockup
Before jumping into code, it's essential to have a mobile design reference. If the designer only provided a desktop PSD, you'll need to create a mobile version yourself. This guides your responsive CSS decisions.
Why Create a Mobile Mockup?
- Visual reference — see exactly how the layout should look on small screens
- Planning — decide how elements should reflow, stack, or hide
- Client communication — show stakeholders the mobile experience before coding
- Faster development — no guesswork when writing media queries
Step 1: Create a New Document
- In Photoshop, go to File → New
- Set the width to 375px (iPhone standard) or 320px (minimum mobile width)
- Set the height to 2000–3000px (you'll crop later — mobile pages are tall due to stacking)
- Set resolution to 72 PPI (standard for screens)
- Color mode: RGB
Step 2: Rethink the Layout
On mobile, most multi-column layouts become single-column. Here's how common desktop patterns translate:
| Desktop Pattern | Mobile Pattern |
|---|---|
| Horizontal navigation | Hamburger menu |
| 3-column grid | Single column, stacked |
| Sidebar + content | Content only (sidebar hidden or below) |
| Large hero image | Cropped or resized hero |
| Multi-row footer | Stacked footer sections |
Step 3: Rebuild Each Section
Header / Navigation
- Replace the full navigation bar with a hamburger icon (☰)
- Keep the logo — but make it smaller
- The nav links will be hidden and revealed on tap
Hero Section
- Use a portrait-oriented version of the hero image (or crop it)
- Stack the headline, subtext, and CTA button vertically
- Increase text size relative to the container for readability
Main Content
- Convert multi-column cards/grids into single-column stacks
- Make cards take full width with generous vertical spacing
- Ensure images are responsive (width: 100%)
Footer
- Stack footer columns vertically
- Center-align text and links
- Make contact info and social links easily tappable
Step 4: Typography Adjustments
| Element | Desktop Size | Mobile Size |
|---|---|---|
| H1 Heading | 48px | 28–32px |
| H2 Heading | 36px | 22–26px |
| Body text | 16px | 14–16px |
| Nav links | 14px | 18px (larger for touch) |
| Buttons | 16px | 16–18px with more padding |
Step 5: Touch-Friendly Sizing
Mobile users tap with their fingers, not a mouse cursor. Ensure:
- Minimum tap target: 44 × 44px (Apple's recommendation)
- Adequate spacing between links so users don't accidentally tap the wrong one
- Buttons should be full-width on mobile for easy tapping
Step 6: Export the Mobile Mockup
- Trim the canvas: Image → Trim → Transparent Pixels
- Save as PSD for future editing
- Also export as PNG or JPEG for quick reference while coding
Key Takeaways
- Always create a mobile mockup before writing responsive CSS
- Mobile layouts are primarily single-column with stacked elements
- Desktop navigation becomes a hamburger menu on mobile
- Typography and tap targets must be adjusted for small screens
- A mobile mockup eliminates guesswork and speeds up development