Responsive Design & Device Visibility
With over 60% of web traffic coming from mobile devices, ensuring your website looks great on all screen sizes is critical. The Website Builder provides powerful tools to control how content displays across devices and create optimized experiences for every visitor.
Preview Devices: While in Edit mode, use the device icons in the top toolbar to preview how your page looks on Desktop, Tablet, and Mobile.
Understanding Responsive Design
Responsive design means your website automatically adapts to the screen size of the device viewing it:
| Device | Screen Width | Typical Behavior |
|---|---|---|
| Desktop | 1200px+ | Full layout, all features visible |
| Laptop | 992px - 1199px | Slightly condensed layout |
| Tablet | 768px - 991px | Columns may stack, reduced padding |
| Mobile | Under 768px | Single column, hamburger menu, larger touch targets |
Device-Specific Visibility
Control which elements appear on different devices:
Setting Visibility
- Select any element on your page
- Open the Options panel on the right
- Find the Visibility section
- Toggle visibility for each device type
Visibility Options
| Option | Effect | Use Case |
|---|---|---|
| Show on Desktop | Element visible only on large screens | Complex layouts, large images, detailed tables |
| Show on Tablet | Element visible on medium screens | Tablet-specific content |
| Show on Mobile | Element visible on small screens | Simplified navigation, touch-friendly buttons |
| Show on All | Element visible everywhere (default) | Essential content like logos, main text |
| Hide on Mobile | Hidden only on small screens | Secondary images, decorative elements |
Common Mobile Optimizations
Navigation
- Desktop: Full horizontal menu bar with dropdowns
- Mobile: Hamburger menu (three lines) that expands to vertical menu
- Consider adding a sticky mobile header for easy access
Images
- Hide large decorative images on mobile to speed loading
- Use smaller, optimized versions for mobile devices
- Ensure images scale proportionally (never stretch)
Columns
- Multi-column layouts automatically stack vertically on mobile
- Control stacking order (which column appears first)
- Adjust padding between stacked sections
Text
- Ensure base font size is at least 16px for mobile readability
- Reduce heading sizes proportionally on small screens
- Keep line length comfortable (45-75 characters)
Buttons & Links
- Minimum touch target size: 44x44 pixels
- Add adequate spacing between clickable elements
- Consider full-width buttons on mobile for easier tapping
Conditional Visibility
Beyond device-based visibility, show or hide content based on conditions:
User-Based Visibility
| Condition | Description | Use Case |
|---|---|---|
| Logged In Users | Only visible to authenticated visitors | Account links, personalized content, portal access |
| Guest Users | Only visible to non-logged visitors | Login prompts, signup CTAs, promotional banners |
| Specific Groups | Visible to users in certain groups | Admin tools, partner content, premium features |
Setting Conditional Visibility
- Select the element
- Open Options → Visibility
- Find Conditional Visibility
- Select the condition to apply
Hidden Elements
You can hide elements while keeping them in your page structure:
- Temporarily Hidden: For content not ready to publish
- Scheduled Content: Seasonal promotions waiting to go live
- A/B Testing: Test different versions
- Reserved Space: Placeholder for future content
Managing Hidden Elements
- Hidden elements show with a striped overlay in Edit mode
- Toggle visibility with a single click
- Hidden elements do not load for visitors (no performance impact)
Testing Responsive Design
In the Website Builder
- Click the Mobile icon in the top toolbar
- View your page in mobile preview mode
- Switch between Desktop, Tablet, and Mobile views
- Make adjustments directly in each view
Browser Developer Tools
- Press F12 to open Developer Tools
- Click the device toggle icon (phone/tablet)
- Select specific devices (iPhone, iPad, etc.)
- Test interactions and scrolling
Real Device Testing
Always test on actual devices when possible:
- Touch interactions feel different than mouse clicks
- Font rendering varies between devices
- Performance differs significantly
- Test both portrait and landscape orientations
Performance Optimization for Mobile
Mobile users often have slower connections. Optimize for speed:
- Images: Use appropriately sized images, enable lazy loading
- Fonts: Limit custom fonts (each adds load time)
- Videos: Use poster images, avoid autoplay on mobile
- Hidden Content: Elements hidden on mobile still load unless properly configured
- Animations: Reduce or disable complex animations on mobile
Accessibility Considerations
Ensure your mobile site is accessible:
- Touch targets are large enough (minimum 44x44px)
- Sufficient color contrast (4.5:1 for text)
- Text is readable without zooming (min 16px)
- Forms have visible labels
- Focus indicators are visible for keyboard navigation
- Images have alt text
Mobile-Specific Best Practices
| Do | Do Not |
|---|---|
| Stack columns vertically | Force horizontal scrolling |
| Use full-width buttons | Place tiny links close together |
| Simplify navigation | Keep complex mega menus on mobile |
| Prioritize essential content | Show everything from desktop |
| Test on real devices | Only use browser emulation |
| Optimize images for mobile | Load desktop-sized images |