I enjoyed reading through these essays about the web of twenty years ago: music, photos, email, games, television, iPods, phones…
Much as I love the art direction, you’d never know that we actually had some very nice-looking websites back in 2004!
Yahoo PIpes was ahead of its time. Here’s a nostalgic retrospective by Glenn Fleishman.
Clicking through these cold war slides gives an uncomfortable mixture of nostalgic appreciation for the retro aesthetic combined with serious heebie-jeebies for the content.
The slides appear to be 1970s/1980s informational or training images from the United States Air Force, NORAD, Navy, and beyond.
There are some tasty designs in this archive from Sainbury’s.
A stylesheet for when you’re nostalgic for the old Mac OS.
I played a lot Lords of Midnight (and Doomdark’s Revenge) on my Amstrad 464 when I was a kid. Turns out there’s a dedicated labour of love to port the games to modern platforms. I just downloaded the OS X port, so there goes my weekend.
Flash, from the very beginning, was a transitional technology. It was a language that compiled into a binary executable. This made it consistent and performant, but was in conflict with how most of the web works. It was designed for a desktop world which wasn’t compatible with the emerging mobile web. Perhaps most importantly, it was developed by a single company. This allowed it to evolve more quickly for awhile, but goes against the very spirit of the entire internet. Long-term, we never want single companies — no matter who they may be — controlling the very building blocks of the web.
Ten years ago I gave a talk at An Event Apart all about interaction design. It was called Paranormal Interactivity. You can watch the video, listen to the audio or read the transcript if you like.
I think it holds up pretty well. There’s one interaction pattern in particular that I think has stood the test of time. In the talk, I introduce this pattern as something you can see in action on Huffduffer:
I was thinking about how to tell the user that something’s happened without distracting them from their task, and I thought beyond the web. I thought about places that provide feedback mechanisms on screens, and I thought of video games.
So we all know Super Mario, right? And if you think about when you’re collecting coins in Super Mario, it doesn’t stop the game and pop up an alert dialogue and say, “You have just collected ten points, OK, Cancel”, right? It just does it. It does it in the background, but it does provide you with a feedback mechanism.
The feedback you get in Super Mario is about the number of points you’ve just gained. When you collect an item that gives you more points, the number of points you’ve gained appears where the item was …and then drifts upwards as it disappears. It’s unobtrusive enough that it won’t distract you from the gameplay you’re concentrating on but it gives you the reassurance that, yes, you have just gained points.
I think this a neat little feedback mechanism that we can borrow for subtle Ajax interactions on the web. These are actions that don’t change much of the content. The user needs to be able to potentially do lots of these actions on a single page without waiting for feedback every time.
On Huffduffer, for example, you might be looking at a listing of people that you can choose to follow or unfollow. The mechanism for doing that is a button per person. You might potentially be clicking lots of those buttons in quick succession. You want to know that each action has taken effect but you don’t want to be interrupted from your following/unfollowing spree.
You get some feedback in any case: the button changes. Maybe the text updates from “follow” to “unfollow” accompanied by a change in colour (this is what you’ll see on Twitter). The Super Mario style feedback is in addition to that, rather than instead of.
I’ve made a Codepen so you can see a reduced test case of the Super Mario feedback in action.
See the Pen Unobtrusive feedback by Jeremy Keith (@adactio) on CodePen.
Here’s the code available as a gist.
It’s a function that takes two arguments: the element that the feedback originates from (pass in a DOM node reference for this), and the contents of the feedback (this can be a string of text or it can be HTML …or SVG). When you call the function with those two arguments, this is what happens:
span element and puts the feedback contents inside it.translateY applied so it drifts upward. At the same time it gets its opacity reduced from 1 to 0 so it’s fading away.transitionend event that fires when the animation is over. Once that event fires, the generated span is destroyed.When I first used this pattern on Huffduffer, I’m pretty sure I was using jQuery. A few years later I rewrote it in vanilla JavaScript. That was four years ago so I wonder if the code could be improved. Have a go if you fancy it.
Still, even if the code could benefit from an update, I’m pleased that the underlying pattern still holds true. I used it recently on The Session and it’s working a treat for a new Ajax interaction there (bookmarking or unbookbarking an item).
If you end up using this unobtrusive feedback pattern anyway, please let me know—I’d love to see more examples of it in the wild.
Notes on the old internet, its design and frontend.
Well, this is a fun bit of CSS. Instantly transform a web page into a blast from the past (1998, to be precise).
- Wrong: web workers will take over the world
- Wrong: Safari is the new IE
- Right: developer experience is trumping user experience
- Right: I’m better off without a Twitter account
- Right: the cost of small modules
- Mixed: progressive enhancement isn’t dead, but it smells funny
Maybe I should do one of these.
This fun little film gives me all the feels for Battlezone …but then watching the excellent “making of” video really made me appreciate the love and attention to detail that went into this.
I’m not sure why but I genuinely love this Windows 95 style interface for Instagram coded up by Gabrielle Wee.
This is how Graham proposed to Linzi …and you can try it out for yourself.
(I must’ve got something in my eye when I got to the end of the level. Weird.)
Seb is going to be closing out the Brighton Digital Festival with a bang.
Seb unravels all the geeky details about how your favourite retro gadgets work, including Nintendo light guns, Casio keyboards and the cathode ray tube televisions that once dominated our living rooms.
It’s going to be like Seb: The Musical …with lasers.
Dave is making a nifty in-browser game that you can play by yourself or in co-operative mode. If your device has a gyroscope, you can use that to aim. Very cool!
(And it looks like it’s all set to become a progressive web app once it’s running on HTTPS.)
A lovely little native app:
The world’s most advanced camera for your mini pocket computer.
View source for added nostalgia/flashbacks.
Oh, and RTFM.
Over 700 screenshots of ZX Spectrum games, captured by Jason Scott. Some of these bring back memories.
Yaili is documenting the process of retrofitting ubuntu.com to be responsive. I’ll be avidly reading each post in this series.
