Responsive Design and Device Preview

Your website needs to look great on desktops, tablets, and phones. Framekit makes it easy to preview and optimize for all devices.

Device Preview Modes

Switching Views

In the editor, you can switch between:

• Desktop - Large screens (full width)
• Tablet - Medium screens (tablet width)
• Mobile - Small screens (phone width)

How to Switch

Look for the device icons in the top-right of the header bar, next to the Publish button:

Click the monitor icon for desktop view

Click the tablet icon for tablet view

Click the phone icon for mobile view

The canvas updates instantly to show your site at that screen size.

What Changes Between Devices

Layout

• Multi-column layouts may stack vertically
• Navigation may collapse to a hamburger menu
• Images may resize or reposition

Spacing

• Padding and margins adjust
• Elements have appropriate breathing room
• Content remains readable

Typography

• Font sizes may scale down
• Line lengths adjust for readability
• Headings remain proportional

Optimizing for Mobile

Common Issues

• Text too small to read
• Buttons too small to tap
• Images overflowing
• Horizontal scrolling

Fixing Issues

Use AI to fix mobile problems:

Switch to mobile view

Identify the issue

Open AI chat

Ask: "Fix the mobile layout so columns stack vertically"

Mobile-First Tips

• Ensure touch targets are at least 44x44 pixels
• Keep forms simple
• Use easily tappable buttons
• Remove unnecessary elements

Testing Responsiveness

In the Editor

Switch between all three device modes

Check each page

Verify all components look good

Real Devices

For the most accurate testing:

Publish your site

Open on actual phones and tablets

Check different browsers

Browser Developer Tools

Open your published site in a browser

Press F12 or right-click > Inspect

Click the device toggle icon

Test various screen sizes

Responsive Components

Library Components

All library components are built to be responsive:

• Automatically adapt to screen sizes
• No extra configuration needed
• Professional layouts on all devices

AI Components

AI-generated components aim for responsiveness:

• Usually work well across devices
• May occasionally need adjustments
• Use AI chat to fix issues

Best Practices

Content Priority

On mobile, users see content from top to bottom:

• Put most important content first
• Simplify navigation
• Prioritize call-to-actions

Images

• Use appropriately sized images
• Consider hiding decorative images on mobile
• Ensure images don't break layouts

Touch-Friendly

• Make buttons and links easy to tap
• Add spacing between interactive elements
• Avoid tiny text links

Performance

Mobile users often have slower connections:

• Optimize image sizes
• Keep pages lightweight
• Test loading times