Designing for the Four-Inch iPhone Again

Back to four inches

Apple's iPhone SE went on sale yesterday. It puts much of last year's iPhone 6s inside the body of the older 5s, including the four-inch screen.

For websites, the number that matters is width. The SE shows pages 320 pixels across, as the browser counts them, the same as the iPhone 5 and 5s. The iPhone 6 and 6s show 375, and the Plus models more.

Many sites built in the last two years were designed and checked on larger phones, the ones designers and owners carried. At 320 pixels, they run out of room.

Plenty of people never left four inches, and the SE adds new buyers who chose that size on purpose.

What breaks at 320 pixels

The difference, 55 pixels, is roughly the width of a button. Designs with no slack lose something at 320, usually in the same places:

• The header, where logo, menu icon and buttons collide or wrap onto two rows.
• The call button, squeezed, cut off or pushed out of sight.
• Forms, with fields side by side and a robot check that will not fit.
• Tables of prices, hours or menus that run off the edge.
• Long words and email addresses that refuse to wrap.
• Fixed bars that take a larger share of a shorter screen.

The second costs the most. On a phone the call button is often why the visitor came, and at 320 pixels it is the element most likely to be squeezed out.

Headers built as one row

Headers fail first because they are designed as a single row. A logo 180 pixels wide leaves little more than a hundred for everything else once the margins are counted.

Decide what must stay in that row: usually a smaller logo, the menu icon and a call icon with a short label. The rest can move into the menu or below the header.

Check the open menu too. It can be taller than a small screen, and if it is fixed in place, its bottom items cannot be reached.

The call button

Long button text does not fit. "Call us today for a free estimate" wraps over several lines at a readable size; "Call" with the number fits.

Make the number a proper tap-to-call link rather than relying on the phone to recognise it, and test that it dials.

If the button lives in a bar pinned along the bottom edge, check that it does not cover the last line of every page, including the form's send button.

Forms

Fields placed side by side, such as first and last name, squeeze until the typed text cannot be seen. Stack them on narrow screens.

The "I'm not a robot" box many forms use is 304 pixels wide at its normal size. With ordinary margins it does not fit in 320 and spills past the edge.

It also comes in a compact size made for small screens. Use it.

Text in form fields smaller than 16 pixels makes Safari on an iPhone zoom in when a field is tapped, and the visitor has to zoom back out to find the button.

Tables

Price lists, hours and schedules built as tables with four or five columns cannot fit. Either the columns squeeze to a word per line or the table runs off the side and the whole page scrolls sideways.

Turn each row into a short block, the item first and its details beneath. Or drop columns that matter less on a phone, or let only the table scroll sideways, in a frame of its own.

Never replace the table with a picture of it. At this width it is unreadable, and it cannot be searched or read aloud.

A worked example

A sandwich shop near an office district does most of its business between eleven and two, much of it called in ahead or ordered for meetings. Its site was redesigned last year and approved on the owner's iPhone 6.

A regular customer mentioned that the call button had disappeared on her phone, a four-inch model.

At 320 pixels, the header held the logo and the menu icon, and the Call to order button wrapped onto a second row. The header had a fixed height, so the second row was simply cut off.

The menu page was a table with columns for half, whole and combo prices, and it ran off the right edge. The catering form put name and company side by side, and its robot check poked past the screen.

The fix was a smaller logo on narrow screens, a call icon labelled Call beside the menu icon, menu rows rebuilt as blocks with prices beneath each sandwich, stacked form fields and the compact robot check.

Each change was checked at 320 pixels in the browser, then on a staff member's four-inch phone.

Testing at 320 pixels

The quickest test is on your own computer. Switch on device mode in Chrome's developer tools and set the width to 320, or choose the iPhone 5, which shares the SE's width.

On a Mac, Safari's Develop menu offers Responsive Design Mode for the same job. Dragging an ordinary browser window narrower will not do, because many stop shrinking well before 320.

Then try a real four-inch phone. A simulated screen shows the layout, not how a thumb meets a button. Turn it sideways too, where a fixed header can take a third of the screen's height.

Narrowest first

The lasting fix is not a special version for the SE. It is a layout that holds together at 320 pixels and grows from there.

Agree with whoever builds or maintains your site that every new page and every change is checked at 320 before it goes live.

The counter-case

If your Analytics shows few small phones, the work is less urgent. Analytics does not name iPhone models, but its screen resolution report shows four-inch iPhones as 320x568.

A site that already works well on phones may need only small adjustments: a smaller logo, stacked fields, the compact robot check.

Either way, the order holds: test at 320 pixels and fix the header, the call button, forms and tables first.

The small-screen check

1. Open the site at 320 pixels in device mode.
2. Check the header for wrapping or overlap.
3. Make sure the call button stays visible.
4. Stack form fields and use the compact check.
5. Rebuild wide tables as blocks.
6. Test on a real four-inch phone.
7. Check every new page at 320 before launch.

Step three matters most for a business that takes calls. The other steps make the page tidier; this one keeps the quickest route to you on the screen.

Why phones affect where pages rank from May is covered in Google will turn up the mobile-friendly signal in May.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.