The importance of a responsive logo to your brand

Lindsey Gemmill
Woman at computer looking at cell phone

You spent a lot of time and invested a lot of resources into getting your brand just right. You have established yourself a logo, and you want to make sure you are consistently using it wherever your brand lives. But on the web, this “old fashioned” logo could be hurting you rather than helping you.

Too many times when businesses are going through a rebranding effort you’ll see samples of different logo options in use on printed material. But what about in the digital space? It surprises me that nowadays designers are still showcasing new logo concepts on coffee mugs and t-shirts and not showing how it will be translated on the web. After all, digital is at the forefront of your marketing strategy, so why wouldn’t adapting your logo to this space be just as important?

(I don’t mean this in a way that makes your logo designer look bad, we just seriously need to pause for a moment and thing about the big picture and not just a one dimensional representation of your multi-dimensional brand.)

So what’s the problem with my logo you ask?

Your logo was probably NOT built to be in a horizontal space.

Man holding iphone with illegible logo

Think about the top of a website for just a moment. The majority of websites try to be as minimal as possible so that this space isn’t overwhelming the rest of the content on your site. While the navigation is important, we don’t need to take up 300px of height to accommodate a vertical logo, and we shouldn’t have to.

The best way to think of it is simply having your icon to the left or right of your text. However, if the only thing you have built your brand around is a logo that has an icon above two or three tiers of text, you’re going to loose some clarity on the web unless your header is just as tall as the next content block on your website. (Pro-Tip: In most cases we don’t recommend doing that.)The hardest style of a logo to accommodate is when you not only have a vertical logo, but you have a centered vertical logo. There is a time and a place for that style of logo, but it typically isn’t in the header of your website.

Tip: Limiting your variations of logos limits the flexibility of using your logo in different spaces, and this isn’t just for your website. The struggles will pop up when designing for other areas like social media platforms or digital advertisements. Having more flexibility by adding variations of your logo will actually benefit you in the long run.

You REALLY just HAVE to have that tagline in the logo.

No, actually you don’t. Taglines on a website live elsewhere, detached from your logo. I may sound like I have a bit of resentment here, but the truth of the matter is taglines on logos in the digital space are just not meant for the header of your website. If you’re trying to work within these requirements, 99% of the time you’ll struggle to even read the tagline. As a result you end up having to make the logo double or triple the size that is recommended.

It’s not to say there isn’t a place for a logo with a tagline on the web. I’ve seen this work most commonly when you have a splash screen or a hero banner with a background video playing and the forefront of the piece is your beautiful logo — with enough room to be bold and incorporate smaller typography. But think of how those spaces transform when you scroll. You’ll notice elements go missing from that logo so it can sit in a much smaller area, and one of the first things to go is the tagline. Your tagline is your messaging anyway, so you’ll want to have that as readable text on the page anyway, not stuck in a graphic, but that’s an entirely different subject.

Your Logo Doesn't Translate To Mobile


You’re reading this and probably thinking, “why wouldn’t I just be able to use the same logo on desktop designs and mobile designs?” The answer is a little more complex than you think. You’re at the point where you’ve incorporated the two above logo concerns into your brand, and you have a horizontal logo and you got rid of that tagline, but the problem is you still want to keep that logo on mobile.

With that in mind cut that 480px in half and subtract the room for your padding and margins. You’re really only working with a small amount of space here. Basically you are a tiny step above an icon at this point, and even though you’ve created a logo flexible for a “small space” on a large screen, it still needs to get smaller on your phone.

Joe Harrison’s exploration of responsive logos for big brands. View the full study here.

Final Thoughts

Most of the concern with manipulating your logo for the web is that it won’t be recognizable, but that is why it is essential to establish these pieces of your brand from the beginning.

Recognition is important but the purpose of your site isn’t to smash a giant logo in my face. We need to move on from that quickly to establish the more important things users are looking for. The who, what, when, why and how’s of your business. So take a moment to think about how you should weigh your logo among all of those elements, and I bet you’ll start sketching a way to make that logo of yours fit into a much smaller area than you are now.

HWL Creative can help you organize your brand, and make sure it's consistent and legible across a variety of platforms. Get in touch today!

WRITTEN 2017 | Originally posted on Medium

Recent Ramblings


Small businesses need Professional websites too

What your team needs to know about small business websites and how you can understand the value they bring to your business.
Lindsey Gemmill
Web Design

You Did it! You got a new Website...Now What?

The epicness of having a new website is a totally amazing feeling. After a while though, you start to think if there is something else you can do.
Lindsey Gemmill

The Value of Drones in the Real Estate Market

Showing potential buyers just how serious you are about selling is critical, and to do that you need to make a great first impression.
Andrew Pearson