Windows XP CSS Desktop
Over the past two years we have seen a lot of cool things being done with CSS, but this might be the coolest one to date. It works just like a Windows desktop, but it is done completely in CSS.
What is interesting is to see that most of the positioning was done with unordered and definition lists. The CSS code is clean so this could make an excellent case study for any CSS developers and goes along well with my Learning CSS entry.
The project isn’t complete since Trovster has taken a break from it, but for what he has accomplished so far I must say that I am impressed.
Other tidbits about the project:
- If you do http://desktop.trovster.com/desktop/?name=YOURNAME — it’ll change the start-menu name to your input.
- If you do http://desktop.trovster.com/desktop/?email=email@address.com — it’ll change the user icon if the email address is associated with the Gravatar service.
- If you do http://desktop.trovster.com/desktop/?name=anything@gmail.com — it’ll add a Gmail Notifier icon to the system tray area!
This just proves further how much more complicated Microsoft makes everything than it needs to be. Their whole frontend can be replicated almost exactly in CSS?! You could do it with OSX but it would take more work.
By Casey Gollan on May 5, 2005 10:15 pm
Casey: I’m no big fan of Microsoft, but your statement is in conflict with itself. The fact that Windows can be replicated completely with CSS means the interface is *not* complex.
And actually, Mac OS X would probably take the same amount of effort to do. Of course, you’ll need to use a browser which supports PNG translucency, but it would be fairly simple to do.
By Chris Vincent on May 5, 2005 10:56 pm
Very cool, and checkout the alternative styles. The Mac one appears a bit messed up. But the Longhorn one seems to work allright.
By Tom on May 5, 2005 10:59 pm
oh wow, you can even drag around the icons, slick.
By Tom on May 5, 2005 11:00 pm
Heh, interesting, but I’ve spent the last 2 years working with an insane code monkey to make a FULLY FUNCTIONAL online desktop environment. Totally styled with CSS, all DOM scripting (we serve our XHTML correctly ;) and it totally smokes all the flavour of the month web apps that are about atm.
I’d give an arm and a leg to have clearance to link to a demo, but alas…
Sit tight people, this is not a troll post :)
By Andrew K on May 5, 2005 11:07 pm
That’s cold leaving us hanging like that Andrew. Feel free to email me the details. I promise I won’t tell…too many people…
By Scrivs on May 5, 2005 11:35 pm
I don’t get your reasoning here Paul (of course, that’s nothing new… ;)) The link, while great, is completely unfunctionable in I.E. Without getting into the ole “Microsoft is the great Satan, that’s why you need FireFox” nonsense, how can you deem CSS which doesn’t translate across all browsers (at least to a point of being functional) as being an “excellent” case study?
Also, how is a website which “forces” me to download a new browser - not a plug-in or different media player, but a NEW BROWSER any different than MTv forcing you to watch their videos in WMV? Or Microsoft forcing Apple to implement DRM on the Apple version of WMV?
I really am curious here. Why is one an “excellent case study” into the future of development and the other an apparent trip back to 1999 for you?
By Mark on May 6, 2005 12:43 am
You are joking right? I said that it isn’t even finished so it not working in IE should have no reason as to why you can’t look at it for a good case study in advanced CSS design. Sure it may not be practical, but I see many CSS experiments as not being practical.
This is an experiment and personal project so nobody is forcing you to download anything and if you chose to do so at least you have the luxury of using a browser that works on multiple platforms. On the other hand MTV’s commercial venture forces me to switch platforms all together.
If this was a commercial project or something that was useful in practice then yes I would look down upon the fact that it doesn’t work in IE.
It’s sort of like learning Calculus to gain a better understanding of the basic concepts of math. It might not be practical to study advanced mathematics, but it can help you nonetheless down the road in some manner.
By Scrivs on May 6, 2005 12:51 am
“That’s cold leaving us hanging like that Andrew”
Mwuuhahahahaaa…
I *would* email you some more teaser details, but your contact menu item doesn’t point anywhere :P
Seriously though Scrivs, you’ll be an invited beta tester, so don’t stress :D (approx. September this year!)
By Andrew K on May 6, 2005 1:18 am
What is truly funny is that this css implementation actually renders the start menu a whole lot quicker than Windows.
By Bryan GL on May 6, 2005 4:09 am
I don’t know, Paul. I guess my point is that if you’re going to be trying to teach and promote CSS techniques and usability, as you seem to be going with these last few posts, then I would’ve expected your “excellent case study” to be something that worked (at least to the point of usability) across the spectrum of global users, not just a niche market.
By MArk on May 6, 2005 8:33 am
Mark,
You said quote ‘”Microsoft is the great Satan, that’s why you need FireFox” nonsense’
I don’t use FF for that reason. I use FF for it’s features, and I don’t use IE because IE is insecure.
Calm down.
By Ryan on May 6, 2005 10:08 am
Mark! Dude! Calm down.
First of all, this is a case study in how CSS can work. It is a wonderful example of the possiblities. To really look at what can be accomplished with CSS you have to rely on the top browsers, IE just doesn’t cut it. I mean if you what to stick with oatmeal for breakfast every morning — go ahead, but I would like an array of choices.
Mozilla browsers and Safari allow us to see more of what we can do. And projects like this one help us as designers to learn that we can push the envelope and expect more from our designs. And, after all, we are talking about a case study not the website for the Post office or IRS. (by the way, the Post Office and many other BIG websites do not work on a Mac running any browser. That’s forcing me to get a whole new computer — not just download a free browser!!!))
Secondly, if you were a true web designer you would already have multiple browsers loaded on your computer ESPECIALLY Firefox. So since I take it you are not a designer! Back off and let us true web artist talk.
By Dara on May 6, 2005 10:49 am
I was going to point out an OS X based site that puts that WinXP one to shame. But it appears to be down at the moment :(
By Dougal on May 6, 2005 10:55 am
First things first, I just want to say I’m very impressed with the site it is an extremely good demonstration of the power of CSS. I happen to know some more of the stuff Trovster has planned still to do so its definately worth checking back every so often.
Now I’d just like to get rid this rather sick feeling on my chest that seemed to appear while I was reading the comments.
Mark: IE is not fully CSS compliant therefore this makes a perfectly good case study for CSS regardless of whether it works in IE. I won’t go into reasons why you should be using Firefox because if your visiting sites like this and still don’t know its because your not listening and I can’t change that.
AndrewK: Whether or not your working on your own project, I think it would at least be polite to make some sort of comment on this site as this is what we are talking about, braging about your own site (particularly with no proof) is frankly rude.
Sorry about the moans people.
By Deus Diablo on May 6, 2005 11:02 am
Wow. That sure was fun, huh?
A couple of clarifications, if I may, and then I’ll leave you fine folks alone.
I do have Firefox on my PC - in fact, it’s the default browser. I also have Opera and Netscape as well. To be a true equal opportunity browser guy, I furthermore have an account at BrowserCam. What might surprise some of you (based on these comments) is that I’ve also owned and worked with several Apple workstations over the course of my 20 year professional design career. The first being the Apple IIGS, the last being a G3.
The way I learn is to bring up a dissenting opinion about something - devil’s advocate, if you will.
All I did here was questioning Paul’s reasoning on labeling this site a case study. He answered to my satisfaction and I clarified - game over. Paul and I have been playing this game here like that for a couple of years now.
Oh well, que sara sara, I guess.
Oh, and yes Dara dear, please allow me to step to the back of the web design bus so you can take your rightful place front and center.
Party on, Garth!
BTW: Feel free to delete this if you wish Paul.
By Mark on May 6, 2005 1:26 pm
Nah, I enjoy your comments where you seem a tad bit human. ;-)
By Scrivs on May 6, 2005 1:27 pm
I am not a Microsoft fan, but I hate to see people exagerating. Windows isn’t the worse operative system in the market by far.
It’s functional, sure it might have some bugs, but if you find yourself resorting to ctr+alt+del more than 5 times due to Windows problems (not third party software) then you’re the one that messed up the operative system to begin with.
If you do a fresh windows install, get all the updates, the latest drivers for your hardware and you’re not an idiot as a user, all you need is Firefox to keep your computer clean and running smoothly.
I’ve done this on my computer, my girlfriend’s, my friends’ and family and none of them have had any problems since so don’t exagerate please.
By Griffith on May 6, 2005 3:39 pm
Mark, glad to see you’re clarifying yourself as a devil advocate. But seriously, before you should think about what arguements are before attacking someone’s personal work. And I’m not trying to be front and center… I’m trying to leave space for the artist (in this case Trovster) to have his work appreciated for what it is. Your comments weren’t valid in this instance — devil’s adovcate.
By Dara on May 6, 2005 6:24 pm
Sorry — my toddler made me hit the post button before I was ready. My last sentence should read:
Your comments weren’t valid in this instance — devil’s adovcate or otherwise.
By Dara on May 6, 2005 6:28 pm
Dara -
Where did I attack Trovster’s work? Perhaps you should re-read my original comment. I state that the “link is great.” I was implying there was some talented CSS work going on at that site which is admittedly far beyond my capabilities. Perhaps I should’ve written the “site is great†– my bad.
Regarding my comments about it not working in IE, Trovster himself (?) will tell you that in a big box on the upper right of the screen when you visit the site in IE. He also strongly suggests we “do ourselves (IE users) a favor” by downloading FireFox.
My criticism was not of Trovster’s work, it was a question of / challenge to Paul’s labeling of it as an “excellent case study of CSS” to which I disagree - I think that’s still allowed here, right?
If you or I, or anyone for that matter, presented this site as part of an in-depth case study or white paper to a potential client as to why they should switch to a CSS layout it would fail. Why? Because the client would most likely fire it up in IE and it wouldn’t work.
If we’re going to be preaching the gospel of CSS, let’s make sure we have a message that’s applicable and relevant to the world-at-large, not just our little happy bubble of Apple laptops and FireFox browsers. That world-at-large, like it or not, is surfing the web on a Windows-based OS using Exploder. They’re looking for Windows-based, Exploder solutions, not another advertisement or prompt-to-download button for FireFox.
I would say Trovster’s site is currently a great example of the potential of CSS-based layout, and if anything, it makes a great case study for convincing a potential client, or company why they should give FireFox a try, as well.
If you’re looking for a great case study on CSS, it hasn’t yet gotten any better than Bowman’s “Throwing Tables Out the Window.â€
By Mark on May 6, 2005 10:46 pm
Hello folks. First of all can I a big thank-Q to Scrivs for pimping this little project of mine! Secondly can I thank the people who’ve taken the time to check it out and comment about it on here.
OH, it’s not normally, heh, though I did take the time to separate out core elements when adding the multiple designs.
Considering, at the moment, it’s ignoring Microsoft Internet Explorer, the alpha transparency for the images isn’t going to be an obstacle.
Messed up? It points to an empty anchor, so I don’t what you’re seeing!
Not sure whether this is a dig, but this mockup was never indended to me a functioning desktop! I serve the page in good (old) HTML 4.01 using text/html, so it is served properly and valid. Also, sending it as XHTML 1.0 strict using text/html isn’t incorrect, it just defeats the purpose, hence why it gets good (old) HTML 4.01!
Mark: Looks like you’re getting a little grilling on this, but you make totally valid points. Can I say first off that I never indended this little project to be a “website” and I don’t see it as one. Of course, if it was a website, I would make it function in Microsoft Internet Explorer — that’s obvious!
I think Scrivs summed up the answer to forcing you to download new technologies to view the site well. So I’ll leave it at that and an experiment and personal project is exactly what it’s going to be!
It looks like it’s a little more broken in IE than I remembered it looking while testing. Last time I checked it, it at least looked correct! OK, the start-menu didn’t work, but the buttons all lined up nicely at the bottom. I might fix it, but I’m adding a run box at the moment which links to a CSS mock up of the MSDos Edit box (run, edit to see it in Windows) — which all looks fine, except for the working “suckerfish” style menu, because no JavaScript has been used on the page.
How about relabelling it from “case-study” (which I don’t really see it as, coz there isn’t a long-ass report to read through about it) to “CSS demonstration” or something along those lines?
And Mark did say, in the first paragraph of his first post The link, while great…, and he hasn’t been critising the site, just the fact that it’s not working in IE. Which is fine and dandy, coz it doesn’t!
If anyone would like to help make the JavaScript cross-browser compatible then I can work on making it nice(r) in IE. However, if you totally forget about IE you can throw complex stuff together fairly quickly, and this is what I did with this project (though it wasn’t too quick!)
Although the site isn’t “usable” in IE, it’s certainly accessible without the styles. It even passes all three levels of an automated check of W3C’s Web Content Accessibility Guidelines (via WebXact), which is what I wanted to achieve as well.
Scrivs linked to the main “application”, but you miss out the comedic loading screen! You can check it out at if you go to the start page — http://desktop.trovster.com — the page refreshes after a time to the actual desktop!
Coming (soon) is a login area where you can choose your username and other setting which I am yet to think of!
Thanks for the heads up everyone. Cheers Trovster.
By trovster on May 7, 2005 10:23 am
Its lovely, beatiful’, nice, gorgeous, pretty its pure css romance
By Kasper on May 7, 2005 3:28 pm
The OS X example is very nice although since I am not able to check the code (it is some weird encryption there), it useless and even worthless, since I don’t know whether it uses some third-party technology or sources.
By dusoft on May 10, 2005 4:56 pm
Interesting approach. I have a question and a comment:
1) Why would one want to recreate an interface using CSS that is questionable in itself, regarding usability and look and feel? Or putting it differently: What’s the use of this? To prove it can be done?
2) It doesn’t seem it’s using CSS 2 standards, cause in Safari the interface is broken, showing repeating icons and the actual hotspots (clicking buttons, dragging items) are shifted and don’t match with the actual icons.
By Henning on May 13, 2005 8:34 am
the original CSS Desktop (although much crappier)
By huphtur on May 13, 2005 9:07 pm
yeah, would be nice if I included an URL heh: http://www.famularo.org/WinCS/
By huphtur on May 13, 2005 9:09 pm
my word that is so damn clever!!
By Tyler on May 22, 2005 11:52 am