Loading is a UX surface. People don’t rage at “waiting” as much as they rage at uncertainty. If you want your UI to feel calm, fast, and expensive, pick the loading pattern that answers the user’s real question in that moment: Did it register? Is it working? Am I safe to keep going? The 4-variable decision (use this every time) Duration: instant, short, long Predictability: do we know what will show up (shape) and ro...

You’re probably wondering what you can and can’t do with CSS. The answer? You can do a lot. From loading animations to button micro interactions that make UX a breeze, from progress bars to smooth animated hamburger menus and from Google Maps-style markers to Post-it animations, CSS3 used correctly will deliver a fantastic user experience and will use browser optimiz...

Bootstrap 4 is in alpha release and has a brand new set of media queries and breakpoints. Where Bootstrap 3 had them in pixels, the new release of the popular responsive framework boasts breakpoints in ems. Let's harness the power of these new media queries to serve an image of the right size based on the device a user views our site on. We're going to save a lot of bandwidth for the small devices...

Animation on the web has changed. It’s being moved from the realm of UI design and decoration, to the province of UX design. Where once it was a frivolity, it’s becoming an indispensable tool. No more dancing baby gifs. We’re using animation to tell users what’s going on in our interfaces, and why. We’re using it to tell them where to go and what to do next.  And yeah, we’re still making things move around on the screen for fun. This is all good ...

Every Grunt project averages 20 plugins per build. And - if you ever used Grunt, and chances are you have - you know it can ramp up to 30 plugins very quickly. Problem The standard Grunt way of loading plugins is adding a grunt.loadNpmTasks for each plugin you use. They look like this: