Rebuild the layout so it adapts to every screen: a flexible width, readable text, a viewport setting for phones, and the counter hours and phone number at the top. A narrow 2005 column suits neither desktops nor phones.

The site

A plumbing supply house with a trade counter, a fixture showroom and a warehouse sells pipe, fittings, water heaters and fixtures to plumbers, and to homeowners who walk in holding a broken part.

Its website was built in 2005 for the 800-pixel screens many people still used then. Every page sits in a fixed column about 760 pixels wide, centred, with grey margins either side.

The text is 11-pixel Verdana, and the menu down the left is a stack of small pictures of words. The phone number appears once, in the footer, as part of an image.

On the new 24-inch monitors at the counter, the column fills less than half the screen. On a phone, the whole page appears in miniature.

The inference a visitor makes

A plumber checking stock between jobs, or a homeowner with a dripping tap, wants three things: whether you have the part, when the counter opens and how to reach you.

The first impression arrives before any of those are answered. A design that has not changed in ten years suggests information that has not changed either: old prices, discontinued lines, hours from before the last move.

Plumbers draw a more practical conclusion. A supplier whose site is hard to use from the truck is a supplier you phone instead, or one you skip.

What goes wrong, screen by screen

The fifth costs the most. Phones are where plumbers look things up during the working day, and a page that needs pinching and dragging loses them in seconds.

Why phones shrink it

Without a viewport setting, a single line of code, a phone assumes the page was made for a desktop. It lays it out about 980 pixels wide, then shrinks it onto a screen less than half that width.

Text already small at a desk ends up at roughly a third of that size. The visitor has to zoom in, then drag sideways along every line.

Since April 21, Google has counted mobile-friendliness when ranking pages for searches on phones. This site fails Google's Mobile-Friendly Test on three counts: no viewport, text too small to read and links too close together.

So on phones it can rank below similar pages that pass.

Small text on a big screen

On a desktop the page is readable, just. Eleven-pixel Verdana was common in 2005, when screens were smaller and people sat closer to them.

On a large monitor set back on a counter, it is too small for many older eyes. Browsers can zoom a page, but few visitors know how, and a site should not need it.

Body text of around 16 pixels, with comfortable spacing between lines, reads easily at a desk and on a phone.

Margins that say nothing

On a wide monitor, the grey margins cover more of the screen than the content does. The business looks smaller than it is, and product tables squeezed into the column wrap awkwardly.

A flexible layout uses the width it is given, up to a sensible limit. Text keeps a readable line length, while product grids and showroom photographs spread out to fill the space.

A worked example

The owner noticed the problem from his side of the counter. Plumbers kept phoning to ask whether a part was in stock, and several mentioned they had tried the website from the truck and given up.

The rebuild started with the layout rather than the look. Every page template was made responsive, so the same pages rearrange themselves to fit a phone, a tablet or a wide monitor.

On a phone the menu collapses behind one button, and the counter hours and phone number sit at the top of every page. The number dials with a tap.

The image menu became real text, body type went up to 16 pixels, and product category pages became simple grids: two columns on a phone, five on a wide screen.

The words and products barely changed. They now fit whatever screen a visitor is using.

Pictures of words

The menu buttons and the phone number were saved as images of text, a common way to control fonts in 2005. An image cannot reflow, so on a narrow screen it shrinks with everything else or spills off the edge.

Search engines and screen readers cannot read images of text either, and a phone cannot dial a number it cannot read as text.

Real text, styled in the business's own fonts and colours, does the same job at every size.

Four screens to check

Before and after the rebuild, try the site on a phone and a tablet, then on a laptop and the biggest monitor in the building.

On each, find a product category, the counter hours and the phone number, and try calling from the phone. Run the home page and a product page through the Mobile-Friendly Test as well.

Anything that needs zooming, sideways scrolling or squinting on any of the four is still built for one screen size.

The counter-case within the site

Not everything on an older site needs replacing. The product range, the brand pages and the showroom photographs may be good content that only needs a new frame.

A printable price list or spec sheet can stay a fixed-size PDF, since it is meant for paper. And a wide table of pipe sizes may still scroll sideways on a phone, provided the rest of the page fits.

The layout is the problem. Rebuild it so every page adapts to the screen it is shown on.

What to change

  1. Replace the fixed column with a flexible layout.
  2. Add the viewport setting with the new layout.
  3. Raise body text to about 16 pixels.
  4. Turn image menus into real text.
  5. Put hours and a tappable number at the top.
  6. Let product grids use the full width.
  7. Test on four screens before launch.

Step one is the change everything else depends on. A viewport setting or larger text added to a fixed 760-pixel column only moves the problem around; the column itself has to go.

Why every template has to change at once is covered in inner pages still in the old design.

Frequently asked questions

Why does an old site look tiny on phones?

With no viewport setting, a phone treats the page as a desktop design, about 980 pixels wide, and shrinks it onto the screen, so small text becomes unreadable.

Can I just add a viewport setting?

Not to a fixed-width layout. The page would then spill off the side of the screen. The setting works only with a layout that adapts to the width available.

What text size should a site use?

Body text of around 16 pixels with comfortable line spacing reads well on phones and large monitors. Eleven pixels, common in 2005, is too small for many readers today.

Does an old layout affect Google rankings?

On phones, yes. Since April 21, being mobile-friendly has counted in Google's rankings for searches on phones, judged page by page; the Mobile-Friendly Test shows how each page fares.

Why replace images of text?

They cannot reflow on narrow screens, search engines and screen readers cannot read them, and a phone number saved as a picture cannot be tapped to call.

Does the content need rewriting too?

Often very little. Product ranges, brand pages and showroom photographs may be fine. The layout is what fails, so rebuild it to adapt and move the content across.

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.

Site still built for a 2005 screen?

Tell us the address, and we will show you how it looks on a phone and what a layout that adapts involves.

Start a Conversation