Using Device Preview
Framekit's device preview lets you see how your site looks on different devices without leaving the editor.
Accessing Device Preview
The device preview buttons are in the top-right corner of the header bar, next to the Publish button.
You'll see three icons:
- Desktop icon - Full width view (default)
- Tablet icon - Tablet-sized preview
- Phone icon - Mobile phone preview
How Device Preview Works
Desktop View
- Shows your site at full width
- This is the default editing view
- Best for designing wide layouts
Tablet View
- Simulates a tablet screen (~768px wide)
- Shows how columns and grids collapse
- Good for checking intermediate breakpoints
Mobile View
- Simulates a phone screen (~375px wide)
- Shows how your site looks on smartphones
- Critical for testing touch-friendly design
What to Check on Each Device
Desktop
- Multi-column layouts display correctly
- Navigation is fully visible
- Images are appropriately sized
- Plenty of whitespace
Tablet
- Columns reduce (4 → 2, 3 → 2)
- Navigation still works
- Text remains readable
- Buttons are accessible
Mobile
- Single column layout where needed
- Text is large enough to read
- Buttons are tap-friendly (44px minimum)
- No horizontal scrolling
- Navigation collapses appropriately
Device Preview vs Real Devices
Device Preview is Great For:
- Quick checks while editing
- Seeing general layout changes
- Testing responsive breakpoints
- Fast iteration on designs
Real Device Testing Needed For:
- Touch interactions
- Scroll behavior
- Form input experience
- Performance/loading speed
- Actual browser rendering
Tips for Effective Testing
1. Check All Three Sizes
After making changes, click through all three device sizes to ensure nothing broke.
2. Test After Major Changes
Especially after:
- Adding new sections
- Modifying layouts
- Adjusting spacing
- Changing fonts
3. Pay Attention to Transitions
Watch what happens between desktop and tablet, tablet and mobile. These "in-between" sizes often reveal issues.
4. Test Real Content
Preview with actual content, not placeholder text. Real content length affects layouts.
Quick Keyboard Workflow
While there's no keyboard shortcut for device preview, here's an efficient workflow:
Common Issues Found in Preview
Content Cut Off
Solution: Increase padding or adjust container width
Text Too Small
Solution: Use larger font sizes for mobile
Buttons Touching
Solution: Add more vertical spacing between elements
Images Stretched
Solution: Set proper aspect ratios or use object-fit: cover
After Preview Testing
Once your design looks good in all previews: