Hey All. Long time, no-see. I’m entering a new chapter of my career, focusing on honing my skills in UX design, while maintaining an active participant in the web development community.
I wrote a farewell blog over at Pennant.
Need my unique skill-set? I’m available!
Just amazing stuff here: The UX on This Small Child is Terrible by Leslie Ylinen
This past Sunday, on CBS News Sunday Morning, there was a feature on the quilt makers of Gee’s Bend. The quilts they produce are unique, with bold colors, chunky lines, and at times wild patterns. These expressive techniques make the final result look freehand, extemporaneous, yet meticulous and intentional.
Today I added native CSS masonry layout to the blog post items on the Home page. For now the feature is only available behind a flag in Firefox, but check in with MDN docs for when it receives broader support.
For progressive enhancement I’ve used the @supports query:
@supports (grid-template-rows: masonry) {
.parent-to-be-displayed-as-masonry {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: masonry;
grid-gap: 1rem;
}
}There are many properties that will influence the layout, but I haven’t tooled around with them.
I’ve redone the site, built the front end with VueJS, WordPress backend, and hosted on Netlify deployed from GitHub.
More details to follow.
I’ve added these packages:
I’ve employed these new-ish CSS rules:
Current Issues:
Roadmap:
ESPN has a interesting method of maintaining viewer interest on their site. It uses a mixture of scroll-spy via Intersection Observer API, article length progress bar, and URL updating method via the history.pushState().
As a visitor to ESPN website, you might click to read an article. Depending on the type of article it is, ESPN sends you to a feed that places the article at top. On desktop there is a left side column that has article headlines. Within this column, the current article is highlighted in white with a solid border on the left.
As you read the article and begin scrolling to reveal more text the left side border of the current article block becomes a progress bar. The bar shortens as you advance down the page until it reaches the end of the article. In the right side body area the visitor will see a subsequent article directly underneath the current article. This article will be related – very likely connected by the sport. In the example above the article is about soccer. So the next article is about soccer and will have a good chance of being of interest to you the visitor.
What happens when you scroll further down to begin reading this next article? Not much at first glance. But there is some subtle interactions happening both visually and behind the scenes. First, on the left side column, the original article block becomes grey, indicating that it has been visited and read. Second, in the same column, the next article highlights in white which indicates it is now the current article being viewed. This effect is known as scroll-spy – here is a simple jQuery library for that, and here is an article on how to use the Intersection Observer API if you don’t like jQuery. Third, the next article block receives the same left side border progress bar – here is a tutorial on how one might implement it on their own site. (And here is why you might NOT want to use it). These interactions happen visually, but are discreet so as not to turn your attention away from reading the next article.
Behind the scenes, there is something very cool happening. Immediately upon transition from one article to the next the URL updates in the browser. This benefits ESPN because if a reader wanted to share the story they can just copy-and-paste the URL from the browser. Updating the URL is a Javascript enhancement, see this tutorial for more information.
The combined effect of this type of news feed is that is distills the normal experience of navigating a website that publishes numerous articles. Usually the visitor arrives on an article, reads it, then is prompted to click on other articles that might be linked at the footer. ESPN, however, compresses this behavior into a click-free experience. It keeps the visitor immersed in their content rather than diverting their attention to manually interact with the UI.