Link tags: media



Thoughts on Exerting Control With Media Queries - Jim Nielsen’s Blog

Some thoughts on CSS, media queries, and fluid type prompted by Utopia:

We say CSS is “declarative”, but the more and more I write breakpoints to accommodate all the different ways a design can change across the viewport spectrum, the more I feel like I’m writing imperative code. At what quantity does a set of declarative rules begin to look like imperative instructions?

In contrast, one of the principles of Utopia is to be declarative and “describe what is to be done rather than command how to do it”. This approach declares a set of rules such that you could pick any viewport width and, using a formula, derive what the type size and spacing would be at that size.

Science Fiction-Media in Transition

Chip Delaney and Octavia Butler on a panel together in 1998 when hypertext and “cyberspace” are in the air. Here’s Octavia Butler on her process (which reminds me of when I’m preparing a conference talk):

I generally have four or five books open around the house—I live alone; I can do this—and they are not books on the same subject. They don’t relate to each other in any particular way, and the ideas they present bounce off one another. And I like this effect. I also listen to audio-books, and I’ll go out for my morning walk with tapes from two very different audio-books, and let those ideas bounce off each other, simmer, reproduce in some odd way, so that I come up with ideas that I might not have come up with if I had simply stuck to one book until I was done with it and then gone and picked up another.

So, I guess, in that way, I’m using a kind of primitive hypertext.

Can we have custom media queries, please?

I knew that custom properties don’t work in media queries but I had no idea that there was such a thing as custom media queries, which effectively do the same thing.

But this is not implemented in any browser. Boo! This would be so useful! If browser makers can overcame the technical hurdles with container queries, I’m sure they can deliver custom media queries.

Bruce Lawson’s personal site  : prefers-reduced-motion and browser defaults

I think Bruce is onto something here:

It seems to me that browsers could do more to protect their users. Browsers are, after all, user agents that protect the visitor from pop-ups, malicious sites, autoplaying videos and other denizens of the underworld. They should also protect users against nausea and migraines, regardless of whether the developer thought to (or had the tools available to).

So, I propose that browsers should never respect scroll-behavior: smooth; if a user prefers reduced motion, regardless of whether a developer has set the media query.

Stumbling – Lucy Bellwood

Our footpaths converged around the same 5-10 platforms, each with its own particular manner of communication. I have learned, unintentionally, to code switch every time I craft a new post. It’s exhausting, trying to keep track of all those unspoken rules shaped by years of use.

But I don’t have rules like that on my blog. I turned off stats. There are no comments. No likes.

Nested Media Queries –

Huh. I don’t think I ever thought about nesting media queries …and yet I’m pleasantly surprised that it works!

HTML Video Sources Should Be Responsive | Filament Group, Inc.

Removing media support from HTML video was a mistake.

Damn right! It was basically Hixie throwing a strop, trying to sabotage responsive images. Considering how hard it is usually to remove a shipped feature from browsers, it’s bizarre that a good working feature was pulled out of production.

Hyperland, Intermedia, and the Web That Never Was —

In 1990, the science fiction writer Douglas Adams produced a “fantasy documentary” for the BBC called Hyperland. It’s a magnificent paleo-futuristic artifact, rich in sideways predictions about the technologies of tomorrow.

I remember coming across a repeating loop of this documentary playing in a dusty corner of a Smithsonian museum in Washington DC. Douglas Adams wasn’t credited but I recognised his voice.

Hyperland aired on the BBC a full year before the World Wide Web. It is a prophecy waylaid in time: the technology it predicts is not the Web. It’s what William Gibson might call a “stub,” evidence of a dead node in the timeline, a three-point turn where history took a pause and backed out before heading elsewhere.

Here, Claire L. Evans uses Adams’s documentary as an opening to dive into the history of hypertext starting with Bush’s Memex, Nelson’s Xanadu and Engelbart’s oNLine System. But then she describes some lesser-known hypertext systems

In 1985, the students at Brown who encountered Intermedia had never seen anything like it before in their lives. The system laid a world of information at their fingertips, saved them hours at the library, and helped them work through tangles of thought.

Responsive web design turns ten. — Ethan Marcotte

2010 was quite a year:

And exactly three weeks after Jeremy Keith’s HTML5 For Web Designers was first published, “Responsive Web Design” went live in A List Apart.

Nothing’s been quite the same since.

I remember being at that An Event Apart in Seattle where Ethan first unveiled the phrase and marvelling at how well everything just clicked into place, perfectly capturing the zeitgeist. I was in. 100%.

Designing for Progressive Disclosure by Steven Hoober

Progressive disclosure interface patterns categorised and evaluated:

  • popups,
  • drawers,
  • mouseover popups (just say no!),
  • accordions,
  • tabs,
  • new pages,
  • scrolling,
  • scrolling sideways.

I really like the hypertext history invoked in this article.

The piece finishes with a great note on the MacNamara fallacy:

Everyone thinks metrics let us measure results. But, actually, they don’t. They measure only what they are measuring. Engagement, for example, is not something that can be measured, so we use an analogue for it. Time on page. Or clicks.

We often end up measuring what is quick, cheap, and easy to measure. Therefore, few organizations regularly conduct usability testing or customer-satisfaction surveys, but lots use analytics.

Even today, organizations often use clicks as a measure of engagement. So, all too often, they design user interfaces to generate clicks, so the system can measure them.

The Fonts in Popular Things Identified Vol. 1 · Typewolf

I’d watch this game show:

Welcome to the first installment of a new series on Typewolf, where I’ll be identifying the fonts used in popular things. The focus here is on anything you might encounter in contemporary visual culture—movie posters, TV shows, book covers, etc.

What Does `playsinline` Mean in Web Video? | CSS-Tricks

I have to admit, I don’t think I even knew of the existence of the playsinline attribute on the video element. Here, Chris runs through all the attributes you can put in there.

The Map of Mathematics | Quanta Magazine

An absolutely gorgeous piece of hypermedia!

Data visualisations and interactive widgets enliven this maze of mathematics. Dig deep—you may just uncover the secret passages that join these concepts together.

Case Study: 2019 refresh -

Lynn gives a step-by-step walkthrough of the latest amazing redesign of her website. There’s so much joy and craft in here, with real attention to detail—I love it!

Sacha Baron Cohen’s Keynote Address at ADL’s 2019 Never Is Now Summit on Anti-Semitism and Hate | Anti-Defamation League

On the internet, everything can appear equally legitimate. Breitbart resembles the BBC. The fictitious Protocols of the Elders of Zion look as valid as an ADL report. And the rantings of a lunatic seem as credible as the findings of a Nobel Prize winner. We have lost, it seems, a shared sense of the basic facts upon which democracy depends.

Request with Intent: Caching Strategies in the Age of PWAs – A List Apart

Aaron outlines some sensible strategies for serving up images, including using the Cache API from your service worker script.

Stab a Book, the Book Won’t Die — by Craig Mod

Craig compares and contrasts books to “attention monsters”:

That is, any app / service / publication whose business is predicated on keeping a consumer engaged and re-engaged for the benefit of the organization (often to the detriment of the mental and physical health of the user), dozens if not hundreds or thousands of times a day.

Frank Chimero · A Like Can’t Go Anywhere, But a Compliment Can Go a Long Way

A thousand likes doesn’t look much bigger than one, and this becomes important when considering the form of negativity on social media.

There is no feature for displeasure on social media, so if a person wants to express that, they must write. Complaints get wrapped in language, and language is always specific.