Website builder mobile view: fix what the editor hides

Key takeaways

The website builder mobile view lets you see and adjust how your site looks on a phone without leaving the editor. It is useful and it is not the truth. It shows layout at one width, on your laptop, on fast broadband. The real test is the published site on a real phone, and a few builder habits cause most mobile problems.

• The mobile preview shows layout only, at one screen width.
• Builders create the mobile layout automatically, and the order is often wrong.
• 'Hide on mobile' can remove content from the version Google indexes.
• Always check the published site on a real phone after every edit.

How do website builders handle mobile?

Website builders such as Wix, Squarespace, Shopify and GoDaddy generate a mobile layout from the desktop design, usually by stacking each section's columns vertically. Most then offer a mobile view in the editor where you can reorder, resize or hide elements for small screens.

This is a real strength. A sole trader can publish a site that fits a phone without touching code. The limitation is that automatic stacking follows the order things were placed on desktop, not the order a phone visitor needs them. The page fits, and the important button may be eleven screens down.

• Why mobile-friendly web design is essential for UK businesses
• Agency, freelancer or website builder?

What does the mobile preview not show?

The preview does not show performance, touch or real browser behaviour. It draws your page inside a phone-shaped frame on your computer, using your computer's processor and connection. A page that looks fine there can still be slow, hard to tap and awkward to fill in on an actual handset.

• Loading time on mobile data.
• Whether a thumb can hit the menu, buttons and links.
• How forms behave with the on-screen keyboard open.
• Other screen sizes: smaller phones, larger phones, tablets.
• Cookie banners, chat widgets and pop-ups stacking on the first screen.
• Differences between Safari on iPhone and Chrome on Android.

• Which devices should you test your website on?

What goes wrong most often on builder sites?

Five problems account for most of what we see on self-built sites. All come from designing on a wide screen and trusting the automatic mobile layout.

• Order: image, then decorative text, then the headline, because that is how the columns stacked.
• Length: a desktop page of six sections becomes twenty screens on a phone.
• Text over images: headlines laid on photos become unreadable when the image crops.
• Tiny or huge type: font sizes set for desktop and never adjusted for mobile.
• Weight: large uploaded photos, background video and many installed apps.

• Font size for mobile websites: what is readable?
• What belongs above the fold on a business website

What does 'hide on mobile' really do?

It removes that element from what phone visitors see, and depending on the builder, from what Google sees too. Google indexes the mobile version of your pages. Its guidance says a mobile page with less content than the desktop page can expect some traffic loss. A section of service descriptions hidden on mobile to shorten the page may stop counting towards search.

Use it for decoration: a large background graphic, a duplicate image, a spacer. Do not use it for text that describes what you do, where you work or what you charge. If the mobile page is too long, edit the content for every device or place it in a collapsible section that keeps the text in the page.

• Does Google index content hidden on mobile?
• Mobile-first indexing: what it means for your business

How should you edit the mobile layout?

Work through each page in the mobile view with one question: what does a phone visitor need first? Then reorder so that the headline, a line of explanation and the main button lead. Adjust type sizes for mobile separately. Replace text laid over images with text beneath them.

• Put headline, one-line summary and main button at the top of every page.
• Set mobile body text to at least 16px and headings to a size that wraps onto two or three lines.
• Make buttons full width and about 48px high.
• Add a tap-to-call or WhatsApp button that stays in view.
• Compress photos before uploading, and avoid background video on mobile.
• Remove apps and widgets you no longer use.
• Publish, then check on a real phone.

• Tap target size: how big should buttons be on mobile?

When do you outgrow a builder on mobile?

You outgrow a builder when its limits cost you enquiries. Signs include pages that cannot pass Core Web Vitals on mobile however much you trim, layouts you cannot reorder the way you need, or features such as booking or quoting that work poorly on phones within the platform.

That is not most small businesses. A well-edited builder site outperforms a neglected custom site. The trade-off is control against convenience, and for a new firm convenience usually wins. When the time comes, indicative UK ranges for a professionally built site are £5,000 to £20,000.

• Leaving a proprietary website platform safely
• how much a business website costs in the UK

What does this look like in practice?

A pattern we see with owner-built sites: the homepage was designed carefully on a laptop, with a wide photograph, a headline on top of it and three columns of services beneath. In the mobile view it looked acceptable, so it was published. On a phone, the headline sits over the busiest part of the cropped photo, and the contact button is beneath all three service blocks and a gallery.

An hour in the mobile editor, reordering and resizing, fixes most of it without any new design. Global Bridge Labs (GBL) often starts with that hour before recommending anything larger, because the builder is rarely the real limit.

• See client work
• Website Design & Development for UK businesses
• Make your website work properly on mobile

Next step

Open your published site on your phone, not the editor preview, and scroll the homepage. Count how many screens it takes to reach a way of contacting you. Then go back to the mobile editor and move it up.