Mobile layout

One column, in priority order

A phone gives you one column, so every layout decision becomes an ordering decision. What sits side by side on a desktop stacks, and the order it stacks in is what a visitor actually experiences.

That order is frequently accidental. A sidebar that sits beside the content on a desktop can land above it or below it on a phone, and neither is necessarily what anybody intended.

So decide the mobile order deliberately: what you do, then proof, then the action, then the detail. That order is also what an answer engine reads. Our page on homepage structure covers that sequence.

Touch changes the rules

Hover does not exist. Anything that reveals itself when a mouse passes over it is either unavailable on a phone or requires a tap that does something else, which is worse than unavailable.

Targets need to be large enough to hit with a thumb, and far enough apart that the wrong one is not hit by accident. Links sitting in a tight list are the usual offender.

Our page on buttons and controls covers the sizes. The practical test is whether you can use your own site one-handed while walking.

What breaks most often

The list below is what we find on almost every small business site when it is opened on a real phone rather than in a resized window.

• Text running to the edges of the screen
• A phone number that is not tappable
• Tables that force sideways scrolling
• Menus that need hovering to open
• Forms where the label vanishes while typing
• Buttons below the fold with no sign they exist
• Images that push the layout around as they load

Keep content off the edges

Text touching the screen edge is uncomfortable to read and reads as broken. A consistent margin on both sides is one of the cheapest improvements available and it is missing more often than not.

The same applies vertically. A section that starts immediately under the one above it, with no room between, turns the page into an undifferentiated scroll.

Our page on white space covers spacing generally. On a phone it matters more, because everything is closer to everything else by default.

The connection, not just the screen

A phone visit frequently happens on a slow or intermittent connection, which is a different constraint from screen size and is the one people forget to design for.

That makes image weight and script weight mobile layout problems rather than performance trivia. A page that looks perfect and takes eight seconds has failed on a phone.

Our page on page speed covers what to remove and in what order, and images are almost always the first and largest item.

How to check it properly

On a real phone, on mobile data rather than your own network, holding it the way a customer would. A resized desktop browser tests width and nothing else that matters.

Walk through the actual journey: find the service, find the price, get in touch. Most mobile faults appear during a task rather than while looking at a page.

Then hand the phone to somebody else and ask them to do the same thing. Ten minutes of watching finds more than any amount of checking your own work.

What not to do

Do not build a separate mobile site. Our page on responsive or separate covers why one site that adapts is the settled answer.

Do not hide content on small screens to tidy the layout. If it is not worth showing a phone visitor, it is probably not worth showing anybody, and hiding it from the majority is the wrong way round.

And do not interrupt on arrival. A pop-up covering a small screen is far harder to dismiss than on a desktop and it is the fastest way to lose a mobile visitor.