Google made a very minor but significant change to their search homepage earlier this week. While everybody else was distracted by the barcode logo, a few Chrome and Safari users may have noticed that the search buttons now have a certain zing to them, a new and pretty look, with slightly rounded corners, a border around them and a cool looking gradient.
Now, before you think or say, “baa baa techcrunch why is this a story Google change their button baa baa iphone twitter” (or something like that), what is important here is not what they did, it is how they did it.
To achieve sexy buttons, Google has implemented CSS features that are currently not part of any standard and are only supported by Webkit based browsers (ie. Chrome and Safari). To experience sexy buttons on Google, you will need the Google browser (or that other one). The two specific features that are being used to enable sexy buttons are -webkit-border-radius and -webkit-gradient. Both were implemented by Webkit developers as new CSS features over a year ago – and it is hard to argue against their usefulness (where would we be today without rounded corners?).
Browser developers are resorting to going their own way with implementing new features because the standardization process is nothing short of a clusterfuck. In 1996, back in the wild west days of the web, the CSS1 recommendation was published – but the two major browser maker at the time were at each others throats and didn’t pay much attention to it. It only took another two years to get the next version, CSS2, to recommendation status. It was this version, and more importantly, support from the browser makers, that spurred the widespread adoption of CSS and the separation of markup from style on the websites. The first drafts for CSS3 was published in 2001 – and today, a full 8 years later, it is still a work in progress as nobody seems to be able to agree to anything again.
This has spurred the various browser developers to press ahead with their own plans, some of which, such as gradients and rounded corners, can be found in browsers today. These browser-specific bleeding-edge features have always been there, for example, XMLHttpRequest, the core component to Ajax, started a a proprietary extension to IE 5.0. Some of these features live on, some die, and some become part of the standard (or more correctly, a standard).
By implementing currently non-standard features on their homepage, Google are sending out a strong message on what they believe the new standard features should be, and not coincidently, it is the features that their own browser implements and supports. This is not the first time Google has sent a wrecking-ball into the standards process. Google Gears was launched long before Chrome as a way to implement proposed HTML5 standards, such as offline caching, into browsers (see my NextGenWeb series from last year). It was born out of frustration for the slow and beurocratic standardization process – something that Google couldn’t afford to wait for as their web applications could not advance further without a non-aligned platform to build them on.
A large part of the anti-trust case against Microsoft was that with combined desktop, browser and server market dominance the company could abuse that position to make the web a Microsoft web by implementing Microsoft-only features. Google are using their dominance to force an issue that has been stalled for far too long – but the difference is that they are using their force for potentially a greater good (I hope). The theoretical Microsoft web would have been “this website only supports Internet Explorer”, whereas with Google so far we have “this website is a lot better, and has sexy buttons, if you use Chrome (which btw is open source)”.
Update: I originally referred to -webkit-rounded-corners which should be -webkit-border-radius. I blame Web 2.0.
When they will install Buttons of “Sexy Girls” for every search??? lol
here’s an identical article from MG from 1 month ago
http://www.tech...ger-search-box/
‘Today, while using the Safari browser, we noticed that the search box has been made bigger, and the buttons made square”
Yeah, except not.
look at the pics, the “new buttons” look exactly the same as those new buttons in mg’s article
Testing reply feature
Not really. If you open Google.com in a Webkit browser and in Firefox, you’ll notice a small diference. The Buttons in FF are the same as in IE and other non Webkit browsers (square), but on webkit browsers, they have round (barely noticeable) buttons. You’ll notice a difference in shadowing too.
Not an important thing imho
Firefox supports rounded corners (-moz-border-radius) and shadows too (-moz-box-shadow). I’m not sure if it supports gradients but on 3.5, I’m seeing rounded buttons with shadows and a gradient. Could be images but it’s there.
Seriously, this article is non sense!!!
This implementation is fully according the css specification, namely if one is implementing draft functionality (from the css3 specification) then one should use the engine specific prefix (-webkit- in this case) and one should then make it neatly backwards compatible naturally (as google is doing it). So google/webkit isn’t breaking any standard and its neither creating a new one… so please don’t compare official standard functionalty from the css3 drafts with something as messed up (sorry, but without jquery it would kill me) as XMLHttpRequest.
People actually use the Google homepage?
Sorry Mulder, but if Ajax is too complicated without the help of jQuery, then you might want to consider sales. And you might want to call scully for help.
Now, before you think or say, “baa baa techcrunch why is this a story Google change their button baa baa iphone twitter” (or something like that), what is important here is not what they did, it is how they did it.
I am a big fan of that sentence.
I am a big fan of this as well. I had to lol after I clicked the link.
Not cool Nik.
(gets offended, rolls eyes and walks away)
Yup.
I think it might be pushing the definition of ’sexy’ a little too far.
ha ha ha “baa baa iphone twitter” that pretty much sums up Techcrunch in four words.
On a side note, i’m all for nicer looking buttons and all, but I can’t help but imagine that if Microsoft was the one doing this, the response would have been much less rosy.
Jason +1
If this was done by Microsoft, TechCrunch article would title as microsoft using their muscle to lock us into their standard. But since Google which is ‘Not Evil’ company did it, using open source (***coughs**** controlled by Google, means you can develop for free as long as you develop what we want you to develop) chrome, techcrunch article comes out as sexy button to push standards. Bureacracy is part of being standard compliant. Nice job tech crunch.
Microsoft would never have done this that way.
But I guess you don’t really understand the difference between something like Silverlight and opened standards anyway.
Sure, sure, Google is so good, and Microsoft so evil. Well, last I checked, MS only controlled what apps I was using. Google knows what I (and you) are seeing, doing, hearing, and keeps track of it all. Which is worse?
Microsoft is worse, because they control what apps you are using (with horrendous lock-in) AND some of that other stuff as well with hotmail, bing, xbox, windows mobile.
Oh, you thought it was only Google doing those things? LOL!
OK. Let’s use your logic. Microsoft locking you in using their applications is like you are locked into a car (leased, financed, or outright) until you decide to sell it. Google is like a credit card company. You didn’t use them to buy the car. but they know you bought the car, where you get gas, where you travel, etc., basically every detail of your life they track. What is more intrusive?
Love your metaphor Jimmy
Additionally, they’ll *keep* using it even after you leave. Even if I cancel my account, they’ve got my history, behaviour data, etc. They’ve used my information in aggregate to make other decisions, and likely they’ll continue to sell my information. Am I talking about a credit card company, or Google? You decide.
JimmyJoBob > yeah. the car metaphor. always good for explanations that go straight into the wall.
Microsoft didn’t lock you in to anything, there is nothing on the widows platform that you are using, that you did not buy yourself. You locked yourself in idiot. You just need to learn to live with your decisions. We don’t want to hear about it, moron.
class=awesome
Oh! Just gotta notice the change as you’ve mentioned.
Cool. Hoping that Firefox would implement that -webkit-gradient effect thing.
FF can’t implement any “-webkit-” CSS properties, they are Webkit-specific. But it has similar “-moz-” extensions, they are too used at Google main page.
I switched to bing. Flame on.
Why the hell can’t they add them for Mozilla based browsers (read: Firefox) as well.
-moz-border-radius
Is that so hard?
because they want to dominate the Internet, just like IBM wanted to dominate the IT sector and later MS wanted to dominate the OS market.
We need lots of smaller competitors, not 1 big monster that crushes everything on its path.
I have been using Firefox 3.5( on a Mac)since it came out and I noticed this a long time ago. It works on firefox too
Ditto. I’m seeing exactly what’s shown in the screenshot.
Same here.
the only difference is the barrier to entry in competing in web .. is a lot smaller than trying to compete with an IT solutions, or OS dominating company. Look at the leader of social networking, just ask, friendster.. i mean myspace.. i mean face.. next.
Viewing the “classic” homepage in safari/OSX, the top border magically “faded-in” –
I never noticed that before yesterday.
http://www.goog...om/webhp?rls=ig
See if it is doing the same for anyones else.
Just curious.
It won’t do it viewing in Chrome/Win7.
Yes!! But I’m only experiencing it in Firefox. I thought it was firebug causing problems, cause my browser will sometimes randomly tweak out, but I restarted it nothing changed.
For a change – this was really a ‘tech’ article !
Good find
I wasn’t sure where you were going with this article at first, but I agree entirely with your conclusions. (and hopes for the ultimate altruism of google)
Thats Right…Only Few Might Have Noticed That…..Now If You Want To Operate On SEXY Buttons, Make Sure That You Have Google Chrome Installed On You Machine…..
Eventually It Concludes One Thing…Say No To Microsoft IE…..
Great War B/w Google and Microsoft Continues…..:P
“where would we be today without rounded corners?”
LOOOOOL
If this was a “Google-making-a-statment-about-web-standards” issue, they would have also included the equivalent mozilla code (-moz-border-radius).
You analysis could be true, but it could also be a stretch.
Sexy buttons show up on Firefox on the Mac.
ummm, they still look sexy in ie8
Cosmetically enhanced Google knows how to push my buttons with her sexy features.
For the record, the break between the article and the comments is extremely annoying. (the Ad banner) Never noticed it on any other articles and thought I would give my input.
I appreciate Google, Mozilla and Safari trying to implement latest standards. But as a web developer I still cannot use them in main stream websites. The first step is to get ALL browsers to implement them and the next is to get ALL (or atleast a majority) of the users to upgrade to the latest.
Here in India, IE 6 usage is still around 30% (thats what it is for my websites). I can’t imagine using CSS3. And I have no time trying to build different websites for different browsers.
The only option now is to program using plug-ins – Flash or Silverlight. Microsoft’s Gestalt, which uses Silverlight, too is a good option.
I have sexy buttons in IE8
I also have this odd thing where when I first load google.com arriving from google.ca where the only thing on the page is the google logo and search box, no buttons nothing. then when you move your mouse the rest fades in.
http://www.pict...ert/google1.jpg
Just noticed, whats really interesting is that when you do move the mouse, there are no buttons at all, sexy or otherwise!
http://www.pict...ert/google2.jpg
You’re in one of the new UI experiments.
no buttons here either (chrome 3.0.195.25)
I have sexy girls next to me. No need in sexy buttons.
+1
Same here: My girl gets sexy when I push _her_ buttons.
Now all they have to do is learn how to use the font-family css param.
sorry, but this story could have told of “the seven widowed maidens from atlantis whose collective tears formed 7,000 year old etchings discovered last month by the google submarine, which then served as the template for the new google search buttons” and alas i still wouldn’t have cared. not a story.
(why bother posting if i don’t care? so that you don’t take yourself too seriously on future posts).
baa
I guess I’ll hold off posting on the seven widowed maidens story then.
All I hear is “warghbahhhhhhrgle.”
I see “sexy” buttons on firefox-3.5 on the mac on their experimental page (after i’ve signed in).
Like those that mentioned earlier, there are Mozilla-equivalent extensions. I don’t know if they weren’t used because they’re buggy or because Google is trying to point out that if it comes down to non-standards, they won’t bother implementing everyone’s version, but they exist.
IE, of course, blows.
Baa!?! (is that sheep-speak???)
Oh, I wonder if this has anything to do with their decision:
“To achieve sexy buttons, Google has implemented CSS features that are currently not part of any standard and are only supported by Webkit based browsers (ie. Chrome and Safari).”
…altruism in its truest form. may the maidens weep…
This isn’t new… it’s been like this for weeks… and Firefox and IE get fairly similar looking buttons too. Each browser has essentially the same look, just implemented different.
the difference is that they are using images and other hacks. not sexy. this was enabled yesterday morning and is far more sexy.
its been there since i can remember igoogle… wasn’t part of classic google may be.. why so much fuss..
gosh this has become hindi news channel aajtak.. making news out of n……
I thought of a couple of ways, to motivate users to move from IE to modern, standards-compliant browsers like Firefox, Chrome, Safari & Opera:
1. Start streaming major sporting events & music concerts, with HTML5 video.
IE users would either have to install the Chrome Frame plug-in OR use Firefox, Chrome or Safari, to view the events.
2. Start promoting the use of Flash blocking plug-ins (a cool one called “ClickToFlash” was just released for Safari).
This would motivate web developers to start using HTML5 video, HTML5 canvas, SVG, etc. instead of Flash/Silverlight, which are proprietary & are heavy on the CPU & battery. Websites, using these technologies, could encourage people to install the Chrome Frame plug-in OR use Firefox, Chrome, Safari or Opera, to properly view the pages.
It’s unfortunate that Microsoft is so far behind with browser technology, but why should the rest of the internet have to wait for them?
After thinking about it further…
There could be an “HTML5 Music Videocast” series, geared to promoting music artists AND rapidly advancing the state of web & browser technology.
This ground-breaking initiative could be sponsored by:
1. Apple: iTunes “click-to-buy” links could be overlaid, on the music video stream.
2. Google: YouTube already hosts music videos for many/most of the major music labels.
3. Sony: via Sony Entertainment (Sony is already showing support, for open web standards, by defaulting to Chrome on their computers).
Ads, for this series, could even utilize HTML5 Canvas & SVG. It’s probably a little premature for WebGL & O3D, but perhaps they could be added later.
This could be a REALLY EXCITING way to showcase & promote the latest web standards & technologies!
I am not seeing the new buttons on Chrome.
I don’t mean I see the old buttons, I mean that NO BUTTONS are showing on Google’s Home page on Chrome at all.
Luckily enough, the enter key still works.
I heard that from more than one person now and have a screenshot. apparently a rendering bug.
Hmmm…. Buttons are apparently also quite sexy on my system in Firefox 3.5.3 on OS X 10.5.8. And — unless I’ve fallen through the rabbit hole — Firefox is not a Webkit browser?
Not quite sure of the veracity of this article… Maybe this is one of those “The Only People Effected Are IE Users” cases.
Well, in that case — seriously, who the Hell cares???
i get sexy buttons in IE8 too. this article is stupid.
at work i got IE6 on my windows laptop.. not that i use it of course.. but the ’sexy’ buttons are there too.
and FF3.5.3 and chrome 3.0.195.25
rounded corners and gradients are easier on the eye, but not the be-all and end-all i feel.
You pan MS for failing to follow the standards, but cheer Google on for breaking with the standards. What a wonderful showing of brand bias.
Every company looks to further its own agenda in order to earn market share. Standard compliance comes second to profits and shareholders.
There’s a huge difference between not supporting existing standards and merely adding a few of your own for compliant browsers.
Webkit developers aren’t breaking anyone’s site or viewing experience by simply adding those things. They’re not forcing any site owners to work around them and no one is obligated to use them.
There’s no way you can compare that to blatantly ignoring existing standards as Microsoft once did. At least if you don’t like Webkit’s additions, you can simply ignore them. All existing standards still apply. The same can’t be said about IE6.
This is when TC is at their best, more geek stuff please !
my gfx guys usually takes care of the buttons. and its cross browser compatible. nice and simple
“Today Google farted…baa baa baa baa…
what is important here is not what they did, it is how they did it.”
normally, all the garbage from the Googleplex’s gourmet cafeteria is composted and the resulting methane gas captured to power the campus. but today there was a small leak…
That’s some ugly buttons…
The theoretical Microsoft web would have been “this website only supports Internet Explorer”, whereas with Google so far we have “this website is a lot better, and has sexy buttons, if you use Chrome (which btw is open source)”.
win.
I want sexy buttons on my firefox
there’s a pug-in for that?
also google is trying some thing new with their search bar along with gradient buttons
the curious case of google’s buttons?
oh please. you kids have to grow up. There is a while dot in the 203×530 coordinate. Silly.
Google = The most generouse company in the world. Google Calendar, Google docs, Gmail, Google Apps and of couse the search engine
Do you remember that this attitude of implementing non-standard proprietary functionality led to the last round of browser wars that caused much pain in the developer world? While I welcome progress and innovation, I certainly do not hail Google for starting a new war. C’mon guys, get to a table and agree on standards before showing off your toys!
and Internet Explorer still…
There ARE rounded corners in pure CSS for Firefox too, not only for Chrome and Safari.
I found a FAQ how to make rounded corners in Firefox: http://faqbay.c...orners-pure-css
Buttons don’t give results.
I’ve just viewed this in Safari, Opera, Chromiun, Firefox, Camino and Flock. All the browsers seem to have the same buttons except for Firefox (3.5). This seems strange, because I understood Flock to be based on the Firefox (Mozilla) browser. I don’t know enough about Camino, but I could easily assume that Opera may have webkit in it (and just not be mentioned in the article).
Are all 5 of these browsers using some form of webkit? If so, then this wouldn’t be a case of google dominance, just a push towards a webkit standard – implementation.
BTW, what I see on the Firefox page are more rounded, just something like old rounded buttons.
Would you be equally horny if Microsoft start implementing ie-text-effect css standards.
they already made about 6 articles on googles button change, so i doubt it
By using the webkit, i hope it will push Mozilla and Apple to sit down and choose for one and only language for the CSS3. And just let’ s hope that Microsoft will take note.
What, no love for Mozilla’s “-moz-border-radius” CSS property? Yes, even Gecko browsers support rounded corners!
Mozilla should stop developing Gecko and switch to WebKit. As it is now, WebKit is far superior and agile than Gecko.
I’m still using Netscape 2.0.
This post ranks highly in the list of idiotic posts “in favour of webstandards”.
Web standards defines a baseline. These css rules Google uses are extensions on top of that baseline – and this is actually in line with the CSS specification. http://www.w3.o...vendor-keywords
The idea, which is correct, is to ensure that the core functionality of a site works with the baseline. Then sites are free to progressively enhance those sites with browser-specific extensions/features.
Here the core functionality is performing a search and getting back a list of results. This core functionality works across browsers. The gradients and button radii are not a core piece of functionality.
Google here are working both within the spirit and the letter of webstandards in their use of webkit vendor-specific CSS rules. web standards isn’t about pixel-perfect exact experiences – it’s about an agreed baseline – like a platform – on which to base a site and innovate on top.
Google isn’t forcing a web standards issue here, it’s actually taken a step closer to supporting them with this move – for that they should be acknowledged.
Standards bodies like the W3C synthesise ideas and suggestions – they don’t innovate. As such, their recommendations offer extension points to encourage/allow trying out and implementing these ideas. And that’s what webkit has done, and Google are using that feature in a way that degrades decently in non-webkit browsers. The ideas and implementations of gradients and border radius make up the discussion in the CSS3 Working Groups, and that will lead to a W3C recommendation of a single way of supporting this feature as part of the “web standards collection of standards”. The W3C is the baseline – not the limitation.
no one uses buttons anymore, they’re amostly .png, .jpg, or .gif
Firefox has supported rounded corners for years, are you going to beat one off for them too?
Not very good usability no feedback on mouse over. Cursor doesn’t even change to the hand when you hover over it.