Why You Need a Responsive Logo
When you think of a brand such as Adidas, you probably picture its logo. But are you thinking of its entire logo, the famous three stripes with the word adidas in Avant Garde Gothic underneath? Just the stripes? Perhaps just the name? Or is it the original trefoil logo?
The truth is that you could flash any of them to any brand-aware person and they’d instantly recognise it as belonging to Adidas. And you could say the same about most logos. The success of logo quiz apps, where the player has to guess a brand based on a fragment of a logo, proves that logo recognition is second nature to us.
The idea of using different logos for different contexts long predates the age of responsive websites. Nike seem to use their swoosh, the full name logo and “Just Do It” interchangeably without it looking like the brand is being watered down.
But in the digital age, brands with flat or tall logos would almost inevitably benefit from having a suite of logos that are automatically chosen to best suit the device resolution being used. Brands whose strapline forms part of the logo will generally suffer no ill from dropping the strapline if it would be illegible on smaller screens.
That’s not to say that every company needs responsive logos. Think of brands like B&Q or Lego, which have square, bold logos; shrinking and growing retains the image fidelity and since there are no fiddly details to muddy the image, they can cope perfectly well with being auto-resized by browsers. They can of course choose to add some extra designs for smaller screens; it’s just not always necessary.
PushON’s resident designer Alex Clapham has this to say about responsive logos:
A lot of colleagues ask me, ‘Is that as big as it can go?’ but I’m here to talk about logos. They can sometimes be the hardest thing to fit nicely in a responsive design due, in part, to their unyielding nature. They’re something that has to remain constant, and to a degree I concur with this sentiment.
The problem is that they aren’t designed for the modern world of responsive design. When a logo shrinks to fit a small screen you have the same logo which has to compress and squeeze and sometimes become an unrecognisable dot that if you squint and turn your head to the side vaguely resembles the logo.
‘Responsive’ is the buzzword that’s still hanging around. We have responsive sites; we are getting into responsive icons for sites using scalable vector graphics (SVGs); and the next step is a responsive logo. The job of a logo is to represent your brand, and you need that to be visible on all devices. With the company having no control over the devices their customers will use, they have no choice but to bend, stretch and adapt their logos if they want them to remain integral to their online branding
Examples of Responsive Logos on Websites
Researching this article I looked at dozens of companies’ sites to gauge how many used responsive logos or would benefit from them. I stuck mainly to high street retailers and other household names, and the first thing that struck me was how few of them had yet to embrace the concept of responsiveness per se, let alone responsive logos. Often the logo would simply disappear off screen or be obscured by a menu, and since many retailers’ sites are identikit images of each other, it would leave the average mobile shopper virtually unaware of the site they were visiting.
Still, there were some interesting examples that I’ll point out here. The larger images are actual pixel screen grabs, although how they display will vary from device to device.
First, an example of a company that isn’t afraid of ditching its strapline to make the logo remain in proportion at lower resolutions. Everything is kept neat and balanced and there are no awkward overlaps ruining the shape.
Debenhams kept it simple by reducing their logo (simply their name in capitals) to its initial D. It’s certainly responsive, but I’m not sure it’s unmistakeably Debenhams. In the absence of an image for the logo, it’s a neat solution, though – it would be difficult to squash the logo into such a narrow space.
Domino’s knows its logo is just as recognisable as its name, so there’s no problem with scaling down to the simple Domino’s when screen space is limited. They could probably have stuck with the type too, but it doesn’t affect the branding. You’re probably already looking at the pizzas by now anyway.
Sticking with pizzas, Pizza Express chose to do the opposite of what might seem instinctive, going to text on the smaller screen. But based on the layout of the page, it makes perfect sense. The company’s logo is quite intricate and would turn to a grey smudge as lower resolutions.
Fortnum and Mason
Exclusive food store Fortnum and Mason is clearly fully signed up on the responsiveness thang. At smaller resolutions the page changes colour and the type-based logo changes to a stacked design. Yummy.
This perfectly engineered execution is a real beauty. The chrome-effect orginal image is too detailed to shrink pleasantly, so the designers have made smaller screen size trigger an outline version that retains detail. They probably could have got away without the name, so iconic is the brand, but it still jumps out.
Not to be outdone by their cross-channel rivals, Peugeot’s lion got responsive by leaping atop the company’s type logo at smaller resolutions (in fact, the smaller version is Peugeot’s standard layout – the side-by-side layout is web only).
Sports Direct keep it simple by stacking their logo, proving that the brand is sport’s answer to Fortnum and Mason. They even manage to keep the 24 hour delivery graphic, although it does become illegible at lower resolution.
Urban Outfitters has made its Microsoft Word-designed logo into a thrifty UO at smaller resolutions. I’m not sure it’s a well enough known logo to abbreviate like this, especially since it’s a relatively new logo, but in the absence of a logo image it’s probably the best option.
The Premier League
The English Premier League recently unveiled its new logo that will start being used for the 2016/17 season. The branding team helpfully released the entire deck of logos, demonstrating how the basic image and type can be used alone and in various arrangements depending on the available space and context. It’s a nice insight into mindset designers of responsive logos need to adopt.
If you’re interested in the responsive logos, have a look at this piece at viget.com.
Why not subscribe to our newsletter to receive regular updates?