Enter your email address below to receive our monthly newsletter straight to your inbox.

September 2014

We hear it a lot — "web apps aren't as slick as native apps." After much head-scratching we determined that animation in web design makes the difference between "meh" and "ooooh" — and even just fooling people into forgetting they're on the web. The best interfaces are invisible, seeking to blend into their environment like spies in a thriller. To that end, Motion UI in Foundation for Apps will help designers make their products look & feel like their compiled counterparts. Motion UI is a new set of gadgets designed to give you the edge when tackling design problems. Whether you're looking to shake things up or stir some interest in your work, the right motion can make your products memorable, and even more usable. This month we look at the different practices and reasons to give web apps — and even sites — an extra dimension of refinement.

Yeti bond 2

  • 1

    Motion UI Design Principles

    Motion and animation in design are like a license to thrill: We can use them for good or evil. Good UI designers know when to use animation to benefit humanity. Evil UI abuses the privilege.

  • 2

    Cool CSS Loading Effects for Grid Images

    So what can we do with motion? For one thing, you can make the loading-website experience more of an experience. These grid image effects are sure to turn some heads.

  • 3

    10 Handy CSS Animation Tools 2014

    How do we make CSS animations? Coding them by hand is a great way to learn, but after a while (or on a tight deadline) it's not practical. Most of us only need to learn twice. This article presents a bevy of CSS animation tools to help us build great products faster.

  • 4

    Animating Without jQuery

    CSS or JavaScript? Many designers will swear that CSS is the smoother, not to mention faster, method. But according to this post, that's because they compare CSS3 to jQuery.animate — not known for its efficiency. Which begs the question, how does JavaScript itself compare to CSS animation?

  • 5

    Optimize Web Content for Mobile

    Currently, detecting browser capabilities (such as size, platform and features) on the server side is nearly impossible. Nearly. You can bet your money — every penny — that throwing your hat into this technique will put you in good with your boss. This article describes a technique to use JavaScript and AJAX to figure out the best way to deliver the right content for improved user experiences.

  • 6

    Implementing CSS3 Animation Using SASS and jQuery

    As with any CSS, we can use Sass to make managing animation super easy. We found this post that explains how @mixins — sort of like quanta of Sass — and graceful degradation makes it possible.

  • 7

    Making a Case for Animations and Interactivity

    Motion! Animation! Cutting edge stuff! Playing with the latest techniques — even when not every browser supports it — is a long-standing tradition in web design. But that's hardly best practice. As this post explains, we can't forget that design is about communication. Great interfaces increase usability, define a brand, and create delight.

  • 8

    Simple Parallax Scrolling Effect

    These days we see parallax so often that it… well, it blends into the background. Is it what the doctor ordered? No. But it can look great on the big screen. For the uninitiated, this technique may seem a bit daunting. Luckily this article describes a simple approach to the illusion of simple 3D layouts.

  • 9

    Starting CSS Animations Mid-Way

    Most motions start at point A and end at point B. But sometimes we want several elements to start in different places on the screen. We might place ecommerce products, for example, in a grid and have them jump to a single shopping cart. Or we might want to apply a parallax effect to elements in the foreground. This article shows us the way.

  • 10

    Foundation for Apps: Motion UI is the New Flat

    Motion tells stories. Not Pixar-style, long and complicated, stories. More simple stories, like "hey, this content is different" or "yo, this item needs to be addressed" or "dude, that input was required." These stories are simple, adding excitement and context to the person using the app. And like diamonds, a good story lasts forever.

Stay on top of what's happening in responsive design with Responsive Reading.

Curious? Read Last Month's Edition »

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in