6 ms·

Responsive Logos

236 points by hxw 12y ago

cateye 12y 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.)
- hxw 12y 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 12y ago
Never seen "Coke" in that classic font before. Is it new or perhaps particular to the US?
- hxw 12y ago
  I've never seen it before, so I do not think that has been ever used officially.
  - deleted 12y ago
    [deleted]
    - MatthewWilkes 12y ago
      It's not on the page you link to and I don't recall ever seeing it in the UK.
      - denzquix 12y ago
        My mistake, I misread.
- gleenn 12y ago
  Isn't it on all the cans? http://lmgtfy.com/?q=coke+cola+can http://lmgtfy.com/?q=coke+cola+can
  - benjoffe 12y ago
    None of the results on that page or image results show Coke in the classic font.
    - billpg 12y ago
      You don't mean... Someone posted a lmgtfy link which was entirely unhelpful! I'm shocked! Shocked!
  - Trezoid 12y 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 12y ago
  The classic logo is often on the can/bottle near the nutritional information: http://imgur.com/OHinuge 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.html http://www.coca-cola.co.uk/125/history-of-coca-cola-logo.htm...
  - DougBTX 12y 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/diet_coke_2_23.jpg http://www.amodelrecommends.com/wp-content/uploads/2011/02/d...
- lstamour 12y ago
  I'm thinking it's something equivalent to http://www.dafont.com/loki-cola.font?text=1oke&psize=l 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 12y 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.
- deleted 12y ago
  [deleted]
- dspillett 12y 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.
  - diminish 12y ago
    In this particular case, could anyone explain how high pixel density and responsiveness would work together at the same time?
    - deleted 12y ago
      [deleted]
  - datashaman 12y ago
    Coincidentally, 'ish' is the name of a useful viewport tester for responsive design. http://bradfrostweb.com/demo/ish/ http://bradfrostweb.com/demo/ish/
- masklinn 12y 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.
minijus 12y ago
That is "The Hobo’s Method" according to Ilya Pukhalski (source: http://www.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/ 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 http://responsivelogos.co.uk/images/logo5.svg and "The Man With A Gun’s Method" - http://pukhalski.com/responsive-icons/responsive2.svg http://pukhalski.com/responsive-icons/responsive2.svg Edit: It is strange that author publishes (source: http://www.joeharrison.co.uk/projects/responsiveicons 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 12y ago
  > It is strange that author publishes (source: http://www.joeharrison.co.uk/projects/responsiveicons 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.
  - minijus 12y ago
    Oh well, that might be the case. My bad.
- josefresco 12y 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_ 12y ago
If one makes the window narrow enough, the logos expand back to their maximal size.
- diminish 12y ago
  Was about to say the same thing. I guess for around less than 100px.
- shadowxiaoh 12y ago
  Seems that the min window width is 256 px~
- vlunkr 12y 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 12y 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/ 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 https://www.simple.com/blog/simple-branding
- hxw 12y ago
  They seem to be using "The Hobo’s Method" as well.
- by_Seeing 12y ago
  Do we know who did their branding?
  - simantel 12y ago
    According to Brand New [1], the branding was done in-house by Ian Collins [2]. [1] http://www.underconsideration.com/brandnew/archives/simple_banking_an_oxymoron_realized.php http://www.underconsideration.com/brandnew/archives/simple_b... [2] http://iancollins.me/ http://iancollins.me/
taksintik 12y ago
Not responsive on ipad
- nekopa 12y ago
  Worked well enough for me on an original iPad. Just switch between portrait and landscape.
JayJee 12y ago
NIKE loses the "I" when made smaller
- nXqd 12y ago
  lol, nice catch :D
- hxw 12y ago
  I think that's intentionally, as you still recognize the logo as NIKE :)
  - SuperKlaus 12y ago
    Yeah, Disney to D looks good but the Nike to Nke transformation is terrible.
- cmiller1 12y ago
  Not to mention the transformation of Bang & Olufsen
- goatforce5 12y ago
  As does Bng&Olfsn
shadowxiaoh 12y ago
It seems that the min window width is 256 px~~~ no relation with height \(^o^)/~
caublestone 12y ago
I find it ironic that the logo for Responsive Logos and the social media icons are not responsive.
DonHopkins 12y ago
I'd trade responsive logos for responsive customer service.

236 points by hxw 12y 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.)

hxw 12y 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 12y ago

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

hxw 12y ago
I've never seen it before, so I do not think that has been ever used officially.
- deleted 12y ago
  [deleted]
  - MatthewWilkes 12y ago
    It's not on the page you link to and I don't recall ever seeing it in the UK.
    - denzquix 12y ago
      My mistake, I misread.
gleenn 12y ago
Isn't it on all the cans? http://lmgtfy.com/?q=coke+cola+can http://lmgtfy.com/?q=coke+cola+can
- benjoffe 12y ago
  None of the results on that page or image results show Coke in the classic font.
  - billpg 12y ago
    You don't mean... Someone posted a lmgtfy link which was entirely unhelpful! I'm shocked! Shocked!
- Trezoid 12y 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 12y ago
The classic logo is often on the can/bottle near the nutritional information: http://imgur.com/OHinuge 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.html http://www.coca-cola.co.uk/125/history-of-coca-cola-logo.htm...
- DougBTX 12y 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/diet_coke_2_23.jpg http://www.amodelrecommends.com/wp-content/uploads/2011/02/d...
lstamour 12y ago
I'm thinking it's something equivalent to http://www.dafont.com/loki-cola.font?text=1oke&psize=l 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 12y 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.

deleted 12y ago
[deleted]
dspillett 12y 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.
- diminish 12y ago
  In this particular case, could anyone explain how high pixel density and responsiveness would work together at the same time?
  - deleted 12y ago
    [deleted]
- datashaman 12y ago
  Coincidentally, 'ish' is the name of a useful viewport tester for responsive design. http://bradfrostweb.com/demo/ish/ http://bradfrostweb.com/demo/ish/
masklinn 12y 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.

minijus 12y ago

That is "The Hobo’s Method" according to Ilya Pukhalski (source: http://www.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/ 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 http://responsivelogos.co.uk/images/logo5.svg and "The Man With A Gun’s Method" - http://pukhalski.com/responsive-icons/responsive2.svg http://pukhalski.com/responsive-icons/responsive2.svg Edit: It is strange that author publishes (source: http://www.joeharrison.co.uk/projects/responsiveicons 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 12y ago
> It is strange that author publishes (source: http://www.joeharrison.co.uk/projects/responsiveicons 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.
- minijus 12y ago
  Oh well, that might be the case. My bad.
josefresco 12y 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_ 12y ago

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

diminish 12y ago
Was about to say the same thing. I guess for around less than 100px.
shadowxiaoh 12y ago
Seems that the min window width is 256 px~
vlunkr 12y 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 12y 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/ 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 https://www.simple.com/blog/simple-branding

hxw 12y ago
They seem to be using "The Hobo’s Method" as well.
by_Seeing 12y ago
Do we know who did their branding?
- simantel 12y ago
  According to Brand New [1], the branding was done in-house by Ian Collins [2]. [1] http://www.underconsideration.com/brandnew/archives/simple_banking_an_oxymoron_realized.php http://www.underconsideration.com/brandnew/archives/simple_b... [2] http://iancollins.me/ http://iancollins.me/

taksintik 12y ago

Not responsive on ipad

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

JayJee 12y ago

NIKE loses the "I" when made smaller

nXqd 12y ago
lol, nice catch :D
hxw 12y ago
I think that's intentionally, as you still recognize the logo as NIKE :)
- SuperKlaus 12y ago
  Yeah, Disney to D looks good but the Nike to Nke transformation is terrible.
cmiller1 12y ago
Not to mention the transformation of Bang & Olufsen
goatforce5 12y ago
As does Bng&Olfsn

shadowxiaoh 12y ago

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

caublestone 12y ago

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

DonHopkins 12y ago

I'd trade responsive logos for responsive customer service.