Plainness and Sweetness – Frank Chimero
I adore the thoughtfulness and lack of ego that Frank presents here. I hope that every designer reads this and thinks upon it.
5th | 10th | 15th | 20th | 25th | 30th | ||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
12am | |||||||||||||||||||||||||||||||
4am | |||||||||||||||||||||||||||||||
8am | |||||||||||||||||||||||||||||||
12pm | |||||||||||||||||||||||||||||||
4pm | |||||||||||||||||||||||||||||||
8pm |
I adore the thoughtfulness and lack of ego that Frank presents here. I hope that every designer reads this and thinks upon it.
Joe’s site is very clever …but is it as clever as Jon’s?
Jon’s site is very clever …but is it as clever as Joe’s?
I should do this in the Clearleft kitchen.
This is wonderful meditation on the history of older technologies that degrade in varied conditions versus newer formats that fall of a “digital cliff”, all tied in to working on the web.
When digital TV fails, it fails completely. Analog TV, to use parlance of the web, degrades gracefully. The web could be similar, if we choose to make it so. It could be “the analog” web in contrast to “the digital” platforms. Perhaps in our hurry to replicate and mirror native platforms, we’re forgetting the killer strength of the web: universal accessibility.
Charlotte’s step-by-step account of setting up a Node server is going to be invaluable if and when I get around to dipping my toes in those waters.
A lot has been written about the future of journalism, the importance of businesses like the LA Times being profitable as a way to protect American democracy. I agree with that in theory. But this sort of incompetence and contempt for readers makes me completely uninterested in helping their business.
Like Craig says…
between personal data suction and total disrespect of bandwidth, I'm not sure how you can *not* run ad blockers and browse the web
— A Walkin' Dude (@craigmod) March 26, 2017
A ludicrously deep dive by Nolan into how scrolling works in web browsers. No, wait, come back! It’s more interesting than it sounds …and it certainly isn’t as simple as you might think.
For instance, do you know the difference between the following scenarios?
- User scrolls with two fingers on a touch pad
- User scrolls with one finger on a touch screen
- User scrolls with a mouse wheel on a physical mouse
- User clicks the sidebar and drags it up and down
- User presses up, down, PageUp, PageDown, or spacebar keys on a keyboard
If you ask the average web user (or even the average web developer!) they might tell you that these interactions are all equivalent. The truth is far more interesting.
This comes complete with lovely animated illustrations by Rachel.
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.
Steps you can take to secure your phone and computer. This is especially useful in countries where ubiquitous surveillance is not only legal, but mandated by law (such as China, Australia, and the UK).
I know it’s just a landing page for YouTube channel of movie reviews but I really like the art direction and responsiveness of this.
Funnily enough, I led a brown bag lunch discussion about AMP at work just the other day. A lot of it mirrored Chris’s thoughts here. It’s a complicated situation that has lots of people worried.
It’s a bit finger-pointy but this blog should be useful for anyone working on internationalisation.
This blog has two general aims: to show the fundamental flaws in using flags to represent languages and how to create good experiences when dealing with multilingual and multi-regional content.
That library was a Pandorica of fabulous, interwoven randomness, as rich as plum cake. Push a seed of curiosity in between any two books and it would grow, overnight, into a rainforest hot with monkeys and jaguars and blowpipes and clouds. The room was full, and my head was full. What a magical system to place around a penniless girl.
Chapter 3 of Resilient Web Design, republished in Smashing Magazine:
In the world of web design, we tend to become preoccupied with the here and now. In “Resilient Web Design“, Jeremy Keith emphasizes the importance of learning from the past in order to better prepare ourselves for the future. So, perhaps we should stop and think more beyond our present moment? The following is an excerpt from Jeremy’s web book.
Speaking as an ancient web developer myself, this account by Gina of her journey into Node.js is really insightful. But I can’t help but get exhausted just contemplating the yak-shaving involved in the tooling set-up:
The sheer number of tools and plugins and packages and dependencies and editor setup and build configurations required to do it “the right way” is enough to stall you before you even get started.
Turning your existing website into a progressive web “app”—a far more appealing prospect than trying to create an entirely new app-shell architecture:
…they are an enhancement of your existing website which should take no longer than a few hours and have no negative effect on unsupported browsers.
A few straightforward steps for improving the usability of credit card forms. The later steps involve JavaScript but the first step uses nothing more than straight-up HTML.
Here’s a CSS file that will give you a bit more control over styling some form elements. The thinking behind the CSS for each element is explained nice and clearly.
Incredibly impressive work from the CodePen team—you can now edit entire projects in your web browser …and then deploy them to a live site!
Smörgåsbord Studio created a design system for the Welsh government, including the typeface Cymru Wales Sans from Colophon.
The accompanying video lists the design principles:
- Elevate our status
- Surprise & inspire
- Change perceptions
- Do good things
- Be unmistakably Wales
Everyone in the Fractal Slack channel is currently freaking out about this. Veeeeery iiiiinteresting!
When I was in Porto a few weeks back, I took lots of pictures of the beautiful tiles. They reminded me of the ubiquitous repeating background images that were so popular on the early web. I was thinking about abstracting them into a collection of reusable patterns but now it looks like I’ve been beaten to it!
I really need to have a play with this API. I think it could potentially be a useful indie web building block …if the web share target API also gets implemented.
An even thornier problem than the Clock of the Long Now.
A great new site from Heydon:
A blog trying to be a pattern library. Each post explores the design of a robust, accessible interface component.
The first component is a deep dive into toggle buttons.
A new way to enjoy the mother of all demos, organised into sections that you can jump between. This was put together by Douglas Engelbart’s daughter Christina, and Bret Victor.
Two new typefaces, designed to be deliberately lacking in expression.
The write-up of the making of the typefaces is as open and honest as the finished output. This insight into the design process rings very, very true:
Post rationalisation is an open secret in the design industry. Only when a project is finished can it be written up, the messy process is delineated and everything seems to follow a logical sequence up until the final thing is unveiled, spotless and perfect.
However, I suspect the process is largely irrational for most designers. There is a point where all the input has been processed, all the shit drawings, tenuous concepts and small ideas have been thrown away and you just work towards the finish, too exhausted and distracted to even know if it’s worth anything or not. And, if you’re lucky, someone or something will come along and validate the work.
🎵 If there’s something strange, in your neighbourhood’s architectural renders, who you gonna call? 🎵
James Bridle!
(I ain’t ‘fraid of no render ghost.)
Time-shifted reports from the Russian revolution, 100 years on.
All the texts used are taken from genuine documents written by historical figures: letters, memoirs, diaries and other documents of the period.
Every day, when you go onto the site, you will find out what happened exactly one hundred years ago: what various people were thinking about and what happened to each of them in this eventful year. You may not fast-forward into the future, but must follow events as they happen in real time.
Paul finishes up his excellent three part series by getting down to the brass tacks of designing and building components on the web …and in cities. His closing provocation has echoes of Heydon’s rallying cry.
If you missed the other parts of this series, they are:
The second part of Bruce’s excellent series begins by focusing on the usage of proxy browsers around the world:
Therefore, to make websites work in Opera Mini’s extreme mode, treat JavaScript as an enhancement, and ensure that your core functionality works without it. Of course, it will probably be clunkier without scripts, but if your website works and your competitors’ don’t work for Opera Mini’s quarter of a billion users, you’ll get the business.
But how!? Well, Bruce has the answer:
The best way to ensure that everyone gets your content is to write real, semantic HTML, to style it with CSS and ensure sensible fallbacks for CSS gradients, to use SVG for icons, and to treat JavaScript as an enhancement, ensuring that core functionality works without scripts. Package up your website with a manifest file and associated icons, add a service worker, and you’ll have a progressive web app in conforming browsers and a normal website everywhere else.
I call this amazing new technique “progressive enhancement.”
You heard it here first, folks!
We’ve gone through the invention step. The infrastructure came out of DARPA and the World Wide Web itself came out of CERN.
We’ve gone through the hobbyist step. Everyone now knows what the internet is, and some of the amazing things it’s capable of.
We’ve gone through the commercialization step. Monopolies have emerged, refined, and scaled the internet.
But the question remains: can we break with the tragic history that has befallen all prior information empires? Can this time be different?
The first part of this article is a great history lesson in the style of Tim Wu’s The Master Switch. The second part is a great explanation of net neutrality, why it matters, and how we can fight for it.
If you do nothing, we will lose the war for the open internet. The greatest tool for communication and creativity in human history will fall into the hands of a few powerful corporations and governments.
There’s something very endearing about this docudrama retelling of the story of the web.
Interesting ideas around front-end frameworks:
The common view is that frameworks make it easier to manage the complexity of your code: the framework abstracts away all the fussy implementation details with techniques like virtual DOM diffing. But that’s not really true. At best, frameworks move the complexity around, away from code that you had to write and into code you didn’t.
Instead, the reason that ideas like React are so wildly and deservedly successful is that they make it easier to manage the complexity of your concepts. Frameworks are primarily a tool for structuring your thoughts, not your code.
The proposed alternative here is to transpile from the idiom of the framework into vanilla JavaScript as part of the build process, which should result in better performance and interoperability.
A free ten part email course on web typography for designers and developers. The end results will be gathered together into a book.
After Clearleft’s recent rebranding, I’m really interested in Happy Cog’s redesign process:
In the near future we’ll be rolling out a new website, followed by a rebrand of Cognition, our blog. As the identity is tested against applications, much of what’s here may change. Nothing is set in stone.
Jamie has put his talks online, complete with transcripts:
Google have released this encoder for JPEGs which promises 20-30% smaller file sizes without any perceptible loss of quality.
One of the accessibility features built into OS X:
Using Switch Control, and tapping a small switch with his head, my son tweets, texts, types emails, makes FaceTime calls, operates the TV, studies at university online, runs a video-editing business using Final Cut Pro on his Mac, plays games, listens to music, turns on lights and air-conditioners in the house and even pilots a drone!
Hope is a belief that what we do might matter, an understanding that the future is not yet written.
Rebecca Solnit’s piece reminded me of something I mentioned a couple of year’s back when I referred to Margaret Atwood’s phrase “judicious hope”:
Hope sounds like such a wishy-washy word, like “faith” or “belief”, but it carries with it a seed of resistance. Hope, faith, and belief all carry connotations of optimism, but where faith and belief sound passive, even downright complacent, hope carries the promise of action.
An open beta of Smashing Magazine’s redesign, which looks like it could be a real poster child for progressive enhancement:
We do our best to ensure that content is accessible and enhanced progressively, with performance in mind. If JavaScript isn’t available or if the network is slow, then we deliver content via static fallbacks (for example, by linking directly to Google search), as well as a service worker that persistently stores CSS, JavaScripts, SVGs, font files and other assets in its cache.
Yesterday was a good day with Amber. She’s been marking up her CV and it was the perfect opportunity to take a deep dive into HTML.
A website dedicated to one of the most, um, interesting solutions to the Yucca Mountain nuclear waste storage problem:
- Engineer cats that change colour in response to radiation.
- Create the culture/legend/history that if your cat changes colour, you should move some place else.
There are T-shirts!
This ties in nicely with the new talk I’m doing on evaluating technology. Zell proposes a five-step process:
- Figure out what [insert tool] does.
- Figure out what sucks right now
- Determine if it’s worth the investment
- Learn it (if it’s worth it)
- Differentiate opinions from facts
Most of the examples he gives are tools used before deployment—I have a feeling that different criteria should apply when weighing up technologies written directly in user-facing code (HTML, CSS, and JavaScript).
I can forgive our answer machines if they sometimes get it wrong. It’s less easy to forgive the confidence with which the bad answer is presented, giving the impression that the answer is definitive. That’s a design problem.
Ellen goes through the principles behind the tone of voice on the new Clearleft site:
- Our clients are the heroes and heroines, we facilitate their journey.
- Speak as an individual doing whatever it is you love. Expose lovable details.
- Use the imperative, kill the “-ing”.
- Be evocative and paint the picture. Show don’t tell.
- Be a practical friend.
- Be inquisitive. Ask smart questions that need solving.
An online training course that will banish all fear of the command line, expertly delivered by the one and only Remy Sharp.
For designers, new developers, UX, UI, product owners and anyone who’s been asked to “just open the terminal”.
Take advantage of the special launch price—there are some serious price reductions there.
A Mac app for converting PNGs and JPEGs to WebP.
Excellent and practical advice for before, during, and after research sessions and usability tests.
We examine the possibility that Fast Radio Bursts (FRBs) originate from the activity of extragalactic civilizations. Our analysis shows that beams used for powering large light sails could yield parameters that are consistent with FRBs.
I’m guessing Paul Gilster may have thoughts on this.
This is a nice understandable explanation of the basics of React.
There’s a real skill in explaining something so clearly that even n00bs like me can understand it.
And here’s another reason why password rules are bullshit: you’re basically giving a list of instructions to hackers—the password rules help them narrow down the strings they need to brute force.
Following on from Ire’s post about linting HTML with CSS, here’s an older post from Ebay about how being specific with your CSS selectors can help avoid inaccessible markup getting into production.
Josh gives a thorough roundup of the Interaction ‘17 event he co-chaired.
“I think I’ve distilled what this conference is all about,” Jeremy Keith quipped to me during one of the breaks. “It’s about how we’ll save the world through some nightmarish combination of virtual reality, chatbots, and self-driving cars.”
Tim watched the panel discussion at AMP Conf. He has opinions.
Optimistically, AMP may be a stepping stone to a better performant web. But I still can’t shake the feeling that, in its current form, it’s more of a detour.
Here’s the panel I was on at the AMP conference. It was an honour and a pleasure to share the stage with Nicole, Sarah, Gina, and Mike.
Smart use of attribute selectors in CSS to catch mistakes in HTML.
A nasty service that Harry noticed in his role as chronicler of dark patterns—this exploits the way that browser permissions are presented below the line of death.
Bruce widens our horizons with this in-depth look at where and how people are accessing the web around the world.
In this article, we’ve explored where the next 4 billion connected people will come from, as well as some of the innovations that the standards community has made to better serve them. In the next part, we’ll look at some of the demand-side problems that prevent people from accessing the web easily and what can be done to overcome them.
To be clear, every company currently does some form of this tracking of users. There would simply be no other way to measure operations. But Facebook has quite clearly been tiptoeing outside the bounds of what is ethically acceptable data business practices for a while.
A thorough round-up of Facebook’s current data collection practices and what you can do about it.
Absolute gold dust from Mike!
I think that having regular 1:1s is really important, but I’m sure I’m not doing them as effectively as I could—the advice in here is going to be invaluable.
There are three types of employees in the world when it comes to disclosing issues:
- Those who will always tell you about problems.
- Those who will never tell you about problems.
- Those who will tell you about problems when asked in the right way.
I love my ones and am frustrated by my twos, but I feel like at least 9 out of 10 people are actually threes.
A damning assessment of Tim Berners-Lee’s defeatist portrayal of the W3C:
No matter which side is right, the W3C faces an existential crisis.
Either:
- The W3C is a shepherd of the web for all, the web on everything, and a web of trust. But now it is fundamentally compromising its own principles in the name of maintaining industry relevance.
- Or, the W3C is merely an industry body for browser vendors to collaborate and its mission statement is nothing more than PR to increase buy-in from the smaller, largely powerless, members.
Both can’t be true. Neither is good news for the organisation.
Thinking of writing a book? Here’s some excellent advice and insights from Yaili, who only went and wrote another one.
Let me say this first: writing a book is hard work. It eats up all of your free time and mental space. It makes you feel like you are forever procrastinating and producing very little. It makes you not enjoy any free time. It’s like having a dark cloud hanging over your head at all times. At. All. Times.
This is really good fun! And thanks to service workers, it works offline too.
The rounds are:
An interview with Batesy that gives a nice insight into life at Clearleft.
He’s sketching mad, that one!
An alternative history of technology, emphasising curation over innovation:
We start to see the intangibles – the standards and ideologies that help to create and order technology systems, making them work at least most of the time. We start to see that technological change does not demand that we move fast and break things. Understanding the role that standards, ideologies, institutions – the non-thing aspects of technology – play, makes it possible to see how technological change actually happens, and who makes it happen.
Fear and concrete in Las Vegas: a great piece of infrastructure reportage by Georgina.
Much as I respect Tim Berners-Lee, his logic here is completely flawed. First of all, treating DRM as though it’s an implacable force of nature is a category error. Secondly, EME doesn’t in any provide a standardised solution: it provides a sandbox for each DRM vendor to inject their own proprietary solution.
A really inspiring post by Jen outlining all the benefits of the new CSS layout features …and the problems with thinking framework-first.
I know a lot of people will think the “best” way to use CSS Grid will be to download the new version of Bootstrap (version 5! now with Grid!), or to use any one of a number of CSS Grid layout frameworks that people are inevitably going to make later this year (despite Rachel Andrew and I begging everyone not to). But I don’t. The more I use CSS Grid, the more convinced I am that there is no benefit to be had by adding a layer of abstraction over it. CSS Grid is the layout framework. Baked right into the browser.
These icons-as-a-service could be really useful for making quick’n’dirty HTML prototypes.
Danielle and Mark have been working flat out on Fractal. Here’s the roadmap they’re working to.
Unsurprisingly, I completely and utterly agree with Ethan’s assessment here:
I’ve written some code that’s saying, “Once the screen is this size and the element appears in a different, smaller container, use a narrower layout on this element.”
But, well, that’s weird. Why can’t we apply styles based on the space available to the module we’re designing, rather than looking at the shape of the viewport?
I also share his frustration with the “math is hard; let’s go shopping” response from browser vendors:
There’s an incredible clamor for container queries, with folks from every corner of the responsive community asking for something that solves this problem. So personally, I’d love to see at least one browser vendor partner with the RICG, and get properly fired up about this.
We had to drag browser makers kicking and screaming to responsive images (to this day, Hixie maintains it’s not a problem that needs solving) and I suspect even more activism is going to be needed to get them to tackle container queries.
A nice rundown of some of the fun you can have with viewport units.
I’m very glad the problems with vh
units I wrote about a little while back is getting fixed in Chrome for mobile.
Dan describes his approach to maintainable CSS. It’s a nice balance between semantic naming and reusable styles.
Warning: the analogies used here might make you very, very hungry.
A lovely piece of early web history—Olia Lialina describes the early Net Art scene in 2000.
The address bar is the author’s signature. It’s where action takes place, and it’s the action itself. The real action on the web doesn’t happen on the page with its animated GIFs or funny scripts, it’s concentrated in the address bar.
And how wonderful that this piece is now published on Rhizome, an online institution so committed to its mission that it’s mentioned in this seventeen year old article.
How style tiles can work great in combination with content prototypes:
Surprisingly, it helps clients understand the HTML content prototype better. They now clearly see the difference and the relationship between content and design. In general it helps me explain the content-first process better and it helps them make more sense of it.
Jason revisits responsive images. On the whole, things are looking good when it comes to browser support, but he points out that scrset
’s precursor in CSS—image-set
seems to have dropped off the radar of most browser makers, which is a real shame.