Responsive logos

Great conceptual approach to logo mechanics. Go to this site, then shrink the width of the browser page, watch what the logo does in response.

Only thing that puzzles me is the clipping of the trademark registration mark ® in the Levi’s logo. That intentional?

  • nevmac

    Yes it is intentional and part of the Levi’s logo.

    • As can be seen on their site

    • Aristan Saint

      It comes from the stitching of the original red logo tabs into the clothing. The edge of the trademark symbol would end up partially stitched under, clipping it. The red tab itself is trademarked and a certain percentage of Levis are (or at least were) made with just the red tab blank, other than the trademark symbol, to maintain it as a separate mark from the Levi mark.

  • Mantrax

    Logo variations such as these have been in the brand books of any serious company for many decades before the Internet existed (and hence “responsive pages”).

    The only thing that’s new here is that we have to resize our browser horizontally in order to see the variations… This “responsive” fad is officially old now.

    • Moeskido

      How is it a fad when its intent is to allow different-sized device screens to display a viewable page from the same code?

      • Mantrax

        It’s a fad, because instead of just showing us the logo variations, or showing us how they change in a complete layout, we have bare logos, that change when the browser is resized.

        Bare. Logos.

        If you spend a minute to think about that arrangement, it may hit you this is just stupid.

        The only reason it was presented like this was because “responsive” is peak hype right now and so everyone makes things change when you resize your browser.

        I’m not saying adaptive layouts as a concept is a fad. No, this specific shitstorm “responsive design” is what’s a fad.

        It’s more superficial, less utilitarian, and done for no good reason than riding the bandwagon.

        • Moeskido

          That page shows bare logos because it’s a demonstration of just that. When you see simple demonstrations of a particular CSS trick, do you call them “superficial,” too?

    • JohnDoey

      There were responsive pages before the Internet. Many print books are available as paperback and trade paperback and hardcover — variations of the same book design were made to deal with that. Many companies had both letterhead and business cards, which have radically different sizes, but which utilized the same logo and other design elements. You didn’t just shrink down the entire letterhead and put it on the business card — you had to change the sizes of various elements in relation to each other, and also decide what elements to hide for the business card design. There were also envelopes, end-of-year reports, posters, banners. It’s the exact same principle as making one design that works on 4, 8, 11, 13, 15, 22, and 27 inch screens.

      Responsive design is not a fad. It is a fundamental feature of designing for the screen. Designers have been making responsive designs for the screen for many, many years. There has been a constant debate of sizing elements onscreen with either percentage sizing (responsive) or fixed width and height, which gives a print-feel. All that has changed recently is that the people those designers are working for are now aware of why we must design for the screen in a responsive way, and they are now willing to let go of the comfortable print-feeling that fixed-width designs were giving them. For example, in a corporate setting, the CEO now has a 4 inch iPhone, 8 inch iPad, and 13 inch MacBook Air, so he or she can actually see that a fixed-width 1000 pixel wide view doesn’t work across those different screens. In the past, it was common for people to have just one computing device, so the benefits of responsive design were not as obvious.

      I guess another thing that we could say has changed is that the browsers are better now than in the past, and we can design responsively with JavaScript and CSS media queries and do more than just set elements to be percentages of width or height of the view. But the fundamental approach is the same as ever.

      • Mantrax

        I can’t believe you wrote all this stuff. I can’t even bring myself to read it.

        • Moeskido

          Speaking of “superficial.”

  • Andy Orr

    I am not sure that Nike would like the NKE logo (or BNG & OLFSN)!

  • JohnDoey

    These kinds of logo variations were already common to deal with different paper and packaging sizes. Conceptually, this is like looking at a print poster, then a smaller letterhead, then a smaller envelope, then a smaller business card. As you shrink your browser view, you are essentially turning it from a letterhead to an envelope to a business card. It makes all the sense in the world.

    What would make this example a lot nicer is if the logo variations transitioned better with subtle animations, so that when an element of the logo disappeared, it faded away, or folded into itself.