Making your website work on phones

More than half your visitors will arrive on a phone. ClickWhale handles most of it for you, but a few things need a decision from you.

The screen-size buttons don't just resize the preview. They decide which version of a setting you are editing. Change the text size with the phone icon selected and you've changed it for phones. The desktop keeps what it had.

The six sizes

"And smaller" is the important half. These are not five separate device settings. A value set at the tablet size also applies to both phone sizes, unless you set something different there.

They stack in order, each one overriding the one above it:

all  →  1400  →  1200  →  992  →  769  →  480

So you set the padding to 60 px at all and 20 px at tablet, and you get: 60 px on desktops and laptops, 20 px on tablets and on both phone sizes. You don't have to repeat yourself downward.

Where to start

1. Build everything at "all" first. Every element, every setting. Don't touch the other sizes.
2. Then walk down the sizes, largest to smallest, and fix only what's broken.
3. Most of the time you'll only need "all" and one phone size. Sites that need all six are rare.

Doing it the other way round (designing at phone size first, or setting values at each size as you go) produces a page where nobody can work out where a value came from.

If a setting you made seems to have vanished, check which screen size was selected when you made it.

When columns stack

A row of three columns can't stay three columns on a phone. At some width they have to stack into a single column, and you choose that width with the Breakpoint setting.

Select the row and look for Breakpoint in the properties (the gear icon). The options are:

The default, Tablet or smaller, is right for most content. Two cases where you'll change it:

• A row of small logos or icons. Four logos side by side are fine on a phone. Set Never.
• Two columns of body text. Cramped on a tablet. Set Laptop or smaller so they stack sooner.

Rows, splitters, menus, forms and article overviews all have this setting.

Hiding an element on some sizes

Every element has Visibility switches in its properties, one per size:

• Show on widescreen
• Show on desktop
• Show on laptop
• Show on tablet
• Show on mobile landscape
• Show on mobile portrait

All on by default. Switch one off and the element disappears at that size.

Useful for a decorative image that has no room on a phone, or a wide table that would break the layout. But use it sparingly, and never for anything a visitor might need. A phone visitor who can't find your address because it's desktop-only will simply leave. Hiding something is also not a fix for it being too big; resizing it usually is.

Don't build two versions of the same block: one shown on desktop, one on mobile. It doubles your work forever, and the two will drift apart. Make one block that adapts.

Common problems

Text too large on a phone. Headline sizes chosen on a wide monitor are often enormous at 400 px. Select the phone size and bring the heading down.

Padding eating the screen. 80 px of padding on each side of a section leaves very little room on a 375 px-wide phone. Reduce it at the tablet or phone size.

Columns that should have stacked. Check the row's Breakpoint setting.

Images pushing the page sideways. A very wide image can force horizontal scrolling. Give the image element a width of 100%.

A menu that doesn't fit. Select the Menu element and check its mobile menu type: that's the setting that turns it into a phone-friendly menu.

Check before you publish

Walk the sizes in the toolbar from all down to the portrait phone and look at each one.

Then use Show preview and open it on your actual phone. The editor is an accurate preview, but on a real device you also find out whether your tap targets are big enough.

Common issues