It’s the cliched scourge of graphic designers the world over: a perfect design is presented to a client, who immediately asks for their logo to be made bigger. Well, those days are gone my friends. Let me tell you why you should be saying to your clients – you need the logo to be smaller.
The idea of a responsive brand identity would have had many a designer scratching their head only a few years ago, but it has very quickly become a necessity borne out of the widespread proliferation of the modern internet. Whereas in simpler times web pages had much in common with the fixed size constraints of a billboard or magazine page, today website content is viewed on over 15 trillion common resolutions across a minimum of 50,000,0000 screen sizes split over a plethora of platforms across several device types*. Where once a designer had to design a thing only once, today they must design to a seemingly unlimited set of rules.
Consider the fictional website below:
You are using an iMac with a 27” screen but have yet to realise that you can reduce the size of your browser window. You’ll notice the site fills the screen – there’s a full navigation menu with every page name across the top, the graphic below the menu is eye-poppingly huge yet retains a sharp crispness, the whole site reads across as well as down, the text heading bounds across the screen demanding the attention of even the laziest eyes.
Now look at the same site on a smartphone.
Everything is smaller – the menu has been hidden behind a button, the graphics are small enough to fit a pocket-sized screen, everything is in a single column, the headings are split over multiple short lines. But they both retain the same feel, and convey the same messages and emotions. This is a responsive website.
Apart from one thing: that header. The header of the website needs to be far too big for a mobile screen in order to accommodate the brand logo. But if the menu, the photos, the content, the line height, the header size, the background image, even the copyright notice at the bottom of the page all change to suit the smaller screen, should not the logo too?
You’ll see the logo is vertically stacked – that is there’s a visual brand symbol, with the brand wordmark below it. And we can see this logo works absolutely fine on the full desktop version of the site. It also looks good on the side of trucks and on a T-shirt.
All making great use of space to ram that brand home to anyone looking. But on a tablet screen, having that logo so it’s large enough to be legible is eating up highly valuable real estate on that tiny little screen.
An easy way of using a responsive logo to solve the issue here would be to re-arrange the two elements to be aligned horizontally instead of vertically. This frees up space in the vertical, meaning the main hero section of the site is given more prominence.
So now we have two versions of the same logo – a vertical stack, and a horizontal stack. But what about those even smaller screens? On a smartphone display, even more precious screen can be freed up for life-enhancing content and aspirational photography by taking the responsive logo concept even further. By simplifying the mark and cutting it back to just the icon from the original logo, the spirit of the brand is retained within a simplicity far better suited to a mobile phone screen.
The concept of a responsive brand is not really that new – Coca-Cola started advertising with the abbreviation ‘Coke’ in 1941. But this formerly optional branding concept is fast-becoming a must-have for any business that wants a truly future-proof identity. Website developers can work wonders with layouts and typography, so it’s time that the world’s graphic designers catch up – and give them the responsive logos they deserve.