Bigger iPhones Arrive Today

On sale this morning

The iPhone 6 and iPhone 6 Plus go on sale in Canada today. Their screens measure 4.7 and 5.5 inches, against 4 inches on last year's models.

Some of your customers will be looking at your website on one by tonight, and some sites will look wrong on them in ways their owners have not yet seen.

The software arrived first. iOS 8 reached older iPhones and iPads on Wednesday, so the change today is mostly the size of the glass.

What a web page sees on the new phones

A web page does not measure inches. Phones report a width in the units web designers work with, and every iPhone until now has reported 320 in portrait.

The iPhone 6 reports 375, and the 6 Plus reports 414. Turned sideways, the Plus is 736 wide, close to the width many sites reserve for tablets.

Each unit is also drawn with several screen pixels. The 6 uses two for each one, like the Retina iPhones before it, and the Plus uses three.

What changes for a website

For a well-built site, the new sizes change little. For others, they bring out problems that were already there.

• Wider layouts: pages fixed at 320 pixels leave a blank strip at the side or are stretched to fit.
• Sharper images: logos and icons prepared for older screens look soft beside crisp text.
• One-handed reach: links in the top corners are harder to reach with a thumb.
• The Plus held sideways: at that width it may receive the layout meant for tablets.
• Display Zoom: owners who choose the zoomed view get a narrower width, so 320 still matters.

The first is the one visitors notice straight away, and it says the most about how the site was built.

A site built for one width

Many phone versions of business sites were built a few years ago for the iPhone of the day, at exactly 320 pixels. It was a tempting shortcut while that was the size designers aimed for.

Android phones have come in many widths for years, so those sites never fitted everyone. The new iPhones simply make the problem visible to owners who carry one.

A responsive layout avoids the guessing. Columns and images are set as proportions of the screen, and the layout changes where the content needs it, not at the width of a particular phone.

Sharper screens and soft images

Text is drawn by the phone itself and stays crisp at any size. Images can only be as sharp as the pixels you supply, and a logo made for older screens is stretched to fit.

Logos and icons are the place to start. Saved as vector files, which phones draw sharply at any size, or at two to three times their displayed size, they stay crisp.

Large photographs need more care. Versions three times the size weigh far more, and phone visitors pay for their data, so serve the large versions only to screens that use them.

Thumbs on a bigger screen

On a 4-inch phone, most people can reach the whole screen with the thumb of the hand holding it. On the larger models, the top of the screen is a stretch.

Apple added a shortcut called Reachability: touching the Home button twice, lightly, slides the top of the screen down. Not everyone will learn it, and a website cannot count on it.

Put the actions that matter, such as calling, booking and directions, where a thumb lands: large buttons in the page itself, not only a small menu icon in the top corner.

A worked example

A walking tour company in Victoria runs history and food tours through the old town from April to October. Many bookings are made on phones, often by visitors already in the city.

Its phone pages were built three years ago at exactly 320 pixels wide, with the logo as a small image and the booking link tucked into the top right corner.

Last week, after the new phones were announced, its developer checked the pages at the new widths in a desktop browser's testing tools. They sat in a narrow column with a blank strip beside them.

The quick fixes went in this week: a sharper logo, and large buttons for booking and for the meeting point map, placed in the page where a thumb reaches them.

The buttons help at once because nobody has to reach a top corner to book. The full change to a responsive layout waits for winter, when the tours stop.

Testing without buying every phone

You do not need the new phones to check your site. Desktop browsers include tools that show a page at any width, and a few minutes at 320, 375 and 414 reveals most problems.

Then check on real phones where you can, including a staff member's new one, held upright and sideways. Tap the phone number, the booking button and the map.

Over the coming weeks, the screen resolution report in Google Analytics will start to show the new sizes, 375 by 667 and 414 by 736, as visitors use them.

Older phones are not going away

Designing around the new iPhones would repeat the old mistake. Four-inch phones, smaller Android models and tablets will keep visiting for years.

The aim is a site that works at any width, so the next new size, whatever it is, needs no special treatment.

The counter-case

If a site is already responsive, with flexible images and large buttons, it may need nothing today beyond a look at its logo on the Plus.

And a desktop-only site, shrunk onto any phone, reads slightly better on a bigger screen, which tempts its owner to leave it alone.

But the bigger screen hides the problem rather than solving it. Visitors still zoom and pan to read and tap, and a site made for one width will not suit the next.

Checking the site at the new widths

1. Open the site at 320, 375 and 414 pixels wide.
2. Turn it sideways and check that layout too.
3. Replace small logos and icons with sharper versions.
4. Move key buttons to where a thumb reaches.
5. Tap every phone number and booking link.
6. Watch the screen resolution report in Analytics.
7. Plan a responsive rebuild if the layout is fixed.

Step seven is the one that lasts. The other steps tidy the site for this fall's phones; a responsive layout means the next new size needs little or no special work.

Pictures inside page text are a common place for fixed widths to hide, as shown in photos that squeeze the text into a narrow strip on phones.

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.