Responsive Logos

http://responsivelogos.co.uk/

by hxw • 12 years ago

236 51 12 years ago

responsivelogos.co.uk

cateye• 12 years ago

I am not a supporter of omitting information because there is less space. I'd rather choose restructuring of the information.

(I guess there is a reason in the first place to display the information. Simply leaving it out feels very wrong. Or it was already unnecessary.)

hxw4• 12 years ago

I think the whole reason for having a logo mark is to have something is that is immediately recognised, even when the logo type is omitted. You can't/don't always use the full logo, as it isn't always the best visual solution.

arketyp• 12 years ago

Never seen "Coke" in that classic font before. Is it new or perhaps particular to the US?

hxw4• 12 years ago

I've never seen it before, so I do not think that has been ever used officially.

gleenn• 12 years ago

Isn't it on all the cans? http://lmgtfy.com/?q=coke+cola+can

benjoffe• 12 years ago

None of the results on that page or image results show Coke in the classic font.

Trezoid• 12 years ago

If you actually looked through the images page you will find that when the single word "Coke" is used (most notably on the Diet Coke can, but also on occasional promotional items) it's in a much more modern serifed font, rather than the script font used for the classic Coca Cola logo.

davb• 12 years ago

The classic logo is often on the can/bottle near the nutritional information: http://imgur.com/OHinuge (from a can of Diet Coke in the UK, taken today. The can was part of a large multi-pack case).

There's a little bit about the history of the logo here: http://www.coca-cola.co.uk/125/history-of-coca-cola-logo.htm...

DougBTX• 12 years ago

The smallest responsive version of the logo says "coke", rather than "coca-cola", which I've not seen before. I couldn't see any use of "coke" by itself, when used for "diet coke" they use a different style: http://www.amodelrecommends.com/wp-content/uploads/2011/02/d...

lstamour• 12 years ago

I'm thinking it's something equivalent to http://www.dafont.com/loki-cola.font?text=1oke&psize=l manually kerned and tweaked.

Slightly surprised that the "Coke" text from the largest logo wasn't used as the smallest.

userbinator• 12 years ago

Is "responsive" the new buzzword for "things that change when you resize them"? I've been seeing it used an awful lot in web design as of the past few years, often rather vaguely as some sort of feature.

dspillett• 12 years ago

Ish. It is the buzzword for "the same design works on a vast range of screen sizes and orientations".

The fact that things rearrange dynamically as you resize your window on a desktop box is not the main target, the target is a design working equally well on your desktop, your table in both landscape and portrait, your much smaller phone, and so forth, so the designer doesn't need to maintain multiple versions of the site/page/app.

diminish2• 12 years ago

In this particular case, could anyone explain how high pixel density and responsiveness would work together at the same time?

datashaman• 12 years ago

Coincidentally, 'ish' is the name of a useful viewport tester for responsive design. http://bradfrostweb.com/demo/ish/

masklinn• 12 years ago

Is "responsive" the new buzzword for "things that change when you resize them"?

Not just change, but remove flourishes and not entirely necessary elements.

I've been seeing it used an awful lot in web design as of the past few years, often rather vaguely as some sort of feature.

It's a feature for cross-device compatibility, the point being to alter visible content to fit multiple device sizes.

eliaskg• 12 years ago

I prefer "responsive" over "things that change when you resize them" because it's way shorter.

onion2k• 12 years ago

Technically it's responsive to the device being used rather than responding to user action. The design of a good responsive site should go much further than just making things appear and disappear or moving content around - it should be loading lower resolution images, changing UI interaction (eg not using :hover on a touch device), and even displaying different content (eg promoting a 'nearest store' to mobile users).

zimpenfish• 12 years ago

It's the new buzzword for "This is how things should have been in 1994 but we were too busy trying to reimplement Quark-style rigid layout in HTML, sorry about those wasted 20 years."

pjc50• 12 years ago

I can't upvote this enough. Web 1.0 was "responsive" in that text reflowed and you could layout tables to keep things roughly positioned relative to each other. But everyone in the design community had just got used to desktop publishing and tried to replicate that, frequently with horrible results.

jp555• 12 years ago

Wasted? We're only here because of where we came from. Even if we somehow did responsive design from the beginning (although I recall "progressive enhancement" was a hot thing back in the early days) we would just have a whole different set of hindsight-is-20/20 lessons.

illumen• 12 years ago

Sometimes when people use terms they know the meaning behind them ;)

This is the original article which named the technique: http://alistapart.com/article/responsive-web-design/

Although the technique was being used earlier than May 25, 2010.

Adaptive Web Design (responsive but on server side, not client) is the other technique popular with websites aiming to support 96% of browsers well. Because it's impossible to do that nicely for mobile browsers.

Mobile first, offline first are the other two related terms you've likely heard. Meaning design for mobile first, or offline first.

minijus2• 12 years ago

That is "The Hobo’s Method" according to Ilya Pukhalski (source: http://www.smashingmagazine.com/2014/03/05/rethinking-respon... ) and I totally agree with him. That is not efficient way, even lazy way of creating responsive logos. The svg for each logo is repetitive and contains each logo variant - simple sprite technique is used and that is completely not innovative. The same effect could be achieved using png image. Only advantage is that svg saves some space.

It would be much more impressive to see the same parts of logos reused on different variants of logos - "The Man With A Gun’s Method" that is covered in the same article by Ilya Pukhalski.

For comparison: "The Hobo’s Method" - http://responsivelogos.co.uk/images/logo5.svg and "The Man With A Gun’s Method" - http://pukhalski.com/responsive-icons/responsive2.svg

Edit:

It is strange that author publishes (source: http://www.joeharrison.co.uk/projects/responsiveicons ) the information from Smashing Magazine containing the methods of responsive SVG and still uses the poorest method.

decode• 12 years ago

It is strange that author publishes (source: http://www.joeharrison.co.uk/projects/responsiveicons ) the information from Smashing Magazine containing the methods of responsive SVG and still uses the poorest method.

I think you've got it backwards. Joe Harrison first published responsiveicons.co.uk and the Smashing Magazine article is a later improvement on it. He didn't use the newer method because it wasn't around when he created the page.

minijus2• 12 years ago

Oh well, that might be the case. My bad.

josefresco• 12 years ago

A logo represents the brand of an entity (more than just abstract iconography), and therefore should not be rearranged and boiled down to elements which are unrecognizable to the brand.

In my view, "The Hobo's Method" is superior in that in keeps in-tact the core identity for each brand. Also, it helps to see real world examples.

untitaker_• 12 years ago

If one makes the window narrow enough, the logos expand back to their maximal size.

diminish2• 12 years ago

Was about to say the same thing. I guess for around less than 100px.

shadowxiaoh2• 12 years ago

Seems that the min window width is 256 px~

vlunkr• 12 years ago

Their media queries probably don't account for that size, since it's rare that you would browse that way. Chrome won't even let me make it that small.

gregoire• 12 years ago

Simple's logo has been designed with "responsiveness" in mind: the more space they have, the more complex their logo is.

For example on https://www.simple.com/, the logo in the header is simpler that the logo on the credit card.

They also show the 3 versions they use in a blogpost: https://www.simple.com/blog/simple-branding

hxw4• 12 years ago

They seem to be using "The Hobo’s Method" as well.

by_Seeing• 12 years ago

Do we know who did their branding?

simantel• 12 years ago

According to Brand New [1], the branding was done in-house by Ian Collins [2].

[1] http://www.underconsideration.com/brandnew/archives/simple_b...

[2] http://iancollins.me/

taksintik• 12 years ago

Not responsive on ipad

nekopa• 12 years ago

Worked well enough for me on an original iPad. Just switch between portrait and landscape.

JayJee• 12 years ago

NIKE loses the "I" when made smaller

nXqd• 12 years ago

lol, nice catch :D

hxw4• 12 years ago

I think that's intentionally, as you still recognize the logo as NIKE :)

SuperKlaus• 12 years ago

Yeah, Disney to D looks good but the Nike to Nke transformation is terrible.

cmiller1• 12 years ago

Not to mention the transformation of Bang & Olufsen

goatforce5• 12 years ago

As does Bng&Olfsn

shadowxiaoh2• 12 years ago

It seems that the min window width is 256 px~~~ no relation with height \(^o^)/~

caublestone• 12 years ago

I find it ironic that the logo for Responsive Logos and the social media icons are not responsive.

DonHopkins• 12 years ago

I'd trade responsive logos for responsive customer service.

Responsive Logos

Related Stories