53% of mobile visits leave a page that takes longer than 3 seconds to load. That means that a large number of visitors probably abandoned these sites because they were staring at a blank screen for 3 seconds, said “fuck it,” and left approximately half way before the page showed up. The fact that the next page interaction would have been quicker—assuming all the JS files even downloaded correctly in the first attempt—doesn’t amount to much if they didn’t stick around for the first page to load. What was gained by putting the business logic in the front end in this scenario?
Monday, March 25th, 2019
Wednesday, March 20th, 2019
Ah, what a wonderful treasure trove this is! PDF scans of Apollo era press kits from a range of American companies.
- Official NASA
- Lunar Module
There’s something so fascinating about the mundane details of Isolation/Quarantine Foods for Apollo 11 Astronauts from Stouffer’s.
Sunday, March 10th, 2019
Jason contemplates his two decades of blog posts, some of which he now feels very differently about:
Tim Berners-Lee’s idea that cool URIs don’t change is almost part of my DNA at this point, so deleting them seems wrong. Approximately no one ever reads any post on this site that’s more than a few years old, but is that an argument for or against deleting them? (If a tree falls in the woods, etc…) Should I delete but leave a note they were deleted? Should I leave the original posts but append updates citing my current displeasure?
Monday, March 4th, 2019
Slow Design for an Anxious World by Jeffrey Zeldman
I’m at An Event Apart in Seattle, ready for three days of excellence. Setting the scene with the first talk of the event is the one and only Jeffrey Zeldman. His talk is called Slow Design for an Anxious World:
Most web pages are too fast or too slow. Last year, Zeldman showed us how to create design that works faster for customers in a hurry to get things done. This year he’ll show how to create designs that deliberately slow your visitors down, helping them understand more and make better decisions.
Learn to make layouts that coax the visitor to sit back, relax, and actually absorb the content your team works so hard to create. Improve UX significantly without spending a lot or chasing the tail lights of the latest whiz-bang tech. Whether you build interactive experiences or craft editorial pages, you’ll learn how to ease your customers into the experience and build the kind of engagement you thought the web had lost forever.
I’m going to attempt to jot down the gist of it as it happens…
Jeffrey begins by saying that he’s going to slooooowly ease us into the day. Slow isn’t something that our industry prizes. Things change fast on the internet. “You’re using last year’s framework!?” Ours is a newly-emerging set of practices.
Slow is negative in our culture too. We don’t like slow movies, or slow books. But somethings are better slow. Wine that takes time to make is better than wine that you produce in a prison toilet in five days. Slow-brewed coffee is well-brewed coffee. Slow dancing is nice. A slow courtship is nice. And reading slowly is something enjoyable. Sometimes you need to scan information quickly, but when we really immerse ourselves in a favourite book, we really comprehend better. Hold that thought. We’re going to come to books.
Fast is generally what we’re designing for. It’s the best kind of design for customer service designs—for people who want to accomplish something and then get on with their lives. Fast is good for customer service designs. Last year Jeffrey gave a talk last year called Beyond Engagement where he said that service-oriented content must be designed for speed of relevancy. Speed of loading is important, and so is speed of relevancy—how quickly can you give people the right content.
But slow is best for comprehension. Like Mr. Rogers. When things are a little bit slower, it’s kind of easier to understand. When you’re designing for readers, s l o w i t d o w n.
How do we slow down readers? That’s what this talk is about (he told us it would be slow—he only just got to what the point of this talk is).
Let’s start with a form factor. The book. A book is a hack where the author’s brain is transmitting a signal to the reader’s brain, and the designer of the book is making that possible. Readability is more than legibility. Readability transcends legibility, enticing people to slow down and read.
This is about absorption, not conversion. We have the luxury of doing something different here. It’s a challenge.
Remember Readability? It was designed by Arc90. They mostly made software applications for arcane enterprise systems, and that stuff tends not to be public. It’s hard for an agency to get new clients when it can’t show what it does. So they decided to make some stuff that’s just for the public. Arc90 Labs was spun up to make free software for everyone.
Readability was like Instapaper. Instapaper was made by Marco Arment so that he could articles when he was commuting on the subway. Readability aimed to do that, but to also make the content like beautiful. It’s kind of like how reader mode in Safari strips away superfluous content and formats what’s left into something more readable. Safari’s reader mode was not invented by Apple. It was based on the code from Readability. The mercury reader plug-in for Chrome also uses Readability’s code. Jeffrey went around pointing out to companies that the very existence of things like Readability was a warning—we’re making experiences so bad that people are using software to work around them. What we can do so that people don’t have to use these tools?
Craig Mod wrote an article for A List Apart called A Simpler Page back in 2011. With tablets and phones, there isn’t one canonical presentation of content online any more. Our content is sort of amorphous. Craig talked about books and newspapers on tablets. He talked about bed, knee, and breakfast distances from the body to the content.
- Bed (close to face): reading a novel on your stomach, lying in bed with the iPad propped up on a pillow.
- Knee (medium distance from face): sitting on the couch, iPad on your knee, catching up on Instapaper.
- Breakfast (far from face): propped up at a comfortable angle, behind your breakfast coffee and bagel, allowing hands-free news reading.
There’s some correlation between distance and relaxation. That knee position is crucial. That’s when the reader contemplates with pleasure and concentration. They’re giving themselves the luxury of contemplation. It’s a very different feeling to getting up and going over to a computer.
So Jeffrey redesigned his own site with big, big type, and just one central column of text. He stripped away the kind of stuff that Readability and Instapaper would strip away. He gave people a reader layout. You would have to sit back to read the content. He knew he succeeded because people started complaining: “Your type is huge!” “I have to lean back just to read it!” Then he redesigned A List Apart with Mike Pick. This was subtler.
Medium came along with the same focus: big type in a single column. Then the New York Times did it, when they changed their business model to a subscription paywall. They could remove quite a bit of the superfluous content. Then the Washington Post did it, more on their tablet design than their website. The New Yorker—a very old-school magazine—also went down this route, and they’re slow to change. Big type. White space. Bold art direction. Pro Publica is a wonderful non-profit newspaper that also went this route. They stepped it up by adding one more element: art direction on big pieces.
How do these sites achieve their effect of slowing you down and calming you?
Big type. We spend a lot of our time hunched forward. Big type forces you to sit back. It’s like that first moment in a yoga workshop where you’ve got to just relax before doing anything. With big type, you can sit back, take a breathe, and relax.
Hierarchy. This is classic graphic design. Clear relationships.
Minimalism. Not like Talking Heads minimalism, but the kind of minimalism where you remove every extraneous detail. Like what Mies van der Rohe did for architecture, where just the proportions—the minimalism—is the beauty. Or like what Hemingway did with writing—scratch out everything but the nouns and verbs. Kill your darlings.
Art direction. When you have a fancy story, give it some fancy art direction. Pro Publica understand that people won’t get confused about what site they’re on—they’ll understand that this particular story is special.
Whitespace. Mark Boulton wrote an article about whitespace in A List Apart. He talked about two kinds of whitespace: macro and micro. Macro is what we usually think about when we talk about whitespace. Whitespace conveys feelings of extreme luxury, and luxury brands know this. Whitespace makes us feels special. Macro whitespace can be snotty. But there’s also micro whitespace. That’s the space between lines of type, and the space inside letterforms. There’s more openness and air, even if the macro whitespace hasn’t changed.
Jeffrey has put a bunch of these things together into an example.
To recap, there are five points:
- Big type
- Art direction
There are two more things that Jeffrey wants to mention before his done. If you want people to pay attention to your design, it must be branded and it must be authoritative.
Branded. When all sites look the same, all content appears equal. Jeffrey calls this the Facebook effect. Whether it’s a noble-prize-winning author, or your uncle ranting, everthing gets the same treatment on Facebook. If you’re taking the time to post content to the web, take the time to let people know who’s talking.
Authoritative. When something looks authoritative, it cues the reader to your authenticity and integrity. Notice how every Oscar-worthy movie uses Trajan on its poster. That’s a typeface based on a Roman column. Strong, indelible letter forms carved in stone. We have absorbed those letterforms into our collective unconcious. Hollywood tap into this by using Trajan for movie titles.
Jeffrey wrote an article called To Save Real News about some of these ideas.
And with that, Jeffrey thanks us and finishes up.
Tuesday, February 19th, 2019
If there are no specific reasons to build a single-page application, I will go with a traditional server-rendered architecture every day of the week.
Sunday, February 3rd, 2019
This documentary, made entirely with archive footage, looks like it will be amazing! I really hope I get to see it in a cinema.
Crafted from a newly discovered trove of 65mm footage, and more than 11,000 hours of uncatalogued audio recordings, Apollo 11 takes us straight to the heart of NASA’s most celebrated mission—the one that first put men on the moon, and forever made Neil Armstrong and Buzz Aldrin into household names.
Aw! What about Michael Collins‽ He’s always the Ringo of the mission, even though he was the coolest dude.
Thursday, January 31st, 2019
The cosmonaut counterparts of the Mercury women astronauts: Zhanna Yorkina, Irina Solovyova, Tatyana Kuznetsova, Valentina Ponomareva, and Valentina Tereshkova.
Ponomareva recalled there being no envy between the women in the squad. According to her, it was a healthy spirit of competition. Everyone did their best to be number one, but also supported each other’s efforts.
One of those cosmonauts went to space: none of the women training for the Mercury missions did. There would be a shockingly gap of twenty years between the launch of Valentina Tereshkova and the launch of Sally Ride.
Sunday, January 27th, 2019
A list of alternatives to Google’s products.
Friday, January 18th, 2019
This is an excellent case study!
The technical details are there if you want them, but far more important is consideration that went into every interaction. Every technical decision has a well thought out justification.
Tuesday, January 15th, 2019
I have to admit, I’m kind of nervous about this talk. It’s been quite a while since the last New Adventures, but it’s always had quite the cachet. I think I went to most of them. It’s quite strange—and quite an honour—to shift gears from attendee to speaker.
The talk I’ll be giving is called Building. That might be a noun. That might be a verb. You decide:
Every new medium looks to what has come before for guidance. Web design has taken cues from centuries of typography and graphic design. Web development has borrowed metaphors and ideas from the world of architecture. Let’s take a tour of some of the most influential ideas from architecture that have crossed over into the web, from pattern languages to responsive design. Together we’ll uncover how to build resilient, performant, accessible and beautiful structures that work with the grain of the materials of the web.
This talk builds upon the talk I gave at last year’s An Event Apart called The Way Of The Web. It also reflects many of the ideas in Resilient Web Design. When I gave a run-through of the talk at Clearleft last week, Andy called it a “greatest hits.” For a while there, I was feeling guilty about retreading some ground I’ve covered in previous talks and writings. Then I realised it was pretty arrogant of me to think that anyone in the audience would be familiar with any of it.
Besides, I’ve got a whole new avenue of exploration in this talk. It’s about language and metaphor—how we talk about what we do on the web. I’ve just finished giving another run-through at the Clearleft studio and I’m feeling pretty good about it. That’s good, because I find that giving a talk in a small room to a handful of colleagues is way more stressful than giving a talk to hundreds of people at a conference.
Just as I put together links related to last year’s talk, I figured I’d provide some hyperlinks for anyone interested in the topics raised in this new talk…
- Metaphors We Live By by George Lakoff and Mark Johnson
- Understanding Comics by Scott McCloud
- Creating Killer Websites by David Siegel
- Grid Systems in Graphic Design by Josef Müller-Brockman
- 101 Things I Learned in Architecture School by Matthew Frederick
- Architectural Intelligence by Molly Wright Steenson
- A Pattern Language by Christopher Alexander, Sara Ishikawa, Murray Silverstein with Ingrid King, Shlomo Angel and Max Jacobsen
- How Buildings Learn by Stewart Brand
- Where Good Ideas Come From by Steven Johnson
- The Clock of the Long Now: Time and Responsibility by Stewart Brand
- A Dao Of Web Design by John Allsopp
- Responsive Web Design by Ethan Marcotte
- Device Agnostic by Trent Walton
- The Work I Like by Ethan Marcotte
Sunday, January 6th, 2019
Wednesday, January 2nd, 2019
April 7th, 2019 is going to be the 50 year anniversary of the first ever Request for Comments, known as an RFC.
Darius Kazemi is going to spend the year writing commentary on the first 365 Request For Comments from the Internt Engineering Task Force:
In honor of this anniversary, I figured I would read one RFC each day of 2019, starting with RFC 1 and ending with RFC 365. I’ll offer brief commentary on each RFC.
Wednesday, December 5th, 2018
Never mind their recent data breach—the reason to avoid Quora is that it’s a data roach motel.
All of Quora’s efforts to lock up its community’s contributions make it incredibly difficult to preserve when that they go away, which they someday will. If you choose to contribute to Quora, they’re actively fighting to limit future access to your own work.
Sunday, November 25th, 2018
Friday, November 23rd, 2018
Flickr is removing anything over 1,000 photos on accounts that are not “pro” (paid for) in 2019. We highlight large and amazing accounts that could use a gift to go pro. We take nominations and track when these accounts are saved.
A time capsule for the long now. Laser-etched ceramic tablets in an Austrian salt mine carry memories of our civilisation in three categories: news editorials, scientific works, and personal stories.
You can contribute a personal story, your favorite poem, or newspaper articles which describe our problems, visions or our daily life.
Tokens that mark the location of the site are also being distributed across the planet.
As it turns out, some sites are much harder to archive than others. This article goes through the process of archiving traditional web sites and shows how it falls short when confronted with the latest fashions in the single-page applications that are bloating the modern web.
Thursday, November 8th, 2018
This is very, very good news. Following on from the recent announcement that a huge swathe of Flickr photos would soon be deleted, there’s now an update: any photos that are Creative Commons licensed won’t be deleted after all. Phew!
I wonder if I can get a refund for that pro account I just bought last week to keep my Creative Commons licensed Flickr pictures online.
Sunday, November 4th, 2018
I’ve got a lot of photos on Flickr (even though I don’t use it directly much these days) and I’ve paid up for a pro account to protect those photos, but I’m very worried about this:
Beginning January 8, 2019, Free accounts will be limited to 1,000 photos and videos.
That in itself is fine, but any existing non-pro accounts with more than 1000 photos will have older photos deleted until the total comes down to 1000. This means that anyone linking to those photos (or embedding them in blog posts or articles) will have broken links and images.
Tears in the rain.
Monday, October 8th, 2018
The fascinating results of Brad’s survey.
Personally, I’m not a fan of nesting. I feel it obfuscates more than helps. And it makes searching for a specific selector tricky.
That said, Danielle feels quite strongly that nesting is the way to go, so on Clearleft projects, that’s how we write Sass + BEM.