• 201131 Jan

    CSS3 Icon

    The new CSS3 icon, part of the HTML5 brand (image courtesy of W3C).

    On the 18th January the W3C unveiled a logo and brand identity for HTML5 and associated technologies.

    The HTML5 logo and accompanying icons (shown below), including one for CSS3 (larger version above), are, according to the W3C at the time of launch, intended to be “an all-purpose banner for HTML5, CSS, SVG, WOFF, and other technologies that constitute an open web platform. The logo does not have a specific meaning; it is not meant to imply conformance or validity, for example. The logo represents ‘the Web platform’ in a very general sense.”

    HTML5 Logo

    The new HTML5 logo complete with icons representing (left to right); connectivity / real time, css3 / styling, device access, graphics, 3d and effects, multimedia, performance and integration, semantics, and offline and storage (image courtesy of W3C).

    The Debate

    From a design perspective, the new HTML5 logo has received generally positive feedback, with the exception of a few commenters (on various blogs) likening the new logo to that of the Transformers.

    However, as can be expected, the new logo and accompanying description also caused a fair amount of controversy and confusion, with many people unhappy to see the W3C condoning the use of ‘HTML5’ as a buzzword, referring not just to the HTML5 specification but also to various other specifications and technologies, such as CSS3 and WOFF, a practice that has been spreading around the web in recent months.

    Perhaps one of the most widely referenced critics is Jeremy Keith who was quick to respond in a blog post stating:

    What we have here is a deliberate attempt to further blur the lines between separate technologies that have already become intertwingled in media reports.

    Don’t get me wrong; I don’t mind if marketers and journalists use HTML5 to mean everything under the sun, but I expect working web developers to be able to keep specs separate in their mind. If Apple or Google were pushing this kind of fuzziness, I wouldn’t mind …but this is coming straight from the horse’s mouth…

    An opinion shared by Louis Lazaris, who had the following to say in an article on design blog Smashing Magazine:

    The logo will certainly strengthen the awareness of HTML5 (which is something we all want), but it’s difficult to accept that something like WOFF, which is a web font format and has nothing to do with the HTML5 spec, will fall under the “HTML5″ umbrella. Similarly, CSS3 does not belong in that scope. But interestingly, you’ll notice in that quote from the W3C blog post that the “all-purpose banner” includes “CSS” — so it’s not just the new stuff in CSS3, it’s all of CSS. I can’t see many people being too happy about this.

    Ironically, according to a statement by Michael Nieling on the W3C blog, the Creative Director at Ocupop, the design firm behind the new logo, this is exactly the type of confusion that the new logo hoped to cure.

    As with most productive design conversations, this one started with a desire for clearer communication. As you’re aware, the term HTML5 has taken on a life of its own; there has been significant confusion and debate both within the developer community and in the public at large as to what exactly HTML5 is when the term is used outside of simply referring to the spec itself. This variability in perception is what inspired the project – a group of developers and HTML5 evangelists came to us and posed the question, ‘How can we better communicate all of the technologies and potential that HTML5 represents?’ …and the resounding answer was, the standard needs a standard. That is, HTML5 needs a consistent, standardized visual vocabulary to serve as a framework for conversations, presentations, and explanations moving forward.

    As a result of this feedback, the W3C updated the documentation supporting the logo, which now defines the logos purpose as follows:

    This logo represents HTML5, the cornerstone for modern Web applications.

    The smaller technology class icons represent aspects of modern Web applications and Web sites — style, semantics, graphics, and so forth.

    No, not all of them.

    No. However, many HTML5 Web sites and applications do take advantage of CSS3 for styling and presentation.

    Whilst the updated documentation attempts to address some of the concerns raised, does it go far enough?

    One suggestion which has attracted support from various corners of the web development community, is to brand them under the term ‘Open Web Platform’ rather than HTML5. One supporter of this terminilogy is Robert Nyman:

    The way I see it, when people from all kinds of fields; web developers, management, media; have spoken about HTML5, what they are actually referring to is various open technologies that aren’t owned by any company, but instead are open specifications. They mean all that HTML, CSS, JavaScript, SVG and more can offer directly in a web browser, without any plug-in.

    So we should start calling it what it really is: The Open Web Platform.

    This, according to Robert’s article and the following statement by Ian Jacobs on the W3C blog, was in fact the W3C’s original intention:

    W3C has also used the phrase “open web platform” to refer to the larger set of technologies. We had begun a logo design effort internally for the set of technologies, but put it on hold towards the end of 2010.

    One has to wonder why this direction was abandoned in favour of the new HTML5 logo and brand?

    HTML is the New HTML5

    In a move which only seems to have added further confusion to the debate, Ian Hickson (Google) writing on the WHATWG blog, a day after the HTML5 logo unveiling by the W3C, announced that HTML5 would now drop version numbers and become a ‘living specification’ refered to simply as ‘HTML’ rather than ‘HTML5’. A move which has also met with a great deal of comment, both positive and negative, and added further confusion to the purpose of the new HTML5 logo and brand.

    What do You Think?

    It is worth noting that, according to the documentation, the logo is not yet officially endorsed by the W3C, but rather offered for discussion and development at this stage, with comments invited via email to [email protected].

    So what do you think about the new HTML5 logo?

    Should CSS3 be part of the HTML5 brand, or should it have its own independent logo and brand?

    Should the HTML5 brand be renamed the Open Web Platform to avoid further confusion between specifications and technologies?

    Or does HTML5 or the Open Web Platform even need a brand and visual identify?

    As always, the floor is yours…

    You can skip to the end and leave a response.

  • Comments

    • 01.

       Не логотип, а говно

    • 02.

       а мне нравится… строгий.

      looks awesome… although it won’t change the fact that W3C sucks.

    • 03.

      So as a layperson, let’s try and figure out what this fandangled thing means. Number 5, orange. Umm, okay? Then… spaceship? A bullet. Television. Packaging. No idea. Flower, or maybe a cog. Army Sergeant. And… tower defence?

      I say we all just go back to putting “Designed for Microsoft Internet Explorer” on our sites. Or “Netscape Now!” if that’s your thing.

    • 04.

      I like it. I’d prefer it if the CSS icon was for CSS as a whole, not just CSS3. I expect that the next major revisions of the popular browsers (probably starting with Firefox 4) will use the logos in some fashion.

    • 05.

      The transparent vertical badge doesn’t work for me. The site I admin, the owner has chosen a dark color scheme that completely hides it.

    • 06.

      WOW, its loge similar like…
      hihihi…good good

    • 07.

      Isn’t it pretty counter-productive to use “CSS3”? CSS isn’t really about large version numbers but independent modules that are versioned separately. I am really surprised by how the w3 is abusing their own properties

    • 08.

      Well it sure beats Web 3.0 so I guess this is the new buzzword for a few years. What was the buzzword before Web 2.0? DHTML?

    • 09.

      So where are the logos for CSS2.1 and CSS4? It seems kind of odd to promote a version number when the CSS Working Group is opposed to versioning of the language and will probably just lead to more misconceptions that CSS3 is another monolithic standalone spec like CSS2.1.

      It also seems a bit odd to promote a ubiquitous language that is fundamentally tied to HTML rather than something like, SVG or MathML, that isn’t widespread yet.

      It would make more sense to have an independent logo for each module and let people promote modules that aren’t commonly used (like CSS3 Multicolumn or CSS3 Transitions).

      Lastly, I think that this logo is just too abstract. If you’re going to promote “3”, at least make it look like “3” rather than a shield or advertisement for a Chevron gas station. (The above example particularly looks like the latter since it’s got a sky behind it like those tall signs meant to be visible from the highway.)

    • 10.

      Hmmm, so let me get this straight. HTML is no longer being called by version numbers, so HTML5 is just plain HTML now till infinity, because version numbers are all way too Web 2.0. But we’re creating a logo for HTML with a big 5 in it. And CSS is no longer one thing, but a whole lot of modules, all collectively called CSS3, no matter what version the modules are, and creating a logo with a big 3 in it. And CSS3 is part of HTML5, but actually completely separate. All makes perfect sense — NOT. If this were a corporate branding exercise, I’d say fire the marketing guys, hell fire the management team too, they’re clearly making this stuff up as they go, with no clear long term plan or strategy.

    • 11.

      @David hit the nail on the head. 100% agree with your observations, so no need to repeat them. It’s just a big mess.

    • 12.

       So the new logo trend is to be painfully obvious and non imaginative?

    • 13.

       Do CSS3 and HTML5 really need logos at all? I doubt it.

    • 14.

      It is going all really cool!
      I guess i should put on a css3 stickers on my laptop now.
      Which i generally don’t like to add.

    • 15.

      Woo-hooo, it’s all like a big sandbox for child play! Fiddling around with brands, logos, meanings – so much fun!
      I just can’t understand – is there some creepy guy running around ‘double u three c’ corridors and creating ‘ideas’?
      It’s really fun and with a great sense of humour. It can’t be serious.

    • 16.

      CSS3 & HTML5 don’t need logo, but need more “how to” & “tips n trick” :)

    • 17.

      If the W3C is talking about an “open web platform” why not design a logo just for this term? It would cover all without having to think about version numbers …

    • 18.

       I like the logo just fine. It does resemble the transformers a little, but I think that it looks good.

    • 19.
    • 20.

       I like the idea that CSS3 has a brand identity but at the same time I don’t like the idea of encompassing it under the banner of HTML5. These should be kept separate they are different and should remain so.

    • 21.

      HTML and CSS go hand in hand so why not encompass them under the same banner, honestly I would like for the W3C to further their exploration into standardizing all web languages. Yes I understand that many of the other languages we code on a day to day basis is either technically proprietary, server based, and/or governed by another body, however this was the principles that founded the W3C so why not build upon these principles and get representatives from more avenues to agree and standardize the way they work together.

    • 22.

      As Robert Nyman said it would better to rename the brand to “The Open Web Platform” which represent every technology and its upgrades graphically speaking. So you would have something like “JavaScript – CSS3 (update) – HTML5 (update)” and so on. I think that every technology should have a logo that represent it so we don’t confuse them.

    • 23.

       it could be better if is not oblique, but i like it anyway :)

    • 24.

       HTML and CSS work hand in hand, so imho it’s quite logical to have complementary logos. I doubt however that people will be able to discern the current designs. It’s hard enough to recognise the number 5 in that logo – could be an S or a 6 just as well. Logo design doesn’t have to be obvious but it should have (re)cognition value. And I’m twisting my brain everytime I try to recall which symbol represented what number and which standard.

    • 25.

      Or does HTML5 or the Open Web Platform even need a brand and visual identify?

      Ultimately, no. The only people who “need” any kind of brand for something that the ENTIRE field of designers/developers are well versed in, and work with every day, are the people who think they’re God’s gift to the world and want to make said branding. It’s not like we aren’t all quite aware of what this stuff is. But then again, maybe I’m wrong. I still think those people over at the Microsoft IE offices are quite confused on the subject.

    • 26.

      I do agree they should not be all under the sun, but keeping the technologies together would help identify the future of web technologies and allowing some kind of standard for each part.. semantic meta layout, style, scripting, typography, etc.

    • 27.

      micr5soft claims that they implemented css3 border radius on ie9rc but  border radius is not working in fieldset with legend. IE9 rendered a square border. Other browsers render an rouded border on fieldset ok.

      If microsoft claims that they implement css3 border radius it need to work with all elements, including an fieldset with an legend.

    • 28.

       I agree with William.

      And i must say that this logo is wonderful! I like it.

    • 29.

      Pregunta: Cuándo se supone que CSS3, será aceptado como válido por IE y MS?, realmente nos estamos perdiendo una herramienta fantástica.


    • 30.

      I think its great. CSS3 should have its own logo so users know what technology that a site have

    • 31.

       Very interesting logo…

    • 32.

       ლამაზი ლოგოა (sun)

    • 33.

      So… where exactly are these CSS3 logo downloads? I can find the HTML5 ones but no css3. 

    • 34.
    • 35.

      Nice logos, although it’s too bad that someone actually spent the time on these HTML5, CSS3, and Open Web Platform logos when they could have, ya know, been spending time on something other than marketing. They didn’t need to market specifications before. It’s kinda like trying to market preliminary ideas that end up having no practical use in the end, other than to lead to more-refined ideas.

      And yeah, an HTML logo with a big 5 in it despite the fact that they wanna go with no version number – that’s hilarious! Really is a show of contradicting opinions that aim to confuse, which is something they apparently wanted to avoid in the first place (recall the differences between the intended use of tables and lists and how people ended up using them: scary).

    • 36.

      One is a modified Transformer logo and another a product of infertile brain. W3C got some real…

      agree with the comments 09 & 16

    • 37.

       Makes as much sense as “W3C Compliant” or “HTML Tidy” badges on your website; that is, not at all! The general visitor doesn’t have a clue what it is, and doesn’t care, as long as the website WORKS. Don’t waste your time on the logotypes and work on the damned specifications instead!

    • 38.

      The amount of people on this thread that don’t understand cutting edge design, is actually alarming and very very scary. I would be ashamed as a designer to post stuff on this thread that is in anyway negatively related to the logo and its design. The Logo is awesome, it represents everything HTML5 and its sister projects represent and most importantly, it is simple and looks great. @Adrian, a badge is exactly what the spec needs, as now people can identify with this new technology.

      Great job designers, poor audience unfortunately. It does however show that people will complain about everything, even when something is great. @ The guys working on the new spec, great job and keep up the good work.

    • 39.

       @Dylan i agree.. Why the negativity? A general user may not be interested but a fellow designer or enthusiast visits and knows instantly whats going on behind the scenes and may be interested to have a peek. If you dont like it then dont use it..

    • 40.

       this logo very best and like html5 logo

    • 41.
    • 42.
    • 43.

      Nice Logo. New Concept. I Like it…:)

    • 44.

       That’s really insteresting. Thank you for sharing this!!!!

    • 45.
    • 46.
    • 47.
    • 48.
    • 49.

       thanks a lot
      that was useful.

    • 50.

      Looks awesome, Thank you :) 


Advertise here?