Browser Woes: Vision vs Compatibility
I'm a big fan of interoperability, but there's a point at which your investment in a particular vision or statement starts to suffer. I'm slowly doing all the things I want to, to this site, but there's one thing I'll never be able to achieve efficiently, and I have to admit it bugs me!
If you visit this website using Internet Explorer you'll notice a distinct lack of colour until you drag your mouse over any of the images. This doesn't happen in Firefox (or any other browser), and it can't unless I force everyone to download all the feature images twice (which would be stupidly inefficient, so I'm never going to do that).
This is kind of a small thing unless you happen to really like it that way.
Too much colour can be distracting. What I wanted was as site which is on the opposite extreme to most colour-packed blogs. When viewing my site in IE you get the full impact of a solitary colour image just by putting your focus on it with the mouse. I think it allows the viewer to better appreciate each one, as well as ultimately making my site seem more cohesive to me. It's a design choice; an expression of my values; something which defines the concept of personal blogging and yet something which only IE allows me to fully achieve.
A colourless website also happens to befit some of my personal philosophies. It makes a statement about shades of gray and our tendency to 'colour' events with our own perceptions. I'm really disappointed that a good chunk of potential viewers will never be exposed to that.
So, if you have IE on your computer do me a favour and load it up. Then by all means comment here to abuse me for wasting your time.
Of course it doesn't really matter, and I'd have never done this on a website that was important to anyone but myself, but this is my personal blog after all -- I really should get my way here of all places. Fuck you other browsers!
Trackback
You know, it really does look rather eye-catching in IE! The contrast is just stunning. You almost make me feel guilty about using too much colour on my space. ;-)
And just an observation, btw - the mouseover for BW images to colour seems to work on most images, but not on profile pictures. So, on those entries where a picture of the poster is displayed, it remains in BW and does not change to colour, mouseover or not.
Thanks for the kind words!
You really don’t use too much colour on your site though, in fact it’s very tasteful and balanced. My beef is not with sites like yours.
I’m fully aware that I’ve gone to fairly extreme lengths here, but that was just my way of responding to the many poorly designed personal pages which assault you with brain-bending combinations of magenta and bright cyan.
I guess you’re using IE6, IE7 supports the CSS:hover effect but in IE6 it has to be done with JavaScript and I’ve forgotten to include the gravatars in my mouseover script.
Thanks for pointing that out!
(while I’m at it, I should patch up some of the irritating IE6 bugs which I don’t notice anymore in IE7. Lots of work left to do here… Browsers suck)
Righty-o, with any luck, that will have done it.
Why, thank you!
And tell me about the badly designed websites out there. On the bright side, at least the flashy gifs are passe (for now).
Yes - that seems to have done it. Works like a charm.
Cheers.
Hello Milorade,
i was really stunned seeing your design. You probably know how great it is, but I had to say it!
Anyway, it is not impossible to have the same effect in other browsers too. Not without overhead, but at least it is within one http request, not two.
By using sprites you can achieve the same effect. Sprites are images containing both non-hovered and hovered versions. For non-hovered state, you would set a background-position to a value so that only one of them is shown. On hover, just change the background-position so that another part of the image is visible. Quite simple, but efficient technique.
Puno pozdrava.
Saša, puno hvala na komentaru.
While not strictly impossible, it is highly impractical to create images with twice the area, so that half the image may be in colour, while half is in black and white.
It’s not only impractical because creating images requires many times more effort, it’s also impractical because inserting images can’t be done with <img> tags anymore… instead you have to use backgrounds on <div> elements.
Moreover, I would lose the ability to automatically generate thumbnails for my photos, as seen in the sidebar, and on the photos pages. Being forced to create those manually (on this site) means creating 3 extra thumbnails for every image I upload.
Not impossible, but it would take me back 10 years in terms of web development process. This would no longer be a CMS which manages images for me.
It’s so impractical that it’s close to impossible for this particular purpose.
If the images were for design/layout/navigation only, not content, I would certainly consider it, but when you have to jump through so many hoops to add content it becomes a much more difficult prospect.
I really like that IE has a number of (basic) client-side image manipulation tools. Desaturating an image is such a common task that it actually makes sense for it to be programatically available from a web browser. I wish other browsers offered this in addition to the alpha controls.
Thanks again for your comment, and your kind words.
Milorad,
I fully agree with you on all the points you have highlighted. I just mentioned sprites as one of the options, still far from ideal to satisfy all the possible scenarios.
Browsers still have a long way to go, don’t they? :)
Most of the trouble is that all standards organisations are ultra-conservative. I can appreciate that it’s necessary to be conservative for cabling standards, or emissions standards… but standards relating to software on the internet platform do NOT need to be quite so conservative.
The internet has evolved and adapted more rapidly than any other previous type of technology. At the moment, the factor limiting huge leaps in this evolution isn’t the hardware, isn’t the transmission speed, isn’t the adoption of the web amogst the population… it’s the slow progress of web standards.
It shouldn’t take 18 years to get from HTML to XHTML with CSS. It’s just not that far to have come in all this time.
There are very exciting things possible using addons and plugins etc, but they will never reach ubiquitous acceptance until the W3C gets off their saggy old arses and includes them in upcoming standards.
Some of the documents with “pending” status there, have been pending for a decade without final approval and ratification.
Haha, see Saša, I rant when someone gets me started :)
Пригодится.
Hi — Could you maybe give a quick rundown of _how_ you did this? Is this an “expression-based” CSS rule or something?
It is an interesting effect.
Also, a bug — I’m looking at this in IE 8 beta 2. The images are all in color, UNTIL I mouse over them — then they switch to black and white when I mouse off. That’s on the crayons, and all gravatar images.
I’m still a Firefox fan, but I think this is the first truly neat thing I’ve seen done in IE that genuinely isn’t available in FF. It _is_ a nice effect, and your site has a very distinctive look.