A Layout That Survives a Long Business Name

The failure

A header laid out with the business name occupying a neat space beside the menu.

It worked in the design because the name in the mockup was short.

The actual name is longer, and at certain screen widths it wraps to two lines, pushing the menu down, breaking the alignment and doubling the height of the header on every page.

Nobody notices until somebody views it at that particular width, which may be months later.

Why it happens

Design tools show one state at one size with one set of content.

A layout is approved based on that single view, and everybody involved sees it working.

The web is not one size and the content is not one length, so the approved design is one instance of something that has to work across hundreds.

Which means testing the extremes is not pedantry. It is checking whether the design is a design or a picture.

What varies more than expected

• The business name, particularly with a suffix or a trading style.
• Page headings, which are written after the design.
• Product and service names, which vary enormously in length.
• Prices, where four digits and a decimal differ from two.
• Navigation labels, once real words replace placeholders.
• Customer names in reviews and case studies.

The third breaks card layouts routinely, where one service is named in two words and another in seven, producing cards of visibly different heights.

A worked example

A business whose service cards were laid out in a row of three, each with a title, a line of text and a button.

In the design, all three titles were one line.

In reality one service had a longer name that wrapped to two lines, which pushed its button down relative to the other two.

The row looked broken, and the fix everybody suggested was shortening the service name, which meant changing what the business called something to suit a layout.

The actual fix was making the cards align their buttons to the bottom regardless of title height, which took a few lines and handled every future service name.

Changing content to fit a layout is the wrong direction, and it is the direction most often taken because it is quicker in the moment.

Testing the extremes

The habit that catches most of this before launch.

For every element, ask what the longest realistic version is and put that in.

The longest service name you might ever add. A price with four digits. A customer name that is genuinely long. A heading of twelve words.

Then test the shortest as well, since a layout can also break when content is unexpectedly brief and leaves a large gap.

Doing this during the design rather than after is the difference between a small adjustment and a rebuild.

Zoom is another axis

A dimension people forget entirely, and it breaks layouts as reliably as narrow screens do.

Somebody enlarging text to two hundred percent effectively halves the available width, which produces the same wrapping and overflow problems as a small screen.

A layout that survives a phone usually survives zoom, because both are a narrower space for the same content.

A layout that only works at one fixed width fails both, which is why the two problems tend to appear together.

The widths that break things

Not the ones people test.

Everybody checks a phone and a desktop monitor. Problems live between those.

A tablet held upright, a small laptop, a browser window that has been resized, and a phone in landscape all produce widths nobody looked at.

The practical test is dragging a browser window slowly from full width down to phone width and watching what happens on the way.

That takes a minute per page and finds things no fixed set of test sizes will, because it covers every width rather than five of them.

The counter-case

Where a fixed assumption is acceptable.

A logo, which is a fixed image of known dimensions and will not change without somebody deciding.

Content genuinely under your control that will never vary, such as a single hero heading on a landing page written once.

And a system where content is constrained at the point of entry, with a character limit enforced, which is a legitimate approach provided the limit is generous and stated.

What is not acceptable is assuming content will stay short because it happens to be short today.

Text that must not be an image

A related failure that this problem produces.

Faced with text that will not fit, a common response is rendering it as an image, which fixes the layout permanently.

It also makes the text unsearchable, unreadable by screen readers, unable to be translated, and blurry when zoomed.

Which trades a layout problem for a considerably worse set of problems, and it is worth recognising the trade rather than making it by default.

The correct answer to text that does not fit is a layout that accommodates text.

Designing with real content

The root fix, and it changes the order in which a project happens.

A design filled with placeholder text is being judged on rhythm and colour rather than on whether it holds the actual material.

Which means every decision is provisional until the content arrives, and the content usually arrives last.

Writing the content first, even roughly, means the design is built around something real and the surprises happen at the beginning.

That is unpopular because content is the slowest part and design is the visible part, so projects start with the visible one.

The businesses that get the best result are the ones that write their service pages before anybody opens a design tool at all, and it is worth insisting on that when commissioning work.

What to check

1. Put your longest heading in every template.
2. Put your longest service name in a card layout.
3. Drag the browser window slowly across every width.
4. Check the header at the width where the name wraps.
5. Check a price with four digits.
6. Check a very short page does not leave the footer floating.

The sixth is the opposite failure and it is common: a page with very little content leaves a large empty gap above the footer, which looks unfinished rather than spacious.

The related question of what happens when content does not exist yet is covered in the fold argument and what replaced it.

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.