Link tags: ad

940

sparkline

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%.

Strangest of All: Anthology of Astrobiological Science Fiction [PDF]

Eight sci-fi stories gathered together by the European Astrobiology Institute. This free book is also available as .mobi and .epub.

Five Key Milestones in the Life of a Design System - daverupert.com

Five moments in the lifecycle of a design system. They grow up so fast!

  1. Formation of the Design System Team
  2. First Page Shipped
  3. Consumable Outside the Main Product
  4. First Non-System Team Consumer
  5. First Breaking Change

Dave makes the observation that design systems are less like open source software and more like enterprise software—software you didn’t choose to use:

Often, in my experience, for an internal Design System to have widespread adoption it requires a literal executive mandate from the top floor of the building.

Also: apparently design systems have achieved personhood now and we’re capitalising them as proper names. First name Design, last name System.

“Please, call me Design. Mr. System was my father.”

CSS Tips for New Devs | Amber’s Website

Never mind Kevin Kelly’s 68 bits of advice, here’s Amber’s 24 nuggets of CSS lessons for people new to web development.

The beauty of progressive enhancement - Manuel Matuzović

Progressive Enhancement allows us to use the latest and greatest features HTML, CSS and JavaScript offer us, by providing a basic, but robust foundation for all.

Some great practical examples of progressive enhancement on one website:

  • using grid layout in CSS,
  • using type="module" to enhance a form with JavaScript,
  • using the picture element to provide webp images in HTML.

All of those enhancements work great in modern browsers, but the underlying functionality is still available to a browser like Opera Mini on a feature phone.

Et In Silicon Valley Ego – Dr Beth Singler

The parallels between Alex Garland’s Devs and Tom Stoppard’s Arcadia.

Dams Public Website

I had the great pleasure of visiting the Museum Plantin-Moretus in Antwerp last October. Their vast collection of woodblocks are available to dowload in high resolution (and they’re in the public domain).

14,000 examples of true craftmanship, drawings masterly cut in wood. We are supplying this impressive collection of woodcuts in high resolution. Feel free to browse as long as you like, get inspired and use your creativity.

Dark mode and variable fonts | CSS-Tricks

This is such a clever use of variable fonts!

We can use a lighter font weight to make the text easier to read whenever dark mode is active.

geoTrad - Google My Maps

Well, this is a rather wonderful mashup made with data from thesession.org:

The distribution of Irish traditional tunes which reference place names in Ireland

Web Sites as ‘Public Accommodation’ under a Pandemic | Adrian Roselli

If you dodged an accessibility lawsuit because you have physical locations, what does it mean when those physical locations close?

Good question.

As movie theaters, restaurant ordering, college courses, and more move to online-first delivery, the notion of a corresponding brick-and-mortar venue falls away. If the current pandemic physical distancing measures stretch into the next year as many think, then this blip becomes the de facto new normal.

What’s in a name? | Sarah Higley

This is a terrific explanation of the concept of accessible names in HTML, written with verve and style!

Contrary to what you may think, naming an element involves neither a birth certificate nor the HTML name attribute. The name attribute is never directly exposed to the user, and is used only when submitting forms. Birth certificates have thus far been ignored by spec authors as a potential method for naming controls, but perhaps when web UI becomes sentient and self-propagating, we’ll need to revisit that.

The beauty of modern mobile websites · Pushing Pixels

Two observations of websites on mobile devices today:

  1. They are beautifully designed, with great typography, clear branding, all optimized for readability.
  2. I had to install Firefox, Adblock Plus and uBlock Origin, as well as manually select and remove additional elements such as subscription overlays.

Both observations are the result of conscious design decisions.

Transreal Cyberpunk Readings

When you’re done listening to my reading of a J.G. Ballard short story, here’s a motherlode of huffduffable sci-fi shorts by Rudy Rucker and Bruce Sterling.

CSS Can Influence Screenreaders | Ben Myers

This surprises me. But forewarned is forearmed.

Laura Kalbag – How to read RSS in 2020

RSS: now more than ever!

You get to choose what you subscribe to in your feed reader, and the order in which the posts show up. You might prefer to read the oldest posts first, or the newest. You might group your feeds by topic or another priority. You are not subjected to the “algorithmic feed” of Facebook, Twitter, Instagram, YouTube, where they choose the order for you.

Accessible HTML Elements | Amber’s Website

Amber runs through some HTML elements that help you provide semantic information—and accessibility—for your website: headings, paragraphs, lists, and more:

You may be aware that ARIA roles are often used with HTML elements. I haven’t written about them here, as it’s good to see how HTML written without ARIA can still be accessible.

Scripts: async, defer

I’m constantly forgetting the difference between the async attribute and the defer attribute on script elements—this is a handy explanation.

HTML: The Inaccessible Parts - daverupert.com

Well, this is a grim collection from Dave:

There are some cases where even using plain ol’ HTML causes accessibility problems. I get frustrated and want to quit web development whenever I read about these types of issues. Because if browsers can’t get this right, what hope is there for the rest of us.

It’s worth clicking through each link he lists—the situation is often much more nuanced than simply “Don’t use X.”

Why the GOV.UK Design System team changed the input type for numbers - Technology in government

Some solid research here. Turns out that using input type=”text” inputmode=”numeric” pattern="[0-9]*" is probably a better bet than using input type="number".

Fixed Headers and Jump Links? The Solution is scroll-margin-top | CSS-Tricks

I didn’t know about scroll-margin-top! I wonder if you could apply a universal rule …like, say you’ve got a fixed header that’s 2em in height, couldn’t you declare:

:target { scroll-margin-top: 2em; }