? Why is the web so quiet?
(Robin) Why is sound used so sparingly in web design today? Well, it likely has something to do with the pop-ups of yesteryear and the intense background music that would jolt us awake whenever we visited a website that used a bunch of Flash. Because of the work of a few bad apples we’ve all collectively come to the same conclusion:
Unless there’s a video playing, websites are entirely silent.
But the other day I was playing Death Stranding and clicking around the UI. Every button prompt in that game makes an audible click! that is so very satisfying and gives you feedback: yes, you have just clicked that button. I cannot imagine what this game would feel like if its UI was entirely devoid of sound. It would all feel so much less satisfying, that’s for sure.
There are interface sounds for warnings, accepting prompts, and holding a button down. There are sounds for moving down or up in a menu, for moving deeper into the interface, for cancelling back to the previous menu.
I guess it’s not just games. The latest version of iOS is mostly silent and will only provide me with audible feedback if I’m typing. So I wonder if this is a context issue — when we’re sitting in front of a TV, it’s fine that we’re being bombarded with sounds because our focus is entirely on the TV. But when we’re on our phones, whether that’s on a website or an app, then we’re likely out and about and those sounds could annoy people around us.
I wonder if this is something that we can experiment with: making small web projects that push back a little on this thing that we’ve all collectively decided to avoid. Maybe we can make the web not only work better, but sound better, too.
? From the Blog
Simplified Fluid Typography
Fluid typography is the practice of making the font-size and/or line-height of some text dependent on the width of the browser’s viewport. Here’s an example of how that might work:
In this post, Chris looks at a few ways in which to make your typography fluid like that with the help of the calc() CSS function or with the new and fancy min() and max() functions. There’s even a way to do this with clamp(), a CSS function that I had never heard of before! And that looks something like this:
body {
font-size: clamp(16px, 4vw, 22px);
} The Power (and Fun) of Scope with CSS Custom Properties
Jhey Tompkins digs into the magic of CSS Custom Properties — but! — there’s a couple of ways to use them that you might not know about. One way might be to make scoped CSS styles when you want to have a series of buttons:
.button {
background: hsl(var(--hue), 100%, 50%);
}
.button--primary {
--hue: 233;
}
.button--secondary {
--hue: 200;
}This is great because it requires way less CSS than having to redeclare the CSS property each time. Jhey also looks how we can use them to make CSS animations a little bit easier.
The Thought Process Behind a Flexbox Layout
Chris walks through how he uses flex to make a layout and shows us all the different edge cases surrounding a simple enough decision when it comes to alignment. There’s lots of things to consider! Especially when you start tackling responsive design and unpredictable content.
I love walkthroughs like this where we get to see inside someone’s head as they ask a bunch of seemingly obvious questions. It reveals just how complex layout design can be! As Lara Schenk mentioned in her latest post about how we’re all programmers:
The thing is, the details in programming layout with CSS are different, for example, than the details in programming API endpoints with Ruby. Or machine learning with Python. Or programming a browser engine with C++.
But those differences are details! A lot of details, but still… details. It’s all programming.
An Introduction to the Picture-in-Picture Web API
Here’s a great piece about the Picture-in-Picture API which is starting to gain support across browsers:
Picture-in-Picture made its first appearance on the web in the Safari browser with the release of macOS Sierra in 2016. It made it possible for a user to pop a video out into a small floating window that stays above all others, so that they can keep watching while doing other things. It’s an idea that came from TV, where, for example, you might want to keep watching your Popular Sporting Event even as you browse the guide or even other channels.
It might be worth mentioning that the API only supports the video element for now but it’s intended to be extended for other elements to use as well in the future.
Playing Sounds with CSS
Going back to sounds on the web, here’s a wild bonafide CSS trick: did you know that you can play sounds with a tiny bit of CSS? Alvaro Montoro shows us how to do that with the embed or object tag like this:
<style>
embed { display: none; }
button:active + embed { display: block; }
</style>
<button>Play Sound</button>
<embed src="path-to-audio-file.mp3" />I have no idea when we’d want to use something like this but it’s very interesting!
WordPress.com
Hey, if you can build a site on WordPress.com, then you should build a site on WordPress.com. WordPress powers 31% of the internet and there’s a reason for that: it scales well for anyone, whether that’s a personal blog or an e-commerce site.
Use WordPress.com to start, update, and view your site seamlessly from any device. There is a generous free plan, but with any of three affordable paid plans you get a custom domain name and access to advanced design tools.
