Responsive Design: Making Your Webey Site Mobile-Friendly

More than 60% of all internet traffic now comes from mobile devices. If your website doesn't work well on a smartphone or tablet, you're not only losing visitors but also positions in Google. In this article, you'll learn how Webey handles responsive design and how you can ensure your site looks perfect on every screen size.

What Is Responsive Design?

Responsive design means your website automatically adapts to the visitor's screen size. Whether someone is viewing on a large desktop monitor, a tablet, or a smartphone, the content is always displayed in a clear and readable way. Instead of building a separate mobile website, you use one design that scales flexibly.

How Webey Handles Responsive Design

Webey is built from the ground up with responsive design in mind. All 24+ block types are designed to automatically scale to smaller screens. You don't need to configure anything — it works out of the box. Here are the key mechanisms:

• Automatic column stacking: Using a columns block with two or three columns? On wide screens they sit side by side, but on mobile they are automatically stacked vertically. This keeps the content readable without horizontal scrolling.
• Image scaling: All images in Webey scale proportionally with the screen width. A hero image that fills the entire screen on desktop is resized on mobile but maintains the correct aspect ratio.
• Flexible typography: Headings and body text adapt based on the screen size. An H1 heading that is 48px on desktop automatically becomes smaller on mobile so the text doesn't overflow the screen.
• Touch-friendly buttons: Buttons and links automatically receive sufficient spacing and a minimum touch target size of 44x44 pixels, making them easy to tap on touchscreens.

Using the Mobile Preview in the Editor

Webey provides a live preview in the block editor so you can see how your page looks immediately. To check how your site appears on mobile:

• Open your page in the editor.
• Click the smartphone icon in the toolbar at the top of the preview.
• The preview switches to a mobile view so you can see how blocks rearrange themselves.
• Check that all text is readable, images aren't cropped, and buttons have sufficient space.

Always use this preview before publishing a page. What looks great on desktop may turn out differently on mobile.

Font Sizes on Mobile

A common mistake is text that's too small on mobile devices. Webey uses a default minimum font size of 16px for body text. This prevents visitors from having to pinch-zoom to read content. If you use custom CSS in an html or code block, make sure you don't set a font size smaller than 14px for running text.

Image Dimensions for Mobile

Large images cause slow loading times on mobile networks. Keep these guidelines in mind:

• Hero images: maximum 1920x1080 pixels, optimized to under 200 KB.
• Content images: maximum 1200x800 pixels, optimized to under 150 KB.
• Gallery thumbnails: maximum 600x400 pixels, under 80 KB.

Upload images in WebP or JPEG format for the best balance between quality and file size. Avoid PNG for photographs — that format produces unnecessarily large files.

Navigation on Mobile: The Hamburger Menu

On desktop screens, Webey displays your navigation menu as a horizontal bar. On mobile devices, this is automatically converted to a hamburger menu (the familiar icon with three horizontal lines). Visitors tap the icon to open the menu. Make sure your menu labels are short and clear so the menu remains manageable on a narrow screen. Limit the main menu to a maximum of 6 to 8 items and use submenus for additional pages if needed.

Common Mobile Design Mistakes

Avoid these common problems:

• Too-wide tables: A table block with many columns may require horizontal scrolling on mobile. Use a maximum of 3 columns or consider a card-grid block as an alternative.
• Text over images: Overlapping text on images looks great on desktop but can become unreadable on mobile. Always test this in the mobile preview.
• Too-small touch targets: Links and buttons that are too close together are difficult to tap. Keep at least 8px of space between clickable elements.
• Pop-ups and overlays: Large modals that fill the entire screen are frustrating on mobile. Use them sparingly.
• Horizontal scrolling: If an element is wider than the screen, a horizontal scrollbar appears. This is a sign that your design is not properly responsive.

Google Mobile-First Indexing

Since 2021, Google uses mobile-first indexing. This means Google uses the mobile version of your website as the primary source for indexing and ranking your pages. If your mobile version is poor — slow loading times, missing content, or bad usability — it directly affects your position in search results, even on desktop.

With Webey, you don't need to worry about this: all pages are automatically optimized for mobile. However, make sure you don't hide content that's only visible on desktop, as Google may not index it.

Viewport Settings

Webey automatically adds the correct viewport meta tag to every page: <meta name="viewport" content="width=device-width, initial-scale=1">. This ensures mobile browsers render the page at the correct scale. You don't need to set this manually — it's included by default in every Webey site.

Checklist for a Mobile-Friendly Site

• Check every page in the mobile preview before publishing.
• Keep font sizes above 14px for body text.
• Optimize images for fast loading times.
• Limit the number of columns in tables to a maximum of 3.
• Ensure sufficient space between clickable elements.
• Test your site on multiple devices or use Chrome DevTools device simulator.
• Check your site with the Google Mobile-Friendly Test (search.google.com/test/mobile-friendly).