Dock Show & Tell

Someone wrote in asking about some icons in my Dock. I figured that might be a fun thing to share, and y'all can follow suit and share yours as well. I know "Docks" are a little Mac-centric, but feel free to share your most used apps on other platforms as well. I bet this changes quite a bit over the years, so it will be interesting to re-do this in years to come and see how it changes.

(more…)

Methods for Controlling Spacing in Web Typography

If you were developing sites in 2006, then you may have worked with a designer like me who was all up in your business about fonts not looking exactly the same in the browser as they did in mockups.

Then you may have tried explaining to me the pains of cross-browser compatibility and how different browsers render fonts differently from one another. In response, I likely would have sent you an image file that contains the content instead to make sure everything looked the same in all browsers. Yes, I was one of those designers.

Web fonts have come a very long way since then and we now have tools to tweak the way fonts render in browsers. Some have been around for quite a while. I remember my mind nearly bursting with excitement when I discovered FitText.js and Lettering.js way back when.

There are still plenty of situations today where adjusting fonts is needed to ensure the best legibility despite having all these fancy tools. We're going to cover a few of those in this post along with methods for how to deal with them.

(more…)

System Fonts in SVG

There was a time when the smart move in picking fonts for a website was to a font-family that was supported across as many platforms as possible. font-family: Tahoma; and whatnot. Or even better, a font stack that would fall back to as-similar-as possible stuff, like font-family: Tahoma, Verdana, Segoe, sans-serif;.

These days, an astonishing number of sites are using custom fonts. 60%!

No surprise, there is also a decent amount of pushback on custom fonts. They need to be downloaded, thus there are performance/bandwidth hits. There is loads of nuance on how you load them.

Also no surprise, there is some advocacy for the return to local fonts. Fast! Good enough! Let's look at that for a sec, then also look at using them within SVG.

(more…)

Accessible SVGs in High Contrast Mode

The following is a guest post by Eric Bailey. You know how people change settings sometimes to make it easier to use for them? For example, they bump up the default font size in their browser so it's easier for them to read. As web designers, we like to accommodate that. We consider it good accessibility. The same goes here. Some people on Windows enable "High Contrast Mode" to make their computer screen easier for them to work with. Will our important SVG files hold up to the change? Let Eric show you.

(more…)

Inky and Slinky

Inky is kinda like a preprocessor for HTML created by Zurb, specifically designed for responsive emails.

I'm sure a lot of us have hand-coded HTML emails (I do it regularly) and know that it's typically <table></table> soup. It's not even just the tables that are annoying, but the fact that there are so many of them nested to do even fairly simple things it's hard to keep straight.

Inky's appeal is pretty clear from the first demo in their docs:

(more…)

Reframe.js Notes

FitVids.js is still a perfectly workable mini plugin for making videos (or anything) responsive. You need it, or something like it, for sites that have things like YouTube or Vimeo videos, Instagram embeds, or really anything that's not responsive in the aspect-ratio sense. <img />/<video></video> resize their width/height in an aspect ratio friendly way, <iframe></iframe>/<canvas></canvas>/<object></object> do not.

Reframe.js is kind of a modernized version of FitVids.

(more…)

Web Animation Workshops  

I’m thrilled to announce a brand new workshop series I’m starting with Val Head about web animation! We’ll be taking two-day workshop around to different cities starting this November, starting with Austin and New York. Whether you’re a beginner or you’ve been diving into animation already, this course won’t just get you started- you’ll leave with all the tools necessary to make subtle and beautiful web animations, and how to pick the right tools for the job.

Val and I both have been speaking and giving workshops around the world, and together we make a venn diagram of strength and knowledge about how to animate on the web. We’ll be covering everything from theory, to technique, to bug fixes and cross-browser stability. We both focus on accessibility and performance. You’ll learn how to make great animation decisions both from a design and technology perspective. We’ll cover working with SVG, CSS, and JavaScript technologies, both native and API. We’ll discuss complex animations, responsive animations, and UX animations, and go over when to use each. You won’t find this much web animation knowledge packed into one workshop anywhere else!

To make sure you get as much out of these workshops as possible we’re keeping the the class sizes small. Each workshop is limited to 40 participants and will include hands-on exercises to get you started.

From WordPress to Apple News, Instant Articles, and AMP  

I managed to get CSS-Tricks publishing to Apple News (example link), Instant Articles (example link), and AMP (example link). The linked up article is a writeup of how that all works, starting with this self-hosted WordPress site.

Not a far cry from an RSS feed. It's the idea behind IndieWeb:

POSSE is an abbreviation for Publish (on your) Own Site, Syndicate Elsewhere.

POSSE is about staying in touch with current friends now, rather than the potential of staying in touch with friends in the future.

#149: A Quick Intro to Pattern Lab Node with Brian Muenzenmeyer

In this screencast I pair up with Brian Muenzenmeyer who, among other things, works on Pattern Lab. Specifically, the Node version of Pattern Lab, along with Geoff Pursell.

I should point out: this screencast barely scratched the surface of what Pattern Lab offers. It's not a comprehensive overview. Brian said a recent 8 hour workshop couldn't even cover it all. The topics covered in this screencast are:

  1. What is Pattern Lab?
  2. Why would I use it?
  3. Getting it
Watch Video →

We have a pretty good* newsletter.