I've always loved 3D geometry. I began playing with CSS 3D transforms as soon as I noticed support in CSS was getting decent. But while it felt natural to use transforms to create 2D shapes and move/rotate them in 3D to create polyhedra, there were some things that tripped me up at first. I thought I might write about the things that surprised me and the challenges I encountered so that you might avoid the same.
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.
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.
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.
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.
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:
The following is a guest post by Erez Elias. Erez recently attended a WordCamp and wrote to me inspired to write something about WordPress. We agreed this was an interesting topic, and one I've been meaning to document myself as it's something I've done about 100 times in my life and there is always one little detail I gotta look up.
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.
<video></video> resize their width/height in an aspect ratio friendly way,
<object></object> do not.
Reframe.js is kind of a modernized version of FitVids.
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.
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.
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:
- What is Pattern Lab?
- Why would I use it?
- Getting it