A Roofing Site With a Stretched, Blurry Logo

The site

A roofing company with two install crews and a repair van replaces asphalt shingle and metal roofs on houses across a few suburbs, and handles leaks and gutter work through the wet months.

Its website has a charcoal header across the top of every page. On the left sits the logo: a house outline with a steep peak, and the company name in bold capitals beneath it.

The logo is stretched sideways, so the peak is low and wide and the letters look squashed. Its edges are fuzzy, and it sits in a white rectangle that stands out against the dark header.

The company's trucks, parked in driveways all over the area, carry a different version: a red peak and narrower lettering, redrawn years ago by the sign shop.

The inference a visitor makes

A homeowner hiring a roofer is committing a lot of money to work they will rarely see up close. They are looking for reasons to trust a company, and for reasons to cross it off the list.

The logo is the first thing they see, and it is visibly wrong. A distorted shape registers even with people who could not say what is wrong with it.

Roofing is judged by straight lines, clean edges and details done properly. A company that lets its own name appear stretched and blurred invites the question of what else it lets slide.

And a visitor who saw the red truck on their street may doubt this is even the same company.

Four problems in one image

• Stretched: forced into a space of a different shape.
• Blurry: a small copy enlarged to fill the header.
• Boxed in white: saved in a format with no transparent background.
• Mismatched: a different version from the trucks and signs.

The first is the one visitors notice fastest. People know the shape of a house and the shape of letters, and a squashed version of either registers before anything has been read.

Stretched to fit the header

Every image has proportions: how wide it is compared with how tall. The header was built with a space of fixed width and height, and the logo was simply told to fill it.

The browser did as it was asked. A logo that is roughly square was pulled out to fill a wide, shallow space, and everything in it widened to match.

The fix is to let the logo keep its own proportions, setting only its width or its height and letting the other follow. If the space is the wrong shape, the space should change, not the logo.

It is a common result of a site built from a template, where the header was designed around a logo of a different shape and nobody adjusted it.

Too few pixels for the screen

The image on the site had been copied from the company's Facebook page years ago, at a small size, then enlarged to fill the header. Enlarging cannot add detail that was never there, so the edges blur.

Newer phones, tablets and some laptops have high-resolution screens that pack more pixels into the same space. On them, even an image shown at its exact size can look soft.

The usual answer is a file with twice as many pixels across as the space it fills, or a vector file, which describes the shapes themselves and stays sharp at any size.

Visitors also zoom in on phones to read small text, and a soft logo only gets softer when they do.

A white box on a dark header

The logo was saved as a JPEG, a format made for photographs, which cannot leave a background transparent. Whatever sat behind the logo when it was saved, white paper in this case, comes with it.

On a white page nobody would notice. On the charcoal header it becomes a white rectangle with a logo inside, which looks like a sticker pasted on.

A PNG file can keep the background transparent, and so can SVG, the vector format current browsers display. A dark header usually calls for a reversed version of the logo as well, drawn in white.

A different logo on the trucks

The sign shop redrew the logo to cut it from vinyl, and nobody sent the new version anywhere else. So the trucks, the yard signs and the website have shown two different logos for years.

Customers often see the truck first, parked on their own street. When the website shows something else, the connection the truck made is lost at the moment it should pay off.

It leaves suppliers guessing too. The next printer asked for the logo uses whichever version is nearest to hand, and a third variation begins.

A worked example

The office manager found the original artwork in an old email from the designer who drew the logo: a vector file, at its true proportions, with the steep peak intact.

The owner preferred the sign shop's red peak and narrower lettering, so the designer updated the master file to match the trucks rather than the other way round.

From that file, the web developer made what the site needed: a reversed white logo with a transparent background for the dark header, saved at twice its display size.

A full-colour version went on the light pages and the quote form, and the header was adjusted to the logo's real shape instead of the logo to the header's.

The same files went to the sign shop and the printer. The trucks, the yard signs, the quote forms and the website now carry one mark, and the first thing a visitor sees no longer argues against the work.

The counter-case within the site

A sharp, well-proportioned logo will not win a job on its own. Photographs of real roofs, reviews and a clear way to ask for a quote do far more of that work.

And a company about to rename or rebrand should fix the files once, as part of that change, rather than twice.

But a broken logo costs trust before anything else on the page has a chance. Get the original file, keep its proportions, and give the site versions made for screens.

What to change

1. Find the original logo file from whoever drew it.
2. Choose one version for trucks, print and site.
3. Keep its proportions wherever it appears.
4. Export a transparent PNG at twice display size.
5. Add a reversed version for the dark header.
6. Use the vector file where the site supports it.
7. Send the same files to every supplier.

Step one makes every other step possible. Without the original file, each fix is another copy of a copy, and copies only ever lose detail.

Simplifying an older logo so it survives every use is covered in a glossy logo from the Web 2.0 years.

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.