Be prepared for every instance with a responsive logo.
With all of the new fangled technology out there it's hard to stay in front of the ever-changing digital landscape. What used to be decades of slow, forward-marching progress is now sprinting forward at a break-neck pace. One of the most recent features to crop up over the last decade, is an element called "responsive design."
Responsive design is something that you experience every single day. It impacts your daily life, both professionally and personally, in ways that you probably didn't even realize. But what is it? Why should I worry about it? What part can it play in my business? Let's tackle each of these questions one-by-one, shall we?
What Is A Responsive Logo?
A "responsive logo" is variations of the same logo that can work across a diverse set of applications. In most cases you will have at least three iterations:
A full logo that you use for most of your business promotions such as advertisements, invoices and letterheads.
A more compact logo that can be stacked or shortened for use in smaller areas such as promotional materials - think pens and stickers.
An icon that will work best for social media profile pictures, a website favicon, and smaller applications like document footers.
Most of the time, people will refer to a responsive logo as a digital design term. However there are a multitude of applications for each of those logo versions!
Take this logo that I designed for Help My City! as an example of a responsive logo.
The full logo is simple, easy to read, and has an icon that can be separated from the text, can be reconfigured for different layouts, and can be simplified for small scale implementation.
Some things to think about when choosing the elements for your logo are the colors, fonts, and icon shape. These things you will need to rearrange, scale, and separate. Make sure that each of these features can stand on their own.
Why Is a Responsive Logo Important?
Take a look at the top of your browser window? How many tabs do you have open? Do you see the tiny, little logos next to the titles of the pages you have open? Those little doo-dads are called favicons. I've circled them in the scree shot below. These favicons are likely the smallest possible version of your logo that you'll use and commonly measure around 16x16 pixels. That's tiny!
A responsive logo is similar to a "responsive website.” Check out one of your favorite websites (like jeanettejohnsondesign.com) on your phone. Hold your phone up and down in portrait orientation...now flip it to the side in landscape orientation. See how the site readjusts itself to fit your screen? Your phone is making requests to the site for the correct code to fit the screen. These adjustments are the code's response to that call, thus the term "responsive."
There are a plethora of different screen sizes out there - some square and some widescreen. It's important that your logo and website are able to accommodate all screen sizes. But outside of the digital realm, being prepared with a responsive logo can make your life easier and it will make your marketer scream with delight!
Having full and compact versions of your logo can help you stick to your brand standards much easier than trying to stick the same file into files on the fly. Each file variation takes time to develop. So completing these files before you start your new brand implementation or advertising campaign can save you time and money in the long run.
There are also a few different ways that you can use a responsive logo to reinforce your brand and make your business stand out from the competition.
How Can a Responsive Logo Be Used?
The most impactful way you can use a responsive logo is on your website. I've already given you a good rundown about implementing your responsive logo into your site. But there are some fun ways you can use these files to build up your brand in fun and exciting ways.
A good logo animation is fun to watch and can create a memorable moment for your brand. This video can be used on your website and shared across your social media channels.
Use your icon or compacted logo for a visual punch on your social media channels. You’ll see a lot of brands, both big and small, using an abbreviated version of their logo as their profile pictures. Most social channels use square or round frames as the main profile picture and your icon or compact logo will likely fit better in these spaces.
Create an overlay to brand your images by making a template with the most appropriate version of your logo in the corner. This way you can easily drop a picture into the template, save, and post to social media. If your image is shared then your logo will accompany it everywhere it goes. You can have a designer do this if you don’t have the time or, if your budget is tight, you can teach yourself to use an online software like Canva.
Find a small, imprintable item that will allow you to use your icon. Share these giveaways with your current customers to keep you on their mind in a non-intrusive way. When you use your icon in conjunction with your full-size logo it only stands to help reinforce your brand in a positive way.
Another way to implement a responsive logo on your website can be in your menu or header. Most sites have a company’s logo in the menu bar at the top of the page. When you scroll down, you need more space for the content of the page, especially on mobile devices. Your web developer can implement an animation that switches out the full logo for the compact version, or even an icon if space is tight. Then when a user scrolls back to the top, the full logo comes back into view. Pretty cool, huh!
Hopefully you now understand the importance of having a responsive logo in your marketing arsenal. Not only will it add to your brand, but it’ll save you time and effort in the future.
Almost all of the logo projects I design feature some form of responsiveness. I feel like you’re being sold short if a designer doesn’t work with you to make sure each of your bases are covered in how you plan to use your logo. This includes giving you ideas you may not have thought of previously, such as a favicon as we discussed earlier.
If you’re ready to expand your brand to include a responsive logo, click on the Contact link in my menu and let’s start working together to push you ahead of your competitors.
