sparkline

Revealing ‘back to top’ button

Such a clever minimalist use of CSS!

Emily F. Gorcenski: How I Read 40 Books and Extinguished the World on Fire

I’ve found that there’s way more good people than bad. There’s way more people willing to help than willing to hurt. Some things are really scary but there’s way more people out there willing to guide us through the darkness than we think. The cynic in me wants to say that the “powers that be” want us to be endlessly doomscrolling and losing hope and snuffing out optimism. We shouldn’t give them what they want. There’s a lot of beauty in the world still within our grasp. We’re better when we’re poets, when we’re learners and listeners, when we’re builders and not breakers.

Fun Parallax Scrolling CSS for Matterday

This is such a great clear explanation from Lynn on how to add some tasteful parallax depth to scrolling pages.

Sticky CSS Grid Items | Melanie Richards

This is a useful technique that future me is almost certainly going to need at some point.

Static sites, slack and scrollytelling. | Clearleft

Cassie’s enthusiasm for fun and interesting SVG animation shines through in her writing!

Designing for Progressive Disclosure by Steven Hoober

Progressive disclosure interface patterns categorised and evaluated:

popups,
drawers,
mouseover popups (just say no!),
accordions,
tabs,
new pages,
scrolling,
scrolling sideways.

I really like the hypertext history invoked in this article.

The piece finishes with a great note on the MacNamara fallacy:

Everyone thinks metrics let us measure results. But, actually, they don’t. They measure only what they are measuring. Engagement, for example, is not something that can be measured, so we use an analogue for it. Time on page. Or clicks.

We often end up measuring what is quick, cheap, and easy to measure. Therefore, few organizations regularly conduct usability testing or customer-satisfaction surveys, but lots use analytics.

Even today, organizations often use clicks as a measure of engagement. So, all too often, they design user interfaces to generate clicks, so the system can measure them.

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; }

WICG/ScrollToTextFragment: Proposal to allow specifying a text snippet in a URL fragment

It looks (a more complex version of) fragmention might be coming to Chrome.

Native lazy-loading for the web | web.dev

The title is somewhat misleading—currently it’s about native lazy-loading for Chrome, which is not (yet) the web.

I’ve just been adding loading="lazy" to most of the iframes and many of the images on adactio.com, and it’s working a treat …in Chrome.

Using Hamburger Menus? Try Sausage Links · Bradley Taunt

Another take on the scrolling navigation pattern. However you feel about the implementation details, it’s got to better than the “teenage tidying” method of shoving everything behind a hamburger icon.

Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective · An A List Apart Article

This is a fascinating insight into what it’s like to use the web if you’ve got vertigo (which is way more common than you might think):

Really, there are no words to describe just how bad a simple parallax effect, scrolljacking, or even background-attachment: fixed would make me feel. I would rather jump on one of those 20-G centrifuges astronauts use than look at a website with parallax scrolling.

Every time I encountered it, I would put the bucket beside me to good use and be forced to lie in bed for hours as I felt the room spinning around me, and no meds could get me out of it. It was THAT bad.

Creating distraction-free reading experiences — Adrian Zumbrunnen

It’s our job as designers to bring clarity back to the digital canvas by crafting reading experiences that put readers first.

The Layouts of Tomorrow | Max Böck - Frontend Web Developer

A walkthrough of the process of creating a futuristic interface with CSS (grid and animation).

While this is just one interpretation of what’s possible, I’m sure there are countless other innovative ideas that could be realized using the tools we have today.

Lazy Loading Images and Video | Web Fundamentals | Google Developers

Jeremy Wagner offers a deep dive into lazy loading images (and video) with some advice for considering the no-JavaScript situation too.

Parallax scrolling with CSS variables | basicScroll

Don’t let the title fool you—this isn’t just for parallax scrolling (thank goodness!)—it’s for triggering any CSS updates based on scroll position. Using CSS custom properties makes a lot of sense. The JavaScript/CSS bridge enabled by custom properties is kind of their superpower. (That’s one of the reasons why I don’t like calling them “CSS variables” which makes them sound like Sass variables—they’re so much more than that!)

Your Interactive Makes Me Sick - Features - Source: An OpenNews project

Browsers have had consistent scrolling behavior for years, even across vendors and platforms. There’s an established set of physics, and if you muck with the physics, you can assume you’re making some people sick.

Guidelines to consider before adding swooshy parallax effects:

Respect the Physics

Remember that We Call Them “Readers”

Ask for Consent

Given all the work that goes into a powerful piece of journalism—research, interviews, writing, fact-checking, editing, design, coding, testing—is it really in our best interests to end up with a finished product that some people literally can’t bear to scroll through?

I’ve gotten a little tired of showing up to a Medium-powered site on a non-medium.com domain and getting badgered to Sign Up! or Get Updates! when I’m already a Medium user.

A Chrome extension to Make Medium Readable Again by:

Keeping the top navigation bar from sticking around

Hiding the bottom “Get Updates” bar completely

(Optionally) hiding the clap / share bar

(Optionally) loading all post images up front, instead of lazy loading as you scroll

Shame there isn’t a mobile version to get rid of the insulting install-our-app permabutton.

Sticky headers

A three-part series by Remy looking at one interface pattern (a sticky header) and how his code evolved and changed:

Link tags: scrolling

33