The Tablet Width Nobody Designed For

Fine on the phone, fine on the monitor

A new design is approved on the web designer's wide monitor and checked on the owner's phone. Both look right.

Then a customer opens it on an iPad held upright, and things go wrong at once.

The menu wraps onto a second line over the photograph. Three columns of services become three thin strips with two words to a line. The phone number slides under the slideshow.

Nobody chose that layout. It is what happens at a width the design never considered, somewhere between the phone version and the desktop one.

Tablets are where a lot of unhurried browsing happens, on the sofa in the evening, which makes this a poor width to neglect.

Where the in-between widths are

• iPads held upright show pages about 768 pixels wide.
• iPads turned sideways show about 1,024 pixels.
• Android tablets run from roughly 600 to 800 pixels upright.
• Small laptops often give the browser well under 1,400 pixels.
• Browser windows that people never maximise, on any screen.

The first is the one that breaks most often, for a reason that is close to an accident of how layouts are built.

Why designs break there

A responsive design switches layouts at set widths, called breakpoints. Below one, visitors get the phone layout; above it, the desktop layout.

A very common choice puts that switch at exactly 768 pixels, the width of an upright iPad. So the iPad gets the desktop layout at the narrowest width it was ever expected to fit.

A desktop menu of seven items and a phone number needs more room than that. Three columns at 768 pixels leave each one narrower than a phone screen.

Anything with a fixed width, such as an embedded map, a booking widget or a price table, simply runs off the side.

What breaks first

The menu. It wraps onto two lines, collides with the logo, or drops below the header and pushes the page down. Drop-down menus built for hover often misbehave under a finger, or follow the link instead.

Columns. Text squeezed into narrow strips is hard to read, and buttons inside them wrap onto two lines or overflow.

Photographs. A wide image cropped to fill a tall screen can lose its subject, leaving the edge of a counter or somebody's elbow.

Tables. Price lists and timetables laid out in columns overflow the screen and force sideways scrolling.

A worked example

A kitchen designer working from a small showroom had a new site built last autumn: a full-width photograph on the home page, a menu of eight items and a portfolio of past kitchens in a three-column grid.

It looked right on the web designer's monitor and on the owner's phone. Then a client mentioned at a first meeting that she had given up on the portfolio on her iPad.

The theme switched from the phone layout to the desktop one at exactly 768 pixels. At that width the eight menu items wrapped onto two lines over the photograph.

The portfolio shrank each kitchen to a thumbnail too small to judge a cabinet colour, with captions broken over four lines.

Kitchens are planned slowly, often in the evening, with photographs passed back and forth between two people. A tablet suits that, and the site was at its worst there.

The menu was cut to five items and now switches to the compact phone menu below 1,024 pixels. The portfolio shows two columns between 600 and 1,024 pixels.

And the home page photograph was repositioned so the island stays in view on a tall screen.

How to check the widths

The cheapest test needs no tablet. On a computer, make the browser window narrower a little at a time, from full screen down to phone size, and note each point where something collides.

Chrome's developer tools have a device mode that shows a page at set widths, including iPads both ways round. Safari on a Mac has a similar responsive design mode.

Then use a real tablet, upright and sideways, because a finger behaves differently from a mouse. Menus, sliders and forms are where the differences show.

Check the pages that matter, not only the home page: a service page, the gallery, the contact form and anything with a table.

And turn the tablet while a page is open, without reloading. Some layouts only work when a page loads fresh, and rotating mid-page is how customers find out.

Fixes that hold up

Set breakpoints where the content breaks, not where a particular device happens to sit. If the menu stops fitting at 900 pixels, switch it at 900.

Give tablets a layout of their own: two columns instead of three, larger thumbnails, and the compact menu sooner.

Shorten menu labels and cut menu items. A menu that fits at 768 pixels is usually a better menu at every width.

Let tables scroll inside their own box, or restack them on narrow screens, and decide how each photograph crops on a tall screen rather than leaving it to chance.

Give embedded maps and booking widgets a container that shrinks with the page, then test them at every width, since they come from elsewhere and rarely adapt on their own.

Put it in the brief

When commissioning a design, ask to see it at tablet widths, upright and sideways, not only as a phone mock-up and a desktop one.

Then make those widths part of testing before launch. A designer who knows the site will be checked at 768 pixels designs for it from the start.

The counter-case

Some sites survive the in-between widths without special work. A single column of text with a short menu has little to collide.

A business whose analytics show almost no tablet visits can treat this as a lower priority than its phone layout.

Even then the check takes ten minutes with a narrowing browser window, and the fixes usually improve every width. Test the widths in between, especially an iPad held upright.

Width by width

1. Narrow your browser window slowly on the home page.
2. Note the widths where anything collides.
3. Open the site on an iPad held upright.
4. Turn it sideways and look again.
5. Test the menu with a finger, not a mouse.
6. Check galleries, forms and tables at both widths.
7. Ask for tablet layouts in every design brief.

Step three is the one most sites fail. Upright, an iPad sits exactly where many designs hand over from phone to desktop, and it gets the worst of both.

How the images themselves are sized for each of these widths is covered in responsive images arrived with WordPress 4.4.

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.