A few years ago, I noticed an orange chromatic theme in application icons. Seems things really have “gone green” since then:
Left to right that’s uTorrent, Update Checker, Windows Home Server, Hamachi, a network (oddball), and MS Security Essentials.
Why doesn’t anyone like purple?
I’ve been making this web stuff long enough that some is well past its expiration date.
Fun little geek game. I’m slightly disturbed I never got one wrong.
Speaking of using new web tech, I just rolled out a new site yesterday:
Some bullets for gearheads:
I’ve been using CSS3 for a long time, but this was the the first with HTML5. The design is based on existing print materials. It’s just a brochure site, but it was fun.
I finally took some of that new web tech I was talking about here and used it here. I couldn’t stand the “brick” look anymore, so it’s mostly border-radius and box-shadow, but there’s also an RGBA background color and a webkit transition. None of this gives joy for IE, though – perhaps I should Chrome Frame it? …I did also tighten up the Reader feed and search box.
I realize how long it’s been here, and that Facebook’s walled garden has been catching the vast amount of my sharing. I’d like to “get out” here more, but til I do, don’t miss me there.
~r
I recently stumbled on FindMeByIP.com, and thought “yet another IP lookup / geolocation site”. Then I noticed the “Modernizr Support” section, detailing my browser’s support for new standards.
I was impressed both by the graph and my browser’s support. Here’s how it looked with Google Chrome: 
It reminded me that last week I was experimenting with HTML5, CSS3, and Chrome Frame, and had whipped together an ugly(!) demo. I figured I’d line up the current browsers here and run them through both exercises. To be clear, my demo is NOT fair because it uses several Webkit-specific extensions, but I thought it worth seeing.
The Downward Spiral
Chrome 3.0 (and Safari 4.0) 
Yes, it’s tilted on purpose. Interesting bit: the black background is the abyss behind the rounded <HTML>. Who knows what lurks there? (Bizarre video artifacts when I resize the browser, actually).
Firefox 3.5 
@font-face worked on my header, but no gradients, and I don’t know why border-radius failed. (It’s worked on other sites).
Opera 10 
Why is the standards-nazis’ browser so sucky here?
Internet Explorer 8 
The bottom of the suck, and what we’ve all come to know and loathe. (To be fair though, IE has supported much of this since v4, but in a non-standard way. Pragmatically, I’d grant it Box-shadow, Opacity, Gradients, 2D Transforms, and Transitions thanks to its CSS Visual Filters and Transitions.)
A Testing Crisis
Currently I test my sites with SIX web browsers: Safari/Chrome, Firefox, Chrome, IE6, IE7, and IE8. This is a testing crisis for me, and IE6 has no give (with a stubborn 33% market share), so I’ve been forcing IE8 into downgraded IE7 mode for a slight reprieve. Yes, I downgrade an already-behind browser!
Sure, I could try to encourage users to upgrade their browsers, but apparently most people have no idea what that means!
(If you’re an internet professional, you should watch this)
Aagh, there’s no way out! With apologies to Mr. Folds:
IE is a brick and I’m drowning slowly.
It’s really more like three bricks drowning the web. If we could drop one or two versions, IE8 could be survivable, but how?
Hope We Can Hope For?
This is where Chrome Frame wants to come to the rescue. With it, I can use Chrome as an IE plugin, just like Flash, Java, AIR, or Silverlight. Sure it’s cheating, but in a good way – it still uses the original native web code (so it is NOT the Un-web like those other plugins).
IE8 with Chrome Frame: 
Perfect! And the same results in IE6 and IE7!
If a plugin story is acceptable (widespread use of the Chrome Frame plugin would help), this means only 3 browser engines to test. I haven’t used it in production yet, but I’ll be carefully considering it for new projects.
~
Good article on what most browsers offer designers these days. I would just add box-shadow.I happily got to use about half of these features on my most recent site, thanks to some great IE shims:
not to waste hours in time and a client’s money on lengthy workarounds in an unnecessary attempt at cross-browser perfection.
Remember the IMG element’s LowSRC attribute? Unfortunately, no modern browser does! While the big ones used to offer this for the slower folks among us, they have all dropped support for it.
I need it again, though! A current project calls for a (just) 320×280 high-color illustration with alpha-transparency – nothing other than a full 32-bit alpha-channel PNG will do that justice.
Out of the editor, it’s 160KB, which is huge for homepage decoration. A good PNGCrushing got that down to 106KB, which is still 16 seconds on 56K. Oh, and there’s the rest of the page too…
A pinch of JQuery and classic Javascript later, and LowSRC works again!
$(function() {
// jLowSRC - Rob Eberhardt (@slingfive.com), May 2009
$("IMG[lowsrc]").each(function() {
if (this.readyState=='complete' || this.complete==true) { return }
var lowsrc = $(this).attr('lowsrc');
this.lowsrcElem = this;
if ($.browser.msie && $.browser.version <7 && lowsrc.toLowerCase().indexOf('.png') >-1) { //IE6
$(this).wrap('<span></span>');
this.lowsrcElem = this.parentNode;
this.lowsrcElem.style.display = 'block';
this.lowsrcElem.style.width = this.offsetWidth;
this.lowsrcElem.style.height = this.offsetHeight;
this.lowsrcElem.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +lowsrc+ "')";
this.style.visibility = 'hidden';
} else {
this.lowsrcElem.style.background = 'url(' +lowsrc+ ') no-repeat 0 0';
}
this.onload = function() {
this.lowsrcElem.style.background = '';
this.lowsrcElem.style.filter = '';
this.style.visibility = 'visible';
}
});
});
It works in Firefox 3, Chrome, Safari 3, Opera 9, IE 7 and 8. I also got it handling IE 6 (with a small re-flow jump to the final image), which is the bulk of the code. (Dear 33% of the world, your web browser is 800 years old and eating our brains. Broadband isn’t free, but newer browsers are.)
For testing, I simulated modem speeds and “first loads” (disabled cache) with the brilliant Fiddler2. It’s not just a noticeable improvement, it’s the difference between getting sandwich or sticking around.
Hope it helps someone else!
My friend Dave Spiess asked me to clarify the term “web developer”. I could go on and on about my experiences and opinions, but a picture is more digestible, so I drew one:
BTW, here’s an quick/easy way to make graphs: http://graphjam.com/ (my graph there)