On the morning of 15 October I measured one of the websites I look after at the width of an iPhone, and the menu button was not on the screen.
It had not been removed. It was 569 pixels from the left edge of a screen that is 390 pixels wide. The Facebook icon was further out still. The whole page was 841 pixels across, more than twice the width of the phone, and it was like that on every page of the site.
On a computer screen, the same site looked fine.
The short answer
Why does a website slide sideways on a phone? Almost always because one thing on the page is wider than the screen, and the browser makes the whole page wider to fit it. That one thing is usually small and easy to miss: a long email address, a row of icons, or a single big word in a heading. You will not see it on a computer, because a computer screen is wide enough for it.
That morning I checked every public website I host, not just that one. Thirty-three sites, 138 pages, at three common phone widths, in a real browser.
Eleven of the thirty-three were wider than the phone.
What it looks like to your customer
If you have never seen it happen, it is easy to underrate.
The visitor puts a thumb on the page to scroll down, and the page swings left as well. Text runs off the right-hand edge. The page sits at a slight angle to wherever they meant to go, and every time they scroll, it wobbles. On the worst site, they could not open the menu at all unless they happened to drag the page sideways and find it.
Nobody writes in to say your website wobbles. They just leave, with the impression that the business behind it is a bit careless. The owner, meanwhile, checks the site on the computer it was built on, sees nothing wrong, and carries on.
The most common culprit was an email address
The single most common cause, on five of the eleven sites, was an email address.
It sounds ridiculous, so here is how it happens. A website shows the full address as a link, something like a name at a business domain, 28 to 46 characters long on these sites. A browser will not break an email address across two lines the way it breaks a sentence, because it does not see any spaces in it. On a computer there is room for it. In a narrow column on a phone there is not, so the address simply carries on past the edge of the screen, and takes the page with it.
One of those five sites was this one. The email address in our own footer pushed every page on jmmarketingusa.com 21 pixels wider than a small Android phone.
The others were stranger
The rest had causes nobody would ever guess from looking at the site on a desk:
A header where the logo, the menu and the social icons were each told to be the full width of the screen, and then told to sit side by side. That is the site where the menu button went missing.
A row of social icons that only overflowed on iPhones. On Android phones the same page fitted perfectly, so anybody testing on one kind of phone would never have seen it.
A heading with one long word set so large that the word alone was wider than the phone.
None of these were mistakes anyone would notice while building the site. They are the kind of thing that only shows up when somebody holds the finished page in their hand.
What happened next
That morning, eight of the eleven were fixed with rules that only apply on phone-sized screens, so the desktop versions could not be affected. The other three needed design decisions rather than a quick correction, and were written up for a decision.
And then, on 13 November, while working on something else, I found the email address on our contact page running 33 pixels off the right-hand edge of a phone. Same cause, different page, found four weeks after I had fixed the footer. It wraps properly now.
That is the honest lesson. This is not something you check once. Every new page, new block of text or new email address is another chance for it to come back.
Check yours in thirty seconds
Open your website on your phone. Put your thumb in the middle of the page and drag it to the left.
If the page moves, something on it is wider than your screen. Try every page, not just the home page, and pay particular attention to your contact page and your footer, where the email address usually lives. If you can borrow a phone of the other kind, iPhone or Android, try that too.
If nothing moves, good. If it does, the cause is usually one small thing, and finding it is most of the work.
Plenty of the people who visit your website will only ever see it on a phone, and none of them will tell you if it wobbles. If you would like to know what your site really looks like in a customer’s hand, call me on 662-422-1809. I will tell you what I find.