SEO and Location

This is just a baby thought I had about SEO.

I overheard some folks at the gym I go to talking about SEO. It was a part-owner of the gym, talking about an SEO firm they were in contact with to help them with the gym website and reaching more people. A concern all businesses share: how do we sell to more people.

In the context of a gym, sales will be limited to a pretty narrow geographic region. With …


SEO and Location is a post from CSS-Tricks

​Content doesn’t need to delay website launches

Whether content is late, structured differently to the design or lost in email threads – content always gets the blame for website project delays. Now you can use GatherContent to organize and produce website content without the chaos. 1000s of teams worldwide use GatherContent to implement a structured process for content that helps launch website projects on time.

GatherContent integrates with WordPress, Drupal, Sitecore, Kentico, AEM, Sitefinity, Umbraco, and more!

See how GatherContent can streamline your website content production – …


​Content doesn’t need to delay website launches is a post from CSS-Tricks

Container Query Discussion

Right now, we have the power to write CSS that only applies when the browser window itself is at certain widths or heights. Breakpoints, as it were. Super useful. What we don’t have (natively) is the ability to write conditional CSS based on any particular elements (or “containers”) properties.

It’s going on 2 years since the RICG decided to tackle this. I’m not exactly sure what the status is there. It seems a bit on pause, but that doesn’t …


Container Query Discussion is a post from CSS-Tricks

Using DevTools to Tweak Designs in the Browser

Let’s look at some ways we can use the browsers DevTools to do design work. There are a few somewhat hidden tricks you mind find handy!

Toggling Classes With Checkboxes

This is useful when trying to pick a design from different options or to toggle the active state of an element without adding the class manually in DevTools.

To achieve this, we could use different classes and scope styles inside them. So if we want to see different options for …


Using DevTools to Tweak Designs in the Browser is a post from CSS-Tricks

Building Performant Expand & Collapse Animations

It’s starting to be pretty common knowledge that there are only 2 things you can animate cheaply in CSS: opacity and transforms. Anything else, you run a high risk of that animation/transition being choppy. Fortunately, there is a ton of animation possibility with those properties, especially since transform can move and resize elements any-which-way.

You can even get tricky and fake the animating of other properties with transforms. In this tutorial on the Google Chrome Developers Blog, Paul Lewis and …


Building Performant Expand & Collapse Animations is a post from CSS-Tricks

On Writing Feature Requirements

I have been asked to lead product development on a team. This is somewhat of a new journey for me because I’m generally used to calling myself a web designer rather than a product manager or strategist.

The toughest part of this job for me has been organizing my thoughts. I’ve written an executive summary for the product we’re building, done some competitive research and even dusted off my limited MBA education for a SWOT analysis. Oh yeah, now …


On Writing Feature Requirements is a post from CSS-Tricks

Making Animations Wait

I recently launched a CSS animation course for designers and developers wanting to improve their web animation skills. While building the course, I ran into the issue where content would animate before assets had downloaded. This article covers the approach I put together to fix the problem and ensure all animations played when expected.

We’ve all been there. For example, we want to fade in a hero header on load, so we add the fade-in keyframes, setting up the animation, …


Making Animations Wait is a post from CSS-Tricks

Book Release: SVG Animations

Our own Sarah Drasner has published a book! You can grab it from the O’Reilly website or Amazon.

If you need a little convincing, I figured I would post the foreword I wrote for the book here, then you can continue reading over on the O’Reilly site.

Foreword

Have you ever learned a new word, then had the opportunity to use that word in the perfect situation come up a number of times that week? That’s what it feels …


Book Release: SVG Animations is a post from CSS-Tricks