When I first read about responsive logos, I couldn’t believe I hadn’t thought of them already; they are the obvious next step after responsive websites, and will no doubt raise the bar when it comes to branding and logo design.
Click to see it in action…
Responsive Web Design Revisited
A responsive website, as explained by John Rampton of Huffington Post “has been constructed so that all of the content, images and structure of the site remains the same on any device. For example, when a user accesses a site on their desktop, they are getting the full view of the site. But when that same user goes to visit the site from their smartphone or tablet, the site will retract to fit on the smaller screen.”
This not only makes for a better user experience, it means that you only have to create one website, which in turn means easier web maintenance and a simpler approach to SEO.
What is a responsive logo?
The same theory applies to responsive logos - the size and orientation of the logo adjust according to the visual space it has to fill.
Creator of The Responsive Logos Project, Joe Harrison demonstrated how this works using well known brands such as Coca- Cola, Nike Air, Bang & Olufsen and Levi’s.
Check out Joe’s website and specifically how the Nike Air works as a responsive logo; as the browser page decreases, the logo shrinks, losing ‘Air’. Take it one step further and the logo shrinks again to the iconic tick. The logo must be adaptable and translate the same message to the user no matter what device they are using to view the site.
When responsive websites alter the orientation and size of a page, they may also shrink or expand the size of an image, but the image by nature doesn’t change.
But what if a responsive website had the capacity to, when instructed, change the size and orientation of a logo?
For this to work, of course, requires a brilliant logo; something that can encapsulate everything the brand represents with one simple image. As a designer, I find this incredibly exciting; the challenge of creating something that speaks to millions of users no matter what device they are using to access a website.
What are the benefits to having a responsive logo?
Better Logo Design and Integration
Logos are the cornerstone of branding, so it makes sense to hardwire them to suit the responsive web space. I have often struggled to fit lengthy horizontal logos into narrow vertical spaces, which is like trying fit a square peg into a round hole, and leaves the logo looking disproportionate to the space it has to fill.
A logo that fits nicely onto a webpage no matter what size or shape makes for better branding.
Iconic Design
I also believe this new approach will encourage designers to create logos which can represent a brand with a simple image, such as Nike’s tick or Chanel’s intertwined Cs. The right image can be more powerful than words; the most successful brands have managed to associate themselves with certain feelings through simple, instantly recognisable images.
For every woman who buys a Chanel couture gown, thousands buy a scarf or a bottle of perfume because of what the two Cs represent; unattainable luxury and timeless glamour. People all over the world seek out the McDonald’s golden arches when they are away from home, because they represent familiarity.
Maintaining brand awareness and brand loyalty in the fickle world of online shopping is not easy. If responsive logos require designers to include a simple icon version for small screen applications we may see a more creative approach to logo design, as we did when Apple first adopted flat design for their user interface.
Social Media Application
Aside from responsive website applications, I can see the responsive logo being used on social media platforms.
Amongst the big boys like Facebook, Twitter, Google Plus and Youtube, profile picture and cover photo specs vary greatly.
This can be incredibly frustrating when you upload your logo to a platform’s profile picture portal and watch it blur and shrink to fit the required space.
Wouldn’t it be great if there was a “one logo fits all” solution? Imagine if responsive logos could be coded in a way that a single file is supplied to the social media platform which dictates which logo is shown.
It certainly makes for a great branding tool. I’m sure it is only a matter of time before someone finds a way to make this work.
For those curious, Joe Harrison was also the designer whom created responsive icons!