Responsive Logos(responsivelogos.co.uk)
responsivelogos.co.uk
Responsive Logos
http://responsivelogos.co.uk/
57 comments
They seem to be using "The Hobo’s Method" as well.
Do we know who did their branding?
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/
[1] http://www.underconsideration.com/brandnew/archives/simple_b...
[2] http://iancollins.me/
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.
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."
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.
> Wasted? We're only here because of where we came from...we would just have a whole different set of hindsight-is-20/20 lessons.
While that's true, I think the OP's point was we knew that emulating the old rigid model was the right thing to do and that the hindsight-is-20/20 lessons we would have had are ones that we instead will need another decade or so to obtain. We lost a lot of time.
The reason for this is understandable and depressing. Frankly most designers were far less flexible than the programmers, and preferred to rest on their own experiences rather than take advantage of the medium.
Frankly the thing that crystalized this for me was the "Cluetrain manifesto". What it said was blindingly obvious to so many of us. What shocked (and enlightened) me is that someone realized that it had to be written down. In other words most people, or at least most people in marketing and business, actually didn't understand the web and preferred to try to treat it as some sort of TV remote control with a buy button.
Of course path dependency is probably the defining factor in technical and social progress. But it doesn't mean there wasn't a missed opportunity. In fact "responsive design" is simply a minor surface metonymic element of a major missed opportunity.
While that's true, I think the OP's point was we knew that emulating the old rigid model was the right thing to do and that the hindsight-is-20/20 lessons we would have had are ones that we instead will need another decade or so to obtain. We lost a lot of time.
The reason for this is understandable and depressing. Frankly most designers were far less flexible than the programmers, and preferred to rest on their own experiences rather than take advantage of the medium.
Frankly the thing that crystalized this for me was the "Cluetrain manifesto". What it said was blindingly obvious to so many of us. What shocked (and enlightened) me is that someone realized that it had to be written down. In other words most people, or at least most people in marketing and business, actually didn't understand the web and preferred to try to treat it as some sort of TV remote control with a buy button.
Of course path dependency is probably the defining factor in technical and social progress. But it doesn't mean there wasn't a missed opportunity. In fact "responsive design" is simply a minor surface metonymic element of a major missed opportunity.
Our society is where we are now because of the dark ages, but that doesn't mean that we wouldn't be better off if they hadn't happened.
Isn't the "dark ages" a misnomer anyway? For example didn't a large chunk of modern medicine evolve during that period in the middle east
The term specifically refers to a "dark" period in Europe. E.g. Islamic science famously flourished at these same centuries.
But it's increasingly seen as a misnomer wrt. Europe:
https://en.wikipedia.org/wiki/Dark_Ages_(historiography)
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.
well, other than a table cell can't drop down below the previous elements of its row if the viewport width shrinks past certain points.
What I mean is that tables are not "responsive" and laying things out with tables, while "easy" was not enough for anything more than people browsing the web on CRTs, and certainly not for thousands of different displays with varying dimensions and resolutions.
Things are good these days. You can still use tables if that's as far as you want to go, or you can do things professionally.
What I mean is that tables are not "responsive" and laying things out with tables, while "easy" was not enough for anything more than people browsing the web on CRTs, and certainly not for thousands of different displays with varying dimensions and resolutions.
Things are good these days. You can still use tables if that's as far as you want to go, or you can do things professionally.
This is very funny if you think of it. "Responsive" uses columns (like the 960.gs grid). Column-based designs have been around in old school print for centuries.
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.
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.
Coincidentally, 'ish' is the name of a useful viewport tester for responsive design. http://bradfrostweb.com/demo/ish/
In this particular case, could anyone explain how high pixel density and responsiveness would work together at the same time?
[deleted]
[deleted]
> 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.
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.
I prefer "responsive" over "things that change when you resize them" because it's way shorter.
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).
[deleted]
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.
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.
If one makes the window narrow enough, the logos expand back to their maximal size.
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.
Was about to say the same thing. I guess for around less than 100px.
Seems that the min window width is 256 px~
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.
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.
> 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.
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.
Oh well, that might be the case. My bad.
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.
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.
I find it ironic that the logo for Responsive Logos and the social media icons are not responsive.
Never seen "Coke" in that classic font before. Is it new or perhaps particular to the US?
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...
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...
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...
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.
Slightly surprised that the "Coke" text from the largest logo wasn't used as the smallest.
Isn't it on all the cans? http://lmgtfy.com/?q=coke+cola+can
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.
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.)
(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.)
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.
NIKE loses the "I" when made smaller
I think that's intentionally, as you still recognize the logo as NIKE :)
Yeah, Disney to D looks good but the Nike to Nke transformation is terrible.
Not to mention the transformation of Bang & Olufsen
As does Bng&Olfsn
lol, nice catch :D
I'd trade responsive logos for responsive customer service.
It seems that the min window width is 256 px~~~ no relation with height \(^o^)/~
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