Pages That Look Finished Only on a Wide Monitor

Approved at one width

Most sites are designed and signed off on a large monitor: the designer's screen, the boardroom display, the owner's desktop. At that width, everything lines up.

Customers then open the site on a laptop, a tablet turned sideways or a phone. The phone version usually gets checked, because everyone knows to check it.

The widths in between often never are, and that is where layouts come apart: menus wrap, headlines land on faces, buttons vanish below the edge of a box.

Nothing is broken in the sense of an error. The page simply stops looking finished, and visitors notice.

The widths customers really use

• Large monitors, 1920 pixels wide and up.
• Laptops, very often 1366 or 1440 pixels.
• Laptops with scaling, a 1920 screen behaving like a narrower one.
• Tablets held sideways, about 1024 pixels.
• Tablets held upright, about 768 pixels.
• Phones, roughly 320 to 414 pixels.

The third catches designers out. Many Windows laptops enlarge everything on screen by default, so a screen sold as 1920 pixels wide shows a web page as if it were 1536.

Where layouts come apart

Responsive sites rearrange themselves at set widths, called breakpoints, typically one for phones, one for tablets and one for everything wider.

Between those points, the design is simply stretched or squeezed. A layout drawn at 1920 pixels and checked at 375 may never have been seen at 1100.

That is where most of the damage happens, on the laptops and tablets that account for a large share of real visits.

The menu that wraps

A menu of eight or nine items fits on one line at full width. Narrow the window and the last items drop to a second line.

If the header was built with a fixed height, that second line has nowhere to go. It slides behind the content below or covers the top of the page, and its items cannot be clicked.

The usual fix is to switch to the collapsed menu, the button that opens a list, at a wider point than the phone layout uses.

Text over photographs

A headline set over a photograph is positioned for one shape of screen. As the width changes, the photograph is cropped differently and the text moves across it.

On a laptop it may land on a face, a busy shelf or a bright patch where white text disappears.

Below a certain width, the headline should sit above or below the photograph instead of on it. The photograph is still there; it simply stops fighting the words.

A worked example

A musical instrument shop selling guitars, keyboards, drums and band instruments, with rentals, lessons and repairs, had its site redesigned last year. The design was approved on a 27-inch monitor.

The menu had nine items in one row. On the owner's laptop, the last two dropped to a second line that slid behind the photograph below, so Repairs and Contact could not be clicked.

On a tablet held sideways, the three boxes for rentals, lessons and repairs had fixed heights. The text wrapped onto more lines at that width and pushed the Book a lesson button out of sight.

The headline sat over a photograph of a wall of guitars. At laptop width, the white text landed on white guitar bodies and could barely be read.

None of this had been noticed at the shop, because the office computer had the same large monitor the designer used.

The fixes took a day: the menu now collapses below 1440 pixels, the boxes grow with their text, and below 1100 pixels the headline sits above the photograph.

The shop now checks new pages at four widths before they go live.

Boxes that cannot grow

Designers often give rows of boxes a fixed height so they line up neatly. At full width, the text fits.

At narrower widths the same text wraps onto more lines, and a fixed box either cuts it off or lets it spill over whatever sits below.

Let boxes grow with their content and line them up another way. A row of slightly uneven boxes looks far better than a button that has disappeared.

How to check

The quickest test needs no tools. Open a page on a desktop computer and drag the edge of the browser window slowly from full width down to as narrow as it goes.

Watch for the moments the layout jumps or breaks: text overlapping, items wrapping, something sliding out of view. Note the width at each break, since that number is what a developer needs to fix it.

Chrome's developer tools include a device mode that shows the page at any width you type, which makes those points easy to measure.

Then zoom in a step or two, which narrows the page the way scaling does, and check on a real laptop and a real tablet if you have them.

Approve every width, not one

When a new design or page is presented, ask to see it at four widths: a large monitor, a laptop, a tablet held sideways and a phone.

Approve all four, not just the one on the screen in front of you. A design that only works at the width it was drawn for is not finished.

Screenshots at each width, side by side, make the review quick and leave a record of what was approved.

It is a reasonable request of any web designer, and a good one will already have done it.

The counter-case

A site with a simple single-column layout, a short menu and no text over images rarely breaks between widths. It may need only a quick look.

A business whose customers mostly visit from office desktops can check fewer widths, though laptops still belong on the list.

The effort grows with the complexity of the layout, not the size of the business.

For any site with a wide menu, rows of boxes or headlines over photographs, check the in-between widths before calling a page finished.

The check

1. List the five pages customers use most.
2. Drag the browser from wide to narrow on each.
3. Note every width where something breaks.
4. Check a laptop at its normal scaling.
5. Check a tablet held sideways and upright.
6. Ask for fixes at the widths that break.
7. Approve new pages at four widths, not one.

Step two finds nearly everything. A slow drag from full width to narrow shows every point where the layout gives way, in about a minute per page.

Choosing the photographs that sit in those layouts is covered in stock photos that are obviously not Canadian.

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.