A dashingly responsive web page

Morse code, and the Telegraph, were simple in design, but changed the world. The same goes for the Web. Today’s lesson is themed around dots and dashes.

We can do beautiful work with the powerful capabilities of the web platform. But neither beauty nor power lie just in the visual appearance of our sites, because the web is not just visual. It’s universal.

Take this simple web page, for instance. It is not just responsive on the standard ”240px plus” screens of smartphones (watches?) and up to the what-have-you widths of tablets, laptops, TVs and desktop screens.

No, this one goes further: it actually sort of works on screens of 0px and up.

”Now hold on a minute” I hear you say, ”since the web is not just visual, any web page can work as a printed page, or using a screen reader.”

True. But this one achieves its readability on viewports with a width of about 1em (or so) and up visually, and does not require a screen reader or printer to work without a screen. Sort of.

Let me explain:

  • On viewports less than 240px in width, the text contents of the page are converted to Morse code. This encoded string of dashes and dots is then displayed vertically instead of the page content. This only requires about one em of space. I can’t imagine what kind of smartphone would have a screen like that, but hey—nobody saw the iPhone coming either. Use your favorite devtools to resize down to that width—or hit cheat mode.
  • You can also press the play/stop buttons (if visible) below to read that Morse code version of the page in audio form, provided you are using a reasonably modern browser. That’s right, this page can actually beepity-beep itself using the Audio API on supported devices (don’t forget to turn the volume up. Or down, if you’re in the quiet compartment of the train), without even having a functioning screen.

Apart from these features, there’s all sorts of CSS trickery and little easter eggs going on for visual stuff. CSS Shapes, feature queries, SVG filters, gradient drawings… There’s a lot you can do with 10Kb! Have a look at the GitHub repository to see what’s what.