Tags: content

79

sparkline

The Hurricane Web | Max Böck - Frontend Web Developer

When a storm comes, some of the big news sites like CNN and NPR strip down to a zippy performant text-only version that delivers the content without the bells and whistles.

I’d argue though that in some aspects, they are actually better than the original.

The numbers:

The “full” NPR site in comparison takes ~114 requests and weighs close to 3MB on average. Time to first paint is around 20 seconds on slow connections. It includes ads, analytics, tracking scripts and social media widgets.

Meanwhile, the actual news content is roughly the same.

I quite like the idea of storm-driven development.

…websites built for a storm do not rely on Javascript. The benefit simply does not outweigh the cost. They rely on resilient HTML, because that’s all that is really necessary here.

Trix: A rich text editor for everyday writing

If you must add a rich text editor to an interface, this open source offering from Basecamp looks good.

Thoughts on Offline-first | Trys Mudford

Service Workers have such huge potential power, and I feel like we (developers on the web) have barely scratched the surface with what’s possible.

Needless to say, I couldn’t agree more!

Trys is thinking through some of the implicatons of service workers, like how we refresh stale content, and how we deal with slow networks—something that’s actually more of a challenge than dealing with no network connection at all.

There’s some good food for thought here.

I’m so excited to see how we can use Service Workers to improve the web.

Let’s serve everyone good-looking content

A terrific piece by Hidde, about CSS grid, but also about a much bigger question:

I don’t think we owe it to any users to make it all exactly the same. Therefore we can get away with keeping fallbacks very simple. My hypothesis: users don’t mind, they’ve come for the content.

If users don’t mind, that leaves us with team members, bosses and clients. In my ideal world we should convince each other, and with that I mean visual designers, product owners, brand people, developers, that it is ok for our lay-out not to look the same everywhere. Because serving good-looking content everywhere is more important than same grids everywhere.

Accessibility for Teams

I really, really like the way that this straightforward accessibility guide is subdivided by discipline. As Maya wrote in the blog post announcing its launch:

Each person on a team, whether you’re a manager, designer, or developer, has a role to play. Your responsibilities are different depending on your role. So that’s how we structured the guide, with a separate section for each of five roles:

  • Product management
  • Content design
  • UX design
  • Visual design
  • Front-end development

Brutalist Web Design

A website is not a magazine, though it might have magazine-like articles. A website is not an application, although you might use it to purchase products or interact with other people. A website is not a database, although it might be driven by one.

Priority Guides: A Content-First Alternative to Wireframes · An A List Apart Article

It really, really bothers me that wireframes have evolved from being a prioritisation tool into a layout tool (disempowering UI designers in the process), so I’m happy to see an alternative like this—somewhat like Dan Brown’s Page Description Diagrams.

How display: contents; Works

A really deep dive into display: contents from Ire.

Owning My Own Content - TimKadlec.com

Hell, yeah!

I write to understand and remember. Sometimes that will be interesting to others, often it won’t be.

But it’s going to happen. Here, on my own site.

Patterns Day 2017: Ellen De Vries on Vimeo

The latest video from Patterns Day is up—Ellen’s superb philosophical presentation: Patterns in Language, Language in Patterns.

There’s so much packed into this one, it might take more than one viewing to take it all in.

Patterns Day 2017: Ellen De Vries

Patterns in language and language in patterns. – Ellen de Vries – Medium

A transcript of the superb talk that Ellen delivered at Patterns Day. So good!

Fixing fieldsets — That Emil is Emil Björklund

This is an excellent proposal from Emil. If we can apply display: contents to fieldsets, then we would finally have a way of undoing the byzantine browser styles that have hindered adoption of this element. This proposal also ensures backwards compatibility so there’d be no breakage of older sites:

The legacy appearance of fieldsets probably needs to be preserved for compatibility reasons. But display: contents is not supported in any old browsers, and is most likely used on exactly zero sites using the legacy look of fieldsets.

Whaddya say, browser makers?

Offline-first for Your Templated Site (Part Two)

I’m really interested in this idea of service-worker side templating (I know that Glenn is working on something really, really cool in this area too). Can’t wait for part three of this series! (hint, hint, Jeff)

Patterns Beyond Context · Matthias Ott – User Experience Designer

If we describe patterns also in terms of content, context, and contrast, we are able to define more precisely what a specific pattern is all about, what its role within a design system is, and how it is defined and shaped by its environment.

Take a closer look at the patterns in our language. | Clearleft

Ellen goes through the principles behind the tone of voice on the new Clearleft site:

  1. Our clients are the heroes and heroines, we facilitate their journey.
  2. Speak as an individual doing whatever it is you love. Expose lovable details.
  3. Use the imperative, kill the “-ing”.
  4. Be evocative and paint the picture. Show don’t tell.
  5. Be a practical friend.
  6. Be inquisitive. Ask smart questions that need solving.

read.isthe.link

Here’s a nice little service from Remy that works sorta like Readability. Pass it a URL in a query string and it will generate a version without all the cruft around the content.

The bold beauty of content prototypes — Thomas Byttebier

Designing content-first:

Everything that happens to the content prototype from now on is merely progressive enhancement. Because while the prototype is in a shared git repository, microcopy sneaks in, text gets corrected by a copywriter, photos change for the better and flows shape up, meta data is added, semantics are double checked, WAI-ARIA roles get in…

Refreshing The Verge: no platform like home - The Verge

Mandy is fighting the good fight for the open web from within Vox Media. Her publishing tools have been built with a secret weapon…

This practice — which I refer to unoriginally as progressively enhanced storytelling — also has the added benefit of helping us make our content more accessible to more kinds of users, especially those with disabilities.

Web Design in 4 minutes

This is a wonderful way of progressively explaining the layered approach to building for the web that Charlotte was teaching in her Codebar workshop.

Vanishing boxes with display contents

I’ve seen the exact problem that Rachel describes here—flexbox only applied to direct children, meaning the markup would have to be adjusted. display: contents looks like a nifty solution.