Using Flexible Logos with Responsive Design

The mediums for advertising have always varied, and the increased production of new technologies continually shifts how an audience interacts with these channels. Naturally, the scope of design adapts to the audience with new solutions. One example would be the implementation of responsive design with the increased use of mobile devices. Images can no longer be simply placed within a composition and expected to sit still because they need to withstand varying aspect-ratio cropping as an image shifts within a responsive grid. On the practical side, it’s common knowledge that words and letter forms on websites need to be larger than on paper for optimal reading comfort.

Individual elements tend to adapt to varying constraints so they are appropriate for the medium, but a prominent brand element that is not typically designed with an awareness of digital application is the logo. Websites continue to implement logos in a restrictive way, even though the medium calls for greater flexibility and strategy.

You might be thinking, “Wait, there’s a reason the logo can’t change— it’s like getting a face transplant.”

Many people hold the logo as sacred and think that changing a logo or not slapping it on every conceivable surface would damage the brand. With spotlights on cult brands like Target, Starbucks, and Apple, many people seek to replicate their success by gleaning what they can see on the surface, and one of the most straightforward, easily identified aspects of a brand is the logo. This is the starting point of many misconceptions about the importance and function of a logo. In fact, in other posts our team has offered insights on the right way to use a logo and the proper way to perceive your brand.

If you don’t have time to go through these posts, here is a summary:

• A logo is not a brand. A brand is not a logo.
• A logo is no more or less important than are other trademarks within the identity system, such as color, slogans, emblems, and so on, and even these collective factors as an identity system are not a brand.
• You can’t “brand” your own company – people define the brand based on how effectively a company communicates specific qualities and emotions
• Logos should be simple and clear memory hooks. No one should try to communicate the 10 key values of his or her business within a logo.

Don’t over complicate the logo

Now I should first mention that a well-designed logo already considers the need to be versatile. Design for a large variety of mediums and dimensions existed before the internet, so logo versatility has always been a primary focus within identity design. However, today, logo design needs to account for responsive design — different size screens call for different proportions for an optimal experience, whether it be images or type. In most cases, a logo at full size on a desktop monitor will take up too much room on a mobile device. What if shrinking the logo to fit in the smaller space is not good enough? In some cases, when you shrink the logo, there might be too many detailed visual aspects to recognizably render in a smaller space. The most basic and obvious solution is to have a simple logo so it is readable and/or recognizable when it scales to a smaller size.

Create an alternate, simplified version

Disney has adapted and created one of the more versatile logo marks, even though it was designed decades before the first smartphone was introduced. Most of us can visualize the “ident” (a short animation that features a company trademark) that’s played before a movie with the castle and full title “Walt Disney Pictures.” In most marketing applications, like its website, the title is reduced to “Disney” but retains the same distinctive handwritten font—this logo is undoubtedly part of the same identity system but is more versatile in its application because it has been simplified in both form and conceptual content. There may be instances when a company needs to retain a complex logo, and the best solution would be to create an alternate version for its responsive website.

Your logo isn’t a security blanket – don’t be afraid to let go of the word mark

Companies such as Hubspot drop the word mark within a narrower browser. With the name of the site shown within the url of the address bar, they understand that a simple icon is less distracting and that the user can focus more fully on the content and experience, which is more important in acquiring dedicated users and driving conversions.

Another benefit of breaking the logo down to a simplified form is strengthened engagement on social media. Avatars are extremely limited in real estate and including all the elements of your complex logo will not benefit you. The user either won’t be able to distinguish any specific element or won’t have time to develop a visual memory hook that will link the brand experience with the logo mark. Brands such as Square Up and Squarespace utilize only the icon element on all browser sizes, despite having a version of a logo that includes a spelled-out word mark, and Twitter has abandoned its word mark completely.

It’s all about user experience

With so much focus on the design of logos on their own, it can be easy to forget the first point: logos are not a make-or-break element within a brand experience. Even if a logo can be optimized for various viewports and browser windows, it will be useless if the layout is not well designed, the type is not legible, the images do not load, or the colors clash in unappealing ways. The main point is that logos should be an element that is more thoroughly questioned and strategized within varying mediums and instances. If user experience and relationships are what drive brands, then companies should not be afraid to bend logos to conform to good user experience. The strongest and smartest brands implement small shifts within their individual elements to adapt to trends and technology, as these companies know a small change won’t break their brands and that the correct small changes will strengthen them.