I have tried before to recreate the 95 UI in CSS. I didn't release the results but I was quite happy with what I managed. Honestly, I should probably contribute to these projects.
Annoyingly, certain parts of the Windows UI cannot be recreated with just HTML and CSS. One of these is how focusing works. I don't know what the proper names for it are, but Windows has two kinds of focus:
• Dotted line (or flashing cursor for text boxes). If you press space bar, something will happen with this element.
• Black outline around the outside. If you press Enter, this button's action will be triggered. This is why the OK button in a typical Windows dialogue box looks different to the Cancel button. I don't remember what this looks like in XP but I think it uses a thicker blue border.
However, the browser only really has the former kind of focus — even for HTML buttons in Internet Explorer on Windows 95! So if you want a full Windows-like look and experience, you need some JavaScript to emulate the second. I notice that XP.css lacks this kind of focus, and I think that's why it feels like something is missing from the buttons.
The first kind is the input focus and the second kind is the default button in a dialog (not really a kind of focus): "If the button is in a dialog box, the user can select the button by pressing the ENTER key, even when the button does not have the input focus."[1]
Yeah, there are definitely some non-obvious details in its behavior. The default button focus moves with the input focus to other buttons but reverts to the default default button if you focus another kind of control. Raymond Chen has an explanation:
https://devblogs.microsoft.com/oldnewthing/20040802-00/?p=38...
I know what you mean, I get that skeuomorphic was overdone in a lot of places but, the remedy may have been worse than the disease since we have had such regression in UI design that it now looks somewhat like high-dpi versions of text user interface graphical blue blocks everywhere.
Honestly skeuomorphism was so much better than the flat mobileshit we're stuck with now.
We had Windows 7, gnome 2, OSX Lion, all of which had mild drop shadows, 3d depth in icons and window borders, clearly delineated edges between various UI controls, and then it was as if one day some shadow illuminati council of UI design put out a worldwide decree that everything has to be flat and use indecipherable heiroglyphic vector icons made of little dots and lines.
I've been waiting for some kind of aesthetic counter-reaction to take place and it seems like it actually might be starting to happen. 2010-era was the peak of UI design and it's high time we went back, godammit!
History goes in spiral. After everyone will be fed up with flat style, someone will release gorgeous super-realistic skeuomorphic UI and everyone will praise it.
Even worse actually. text user interfaces had contrasting backgrounds between different controls. It took me a while to learn the large-text-as-a-tab style in Metro UI.
It's not just the flatness that irritates me, there is such low information density, so much white space and large text sizes it feels like using a blown up tablet app.
That's because that was precisely what it was intended as --- the idea was to use the same UI on both desktop and mobile, and unfortunately they picked the latter instead of the former to build upon. The former would've resulted in something more similar to WinCE.
I think WinCE fell victim to the technology of the time. I believe today’s higher precision and lower effort capacitive touch screens would have reduced much of the issues that plagued its usability with its crappy resistive touch screens and styli.
Are you speaking of Hololens? A device that only a bunch of people own or can afford is not a justification to break the UI of most desktop computers in the world.
Fluent Design is Microsoft's styling and it included a vision for where they want to get to. Some of that is reflected in the UI you see today in Windows 10.
It’s honestly great - it’s what I was hoping someone would make when the 98.css made it to HN - but does the kerning have to suck? What’s wrong with beautiful typography that’s not constrained by the DPI of the 90s?
Really? I thought it was quite garish, plastic-y, especially the blue version.
I still think that in the Windows timeline, original Win95 (with actual toolbar buttons) was the best. It got all "designy" with each official iteration afterwards, but at least the progress of time meant that the weird third party shenanigans died out (like Borlands(?) huge buttons with the cross/checkmark).
Switching back to 9x looks, moving away from Nappa and installing a real file manager was always on top of my list when switching to Windows.
Windows XP was peak windows aesthetic without compromising usability. The toolbars, icons, Taskbar and everything in between was the right balance of style and functionality.
I still think that the UI of Windows 2000 was better. Windows 2000 had also better usability for keyboard users since you can be extremely productive without a mouse. I think it is the last versions where they really cared about keyboard users. For example latter versions added extra information to Explorer and that had the resukt of requiring extra keystrokes to move from the path bar to the file list.
Anyway I am digressing... I came here to say that while the Css is very cool, it seems to introduce strange delays. On my android phone actions on tabs, checkboxes and radio buttons give a result at least one second after i click them.
I miss the old start menu. I now have to remember the complete names of programs I have installed, as win 10 search won’t find partial matches all the time
After using Windows 10 for a while I grew similarly fed up. I found OpenShell [1] to be a very faithful replication of the old start menu I'm used to from XP and before.
I’m still stunned at how bad Windows search is. They’ve been trying to get this right since they begun development of Windows Vista nearly 20 years ago.
Meanwhile in OS X land, their 16-year-old search implementation has always been so good that in a lot of cases, the file manager isn’t necessary to find even the most obscure and poorly organized documents.
Company politics interfered with the work on database as file system, one of Longhorn's greater ideas. I can't remember the specifics, it's on Slashdot somewhere, can't find it anymore.
This is something that is really puzzling to me, how such a basic and useful feature can be broken for years. It's annoying me since the release of Windows 8.
Keyboard Launchers like Keypirinha (also used Launchy back in the days) are my current workaround. They can index what the start menu should be indexing and do it right. I also keep my own (synced) folder of shortcuts that I add to the indexing.
So nostalgic and brings back many memories of my teenage years. I had way too much time when Windows XP was being built - would hang out on IRC and download leaked new builds every week or so. devils0wn is forever embedded in my memory (if you know, you know). It was such a fun time, downloading new builds, installing hacks to disable product key checks. A golden age.
I really liked it as well. Most systems are more functional in one way or another these days but somehow nothing ever seems to achieve a look and feel on par with XP (IMO). It was a sad day when regular security updates for it stopped.
Title bars are a bit thick. Take off the min-height, and you're practically there. The title bar gradient seems a bit off, but unless you're looking at an XP VM, no one would know.
It's slightly unsettling to see the default window theme of XP to be used for this. Most users of XP (at least in my experience) changed the theme from "Royale" to "Windows Classic" immediately and never looked back. Except for your parents or those people in your office who didn't know what they were doing and wanted to look at goofy colors all day.
Does a pretty good job at mimicking both Windows 10 and Mac OS. If there isn't a CSS framework someone else can link you to then you could either just use react (providing it's a project where that sort of decision doesn't affect anything) or attempt to take the CSS styles from this project.
While its not exactly Windows 10, MIcrosoft's design system is called "Fluent UI"[0] which includes what they use for the Web. It features a similar flat UI but isn't exactly a copy of Windows 10, it does it's own thing. The components are also unfortunately tied to React.
My company, an online pharamcy, actually works with more than one supplier whose website has some elements looking like this. You can tell they definitly didn't do it for a nice retro feeling though.. sigh
This is cool, but To me, the 98.css rocks more. It feels like a more clear and consistent ui. I wonder if that's really true or if its just ny nostalgia for what i had as a kid. Probably the latter.
This is what I think too, but the amount of people I hear that say XP was the best windows makes me wonder, do the more colourful buttons, lighter backgrounds, (maybe not rounded edges?) make for a better UI than win95 ultra-consistency (very grey, X not highlighted)?
Can any proffesional designers chip in?
(Win2k was the peak windows, although using win3.1 web emulators to play solitaire is my peak nostalgia)
> the amount of people I hear that say XP was the best windows makes me wonder
It's just a function of generational popularity IMHO. Windows XP broke into the mainstream in a way that 98/2000 had not, for a number of reasons. It was literally garish, but between people looking for a "wow" factor after years of grey borders, and the increased amount of total desktop users, more people loved it right there and then than anything that preceded it or followed it. I wouldn't extrapolate any big theory of design from this phenomenon.
As a long-time Windows user at the time, I can say that "the dream" back then was OSX.
I appreciate that the dropdowns are native so they actually work on mobile. I think the treeview (and others) however should select off of the aria roles for this kind of widget to enforce accessibility.
