✻ Introducing CSS Scroll Snap Points: Sarah Drasner on how to support, design and polyfill scrolling snap points in CSS. Snap points are a native feature:
This was WAY more controversial than we thought it would be! "Don't mess with my scrolling", "Scroll-jacking", "Do not change default behaviors", they say. Certainly a discussion worth having. Here's one to follow on Twitter.
✻ Templates are easy to change. Content usually isn’t: Chris examines the important differences between writing markup in a content field of a CMS and the sort of markup that is used inside a template.
This one wasn't so controversial! Lots of agreement, but also lots of sentiment that this is still a widespread problem.
✻ How The Heck Do You Hire a Web Design Agency?: Chris takes a look at the problems that our clients might face when looking for an agency. Putting these problems and difficulties into perspective is sure to help us communicate our skills more effectively.
The comment thread on this one has some wonderful points.
✻ Learning to Use Google Analytics More Effectively at CodePen: Philip Walton and Chris team up to e details the how/what/why of implementing analytics on CodePen, and describes some useful tricks to more accurately visualize that data.
Highly recommended: watch the video. It's a pairing of Philip and Chris explaining exactly how the Google Analytics was integrated and how to get at the data.
✻ Right Click Logo to Show Logo Download Options: when you click the logo on the InVision website a nifty modal shows a variety of options for downloading the logo. Here’s one very simple/no-dependencies way to replicate that pattern.
What we’ve been reading, listening and watching
Design for Real Life by Eric Meyer and Sara Wachter-Boettcher is now available from A Book Apart:
You can’t always predict who will use your products, or what emotional state they’ll be in when they do. But by identifying stress cases and designing with compassion, you’ll create experiences that support more of your users, more of the time.
Roel Nieskens on the process of building a multi-color font with SVG:
Typography on the web is in single color: characters are either black or red, never black and red. In the past, several font formats flirted with color options, but none of those techniques got much traction. Then emoji hit the scene, became part of Unicode, and therefore could be expressed by characters — or “glyphs” in font terminology. The smiley, levitating businessman and the infamous pile of poo became true siblings to letters, numbers and punctuation marks.
And finally, back in 2014, Jeff Eaton described the peculiar relationship between markup and a content management system:
Clean, semantic markup is important, but it won’t solve complex structural problems...At its heart, the problem is a vocabulary mismatch. While standard HTML is rich enough for a designer to represent complex content, it isn’t precise enough to describe and store the content in a presentation-independent fashion. This is why WYSIWYG tools can make the problem worse: rather than shielding content creators from the complexity of markup, they make it easier to describe content using the wrong vocabulary.
In other news around the web
A note from the archives
Pouring over the archives revealed this little gem of a pattern: the email domain datalist helper. When someone types in their email address into a field then a list of suitable email domains pops up underneath:
A good idea in production? Maybe, maybe not. It's always worth considering new interactions and new design patterns though.
What have you learnt this week?
Chris Coyier: I was playing around with mix-blend-mode for some reason. If I was a betting man, I'd say this property is going to go through a super trendy period. You can get some nice looking effects with it that feel pretty fresh, for the web.
Anyway, a related property is isolate, and I was having a really hard time figuring out just what the heck it did. After way too many hours thinking on it, I came across Maria Antonietta Perna's article on mix-blend-mode that had a proper demo.
Ultimately, I think this explains it: It's a way to turn off mix-blend-mode, but from a parent element rather than needing to select the element with blending directly. I updated our docs to include a graphic that I made to help myself understand.
Until next month!