Tag Archives: technique

A Comprehensive Guide To UX Research

(This is a sponsored article.) Before embarking upon the design phase of any project, it’s critical to undertake some research so that the decisions you make are undertaken from an informed position. In this third article of my series for Adobe XD, I’ll be focusing on the importance of undertaking user research.
Your job title might not be “design researcher”, but that doesn’t mean you shouldn’t at the very least inform yourself of your users and their needs by undertaking at least some initial scoping research before you embark upon a project.

View article:  

A Comprehensive Guide To UX Research

How to Turn a Long Landing Page Into a Microsite – In 5 Easy Steps

Landing pages can get really long, which is totally fine, especially if you use a sticky anchor navigation to scroll people up and down to different page sections. It’s a great conversion experience and should be embraced.

However, there are times when having a small multi-page site, known as a microsite (or mini-site) can offer significant advantages.

This is not a conversation about your website (which is purely for organic traffic), I’m still talking about creating dedicated marketing-campaign-specific experiences. That’s what landing pages were designed for, and a microsite is very similar. It’s like a landing page in that it’s a standalone, controlled experience, but with a different architecture.

The sketch below shows the difference between a landing page and a microsite.

The landing page is a single page with six sections. The microsite has a homepage and 5 or 6 child pages, each with a persistent global navigation to conect the pages.

They are both “landing experiences”, just architected differently. I’ve noticed that many higher education landing experiences are four-page microsites. The pharmaceutical industry tends to create microsites for every new product campaign – especially those driven by TV ads.

What are the benefits of a microsite over a long landing page?

To reiterate, for most marketing campaign use cases, a single landing page – long or short – is your absolute best option. But there are some scenarios where you can really benefit from a microsite.

Some of the benefits of a microsite include:

  1. It allows more pages to be indexed by Google
  2. You can craft a controlled experience on each page (vs. a section where people can move up and down to other sections)
  3. You can add a lot more content to a certain page, without making your landing page a giant.
  4. You can get more advanced with your analytics research as there are many different click-pathways within a microsite that aren’t possible to track or design for on a single page.
  5. The technique I’m going to show you takes an Unbounce landing page, turns it into a 5-page microsite.

How to Create a Microsite from a Long Landing Page

The connective tissue of a microsite is the navigation. It links the pages together and defines the available options for a visitor. I’ll be using an Unbounce Sticky Bar as the shared global navigation to connect five Unbounce landing pages that we’ll create from the single long landing page. It’s really easy.

First, Choose a Landing Page to Work With

I’ve created a dummy landing page to work with. You can see from the zoomed-out thumbnail on the right-hand side how long it is: 10 page-sections long to be specific. (Click the image to view the whole page in a scrolling lightbox.)

The five-step process is then as follows:

I’ll explain it in more detail with screenshots and a quick video.

  1. Create the microsite pages, by duplicate your landing page 5 times
  2. Delete the page sections you don’t want on each microsite page
  3. Create a Sticky Bar and add five navigation buttons
  4. Set the URL targeting of the Sticky Bar to appear on the microsite pages
  5. Add the Unbounce global script to your site
  6. Click “Publish” << hardly a step.

Step 1: Create Your Microsite Pages

Choose “Duplicate Page” from the cog menu on your original landing page to create a new page (5 times). Then name each page and set the URL of each accordingly. In the screenshot below you can see I have the original landing page, and five microsite pages Home|About|Features|FAQ|Sign Up.

Step 2: Delete Page Sections on Each Microsite Page

Open each page in the Unbounce builder and click the background of any page section you don’t want and hit delete. It’s really quick. Do this for each page until they only have the content you want to be left in them. Watch the 30 sec video below to see how.

Pro Tip: Copy/Paste Between Pages

There is another way to do it. Instead of deleting sections, you can start with blank pages for the microsite, and copy/paste the sections you want from the landing page into the blank pages. This is one of the least-known and most powerful features of Unbounce.

The best way is to have a few browser tabs open at once (like one for each page), then just copy and paste between browser tabs. It’s epic! Watch…

Step 3: Create the Navigation With a Sticky Bar

Create a new Sticky Bar in Unbounce (it’s the same builder for landing pages and popups). Add buttons or links for each of your microsite pages, and set the “Target” of the link to be “Parent Frame” as shown in the lower-right of this screenshot.

Step 4: Set URL Targeting

This is where the connective tissue of the shared Sticky Bar comes together. On the Sticky Bar dashboard, you can enter any URLs on your domain that you want the bar to appear on. You can enter them one-by-one if you like, or to make it much faster, just use the same naming convention (unique to this microsite/campaign) on each of the microsite page URLS.

I used these URLs for my pages:


For the URL Targeting, I simply set one rule, that URLs need to contain “pmm-micro”.
For the Trigger, I selected “When a visitor arrives on the page.”
for the frequency, I selected “Show on every visit.” because the nav needs to be there always.

Step 5: Add the Unbounce Script

We have a one-line Javascript that needs to be added to your website to make the Sticky Bars work. If you use Google Tag Manager on your site, then it’s super easy, just give the code snippet to your dev to paste into GTM.

Note: As this microsite solution was 100% within Unbounce (Landing Pages and Sticky Bar), you don’t actually have to add the script to your website, you can just add it to the each of the landing pages individually. But it’s best to get it set up on your website, which will show it on your Unbounce landing pages on that domain, by default.

Click Publish on #AllTheThings!

And that’s that!

You can see the final microsite here.
(Desktop only right now I’m afraid. I’ll set up mobile responsive soon but it’s 2am and this blogging schedule is killing me :D).

I’ve also written a little script that uses cookies to change the visual state of each navigation button to show which pages you’ve visited. I’ll be sharing that in the future for another concept to illustrate how you can craft a progress bar style navigation flow to direct people where you want them to go next!

A Few Wee Caveats

  • This use of a Sticky Bar isn’t a native feature of Unbounce at this point, it’s just a cool thing you can do. As such, it’s not technically supported, although our community loves this type of thing.
  • As it’s using a shared Sticky Bar for the nav, you’ll see it re-appear on each new page load. Not perfect, but it’s not a big deal and the tradeoff is worth it if the other benefits mentioned earlier work for you.
  • The close button on the Sticky Bar needs to be hidden (I need to bug a developer for some help and will add it back in here).

Aall in all, this type of MacGyvering is great for generating new ways of thinking about your marketing experiences, and how you can guide people to a conversion.

I’ve found that thinking about a microsite from a conversion standpoint is a fantastic mental exercise.

Have fun making a microsite, and never stop experimenting – and MacGyvering!

p.s. Don’t forget to subscribe to the weekly updates for the rest of Product Awareness Month.

Visit site – 

How to Turn a Long Landing Page Into a Microsite – In 5 Easy Steps

10 Simple Tips To Improve User Testing

(This is a sponsored post). Testing is a fundamental part of the UX designer’s job and a core part of the overall UX design process. Testing provides the inspiration, guidance and validation that product teams need in order to design great products. That’s why the most effective teams make testing a habit.
Usability testing involves observing users as they use a product. It helps you find where users struggle and what they like.

Excerpt from: 

10 Simple Tips To Improve User Testing

Using Social Media For User Research

Social media is one of the dominant forms of interactions on the Internet. Leading platforms such as Facebook and Twitter count hundreds of millions of users each month. In this article, I will show you how social media is a rich vein of data for user researchers. I will argue that it would be an oversight for an organization to treat social media as nothing more than an opportunity for customer service enquiries, help requests and brand advocacy.

Source article:  

Using Social Media For User Research

Becoming A Better Facilitator

Facilitation in the broadest sense means helping or enabling people to achieve a positive outcome. It’s an important and often under-appreciated skill for designers and other UX professionals to gain. It’s especially important as more teams embrace lean UX practices, which shift emphasis away from big deliverables toward facilitating outcomes such as continuous discovery and shared understanding.
Any kind of working session or meeting in which design decisions are being shaped needs a facilitator.


Becoming A Better Facilitator

What Are Progressive Web AMPs?

If you’ve been following the web development community these last few months, chances are you’ve read about progressive web apps (PWAs). It’s an umbrella term used to describe web experiences so advanced that they compete with ever-so-rich and immersive native apps: full offline support, installability, “Retina,” full-bleed imagery, sign-in support for personalization, fast, smooth in-app browsing, push notifications and a great UI.
A few of Google’s sample progressive web apps.

Visit source:  

What Are Progressive Web AMPs?


PPC Landing Page Magic: Secrets Revealed [GIFOGRAPHIC]

This marketing infographic is part of KlientBoost’s 25-part Marketing Advent Calendar. Sign up here to receive a new gifographic once a day in your inbox.

As a kid who was fascinated with the magic store, it’s kind of surprising that I still don’t know how magicians do certain tricks. But it’s probably because as an adult, I’ve spent most of my time trying to master one magic trick:

Making more money appear — both for my PPC agency and for our clients.

How do we do it?

A large part of the magic comes from the landing pages our CRO team designs and tests. And today I want to reveal all the tricks that go into a high-converting landing page to make you the David Copperfield of PPC landing page testing.

(Keep reading below the gifographic for more explanation.)


Geographic specificity: Get more local love

When your PPC campaigns and landing page work together on a geographic level, you unleash serious conversion potential.

To help illustrate, imagine these two scenarios:

  1. A nationwide PPC campaign that goes to a nationwide landing page
  2. A city-specific PPC campaign that goes to a city-specific landing page

Which one do you think will perform better?

I think the second would — and we have 100+ clients that would agree. By becoming more granular with your PPC campaigns, you’re able to make the visitor believe that you’re local (even if you’re not).

Take this example of using geographic-specific area code phone numbers on landing pages versus a generic 800 number:

This table shows conversion rates for landing pages displaying generic 800 phone number versus landing pages with a local number. Image source.

And phone numbers are only a start. Test geographically-specific PPC ad copy, landing page headlines and even visuals.

We use Unbounce’s Dynamic Text Replacement (DTR) to help us easily launch dynamic landing pages and prevent traffic dilution that slows down statistical significance.

Which brings us to our next trick…

Dynamic text replacement: Less work, more fun

Dynamic text replacement allows you to swap out the text on your landing page with keywords from your PPC campaigns.

By making small adjustments to your PPC campaign URLs, you can make one landing page specific to hundreds of keywords you’re bidding on, resulting in a landing page that show exactly what visitors searched for:

With DTR, you can turn one landing page into 100 landing pages.

Here’s an example of an outdoors company using DTR to “magically” create super-relevant landing pages.

If the user searched for “hiking backpack,” this is the landing page they’ll see:


And if they searched for “trekking backpack”?



Notice how nothing changed but the text on those two pages?

Read a full explanation of this “magic trick” here.

Multi-step landing pages

You’ve heard how reducing the amount of form fields will help improve your conversion rates, right?


But what if I told you that there’s a way to add more fields (thereby better qualifying prospects) while still improving conversion rates?

That’s some true David Copperfield s*** right there.

I know that’s not David Copperfield. Just trying to see if you’re awake. GIF source.

Multi-step landing pages can help you achieve just this by asking for a little information upfront, then progressively asking for more and more. Dr. Robert Cialdini, author of Influence: The Power of Persuasasion, explains that this technique works because of a principle he calls Commitment and Consistency:


On our own landing pages, we start by asking questions that are easy to answer, and then progressively get more personal.

We’ve found that these “micro conversions” make it more likely for the prospect to then later fill out more personal details such as their name and contact information:

We’ve built all our lead gen efforts around multi-step landing pages. Image source.

Call to action temperature testing

A common mistake a lot of our clients make prior to working with us is that they use the same call to action for all their PPC traffic: search, social, video and display.

This is problematic because different types of PPC traffic have different levels of intent.

For example, people seeing your ads through the Search Network can be people really close to converting (depending on keyword intent), but the Display Network typically has visitors who are a few steps behind. (I wrote about this on the Unbounce blog before.)

We have found that display leads are typically colder than leads acquired through the search network.

If a certain PPC channel isn’t converting for you, sometimes switching up the offer — and the call to action — can make all the difference.

We’ve found that the offers on the left work well for cold leads, whereas the offers on the right work better for warm leads:

We made this to use internally at KlientBoost.

As with most PPC tactics, this requires a bit of testing. And don’t forget to have a means of nurturing cold leads down the funnel.

Local visuals: Make ‘em feel at home

Remember how you can improve conversion rates by changing phone numbers and headlines to appear more local to the visitor’s location?

You can also do that with your hero shot and other visuals you’re using on your landing page.

We ran a test for a roofing company who advertised in several states. Because we were able to split up the PPC traffic based on geography, we were able to funnel all visitors to a dedicated landing with visuals that matched the local feel:


The result?

Conversion rates increased by 22%.

It seems so simple, yet it’s a bit of work to set up.

But the payoff is immense.

Hidden fields sales tracking

This very moment, you’re likely bidding on multi intent keywords that may bring you conversions (leads, demos, or trials), but will never turn into sales.

But with hidden fields sales tracking like Google’s ValueTrack parameters, you’re able to create hidden fields on your landing page to capture lead information, along with other nifty data, like:

  • The keyword they typed in
  • The device they were using
  • The landing page URL they converted on
  • The geographic location they were in

With your CRM lead entry that now has all that additional bulleted info, you’re able to go back to your PPC accounts and learn not just what keyword gave you the lead, but what keyword gave you the sale in other words, which of your keywords have the highest closing rate.

With that information, you’ll find that you’re able to afford higher CPAs for certain conversions compared to others, and this will ultimately help you get higher volumes of the right type of conversions.

How’d you do that?

PPC landing page testing can be complex, but these few tricks above are what help us double the performance for our clients.

These tips will help you customize your landing pages, resulting in better marketing experiences that convert better.

So you can pull more rabbits conversions out of your hat PPC campaigns.

Embed this gifographic on your site (copy and paste the code).

See original: 

PPC Landing Page Magic: Secrets Revealed [GIFOGRAPHIC]


Battling BEM CSS: 10 Common Problems And How To Avoid Them

Whether you’ve just discovered BEM or are an old hand (in web terms anyway!), you probably appreciate what a useful methodology it is. If you don’t know what BEM is, I suggest you read about it on the BEM website before continuing with this post, because I’ll be using terms that assume a basic understanding of this CSS methodology.
This article aims to be useful for people who are already BEM enthusiasts and wish to use it more effectively or people who are curious to learn more about it.


Battling BEM CSS: 10 Common Problems And How To Avoid Them

The Safari Problem With SVG Sprites (Now Fixed)

Update (19.05.2016): The bug was just fixed by Antti Koivisto and has landed in the current update of iOS (9.3.2) and Safari for OS X 9.1.1 (11601.6.17). When a user visits a site using a SVG sprite in a browser with an empty cache, the sprite is cached and will not be loaded multiple times any longer. You’ll find more details here (in German), and Sven Wolfermann’s results before and after the iOS update.

Continue at source:  

The Safari Problem With SVG Sprites (Now Fixed)


A Few Different Ways To Use SVG Sprites In Animation

There are some things we know and like about SVGs. First, SVGs have smooth, clean edges on any display, so using SVGs can reduce the number of HTTP requests for image replacement. Second, it’s easy to make an SVG scalable to its container for responsive development.

In this article we’ll cover a few ways of using SVG sprites to describe motion on the web. I’ll show some techniques for using SVG sprites in complex animation that takes advantage of these factors. All examples shown will assume the use of an auto-prefixer and some basic knowledge of CSS animations.

Technique #1: Complex Responsive Animation With An SVG Sprite

Most of us have been using sprites for development for a long time now: using SVG in a sprite is not new business. This article by Ilya Pukhalski1 breaks down Joe Harrison’s responsive icons technique2 in a very impressive way. In this first example we’ll take it one step further and use SVG sprites not just for iconography, but for complex, fluid animation as well.

Animation has soared in popularity this year due to increased browser support for animations and user experience benefits3 of movement that supports content. But until now, we have not thought about this medium in the same way we have about so many other design concepts that shift for different screen sizes. Even if the animation is complex, we can still get the most bang for our performance buck while still catering to our users’ needs.

Responsive web development adapts content for different displays for so many elements of UI interfaces. Animation can modify with the same considerations as the typography and layout, adjusting to the viewport and clarifying the design.

This is what we’ll be making:

See the Pen Responsive SVG Sprite Animation that Adjusts Based on Viewport4 by Sarah Drasner (@sdras27225) on CodePen28236.

In this example, I’ve made a modern day Book of Kells initial illustration7 to show a complex animation in the context of page content. First, I’ve made three different designs based on small, medium and large viewports.

Full Kells SVG animation design
Full Kells SVG animation design showing the designs for large, medium and small viewports.

I use this as my map for the rest of the project and refer to it often. Other people plan differently, working in the browser or making sketches. Choose the method that makes you most productive.

Grouping And Drying It Out

Now that we have a map, we can start reducing the repetition of elements. We identify the shapes that the first and second versions have in common so we can reuse them. A class can be assigned to the rect in the background and so that we can change the fill using a media query. All the objects are named and grouped for easy reference, such as “mountains”, “bridge” or “tower”.

We’ll also put a class on all detailed shapes, such as building windows or bridge ropes that will be removed in the medium screen size. Any group that’s too different to modify, we put together in a larger group that we can then hide or display. If the first illustration is kells_1, the group particular to the second illustration is kells_2, and the last is kells_3. In order to make the whole SVG similarly scalable to the same container values, the last illustration becomes the same size as the first.

What we’re left with are two sprites in the sprite sheet, and three SVG groups. The first appears slightly complex:

Grouped SVG Design ready for export
Grouped SVG Design ready for export.

We now export it to Peter Collingridge’s SVG Editor8 — or any preferred method of SVG optimization — keeping the groups, which brings the file size down to 18KB! Note: SVGO9 is also great for terminal-based optimization, though I prefer to use the online editor because not only is there is a preview of how the SVG will appear when you’re done, there is also now an experimental editing section to work with.

To use this tool, you simply cut and paste all the SVG code into the textarea, hit load, and you will be directed to the optimize view. I usually try the “Extreme” selection option just to see if I can get away with it, but tend to end up using “Conservative”, not removing whitespace (because of readability while I’m working), and making sure that I preserve the groups. Here is a screenshot of the settings I normally work with. Please note that this varies from project to project and everyone has different preferences.

Typical settings for a complex SVG export from the SVG Editor.

The optimized SVG is placed inline in the HTML (rather than a source URL background image) so that it’s easier to animate10. By taking the time to label the classes properly, we can now add the CSS that will alter the details between large and medium sizes:

@media screen and ( max-width: 700px ) 
    display: block;
    fill: #93A600;
    opacity: 0.57;
  .mid-hide  display: none; 
  .bridge  transform: translateX(15px); 

Making It Fluid

At this point the width and height are removed from the SVG and we can add in preserveAspectRatio="xMidYMid meet" (though that is the default, so it’s not strictly necessary) to make the SVG fluid. With these alterations, it will adjust to the container size instead, which we set based on percentages. Flex or any other responsive container would work here too.

  width: 50%;
  float: left;
  margin: 0 7% 0 0;

The Viewbox Trick

There is one catch and you might have already guessed it. Even if we assign the bottom layer a class and hide it, there will be an empty gap where the viewbox still accounts for that space. We can change the viewbox in the SVG to show only the top portion:

viewBox="0 0 490 474" 

and that will do the trick… for the two larger versions. The smallest version is now obscured, as the viewbox is providing something of a window into another portion of the SVG sprite sheet, so we will need to adjust it. To change the viewbox based on a shifting viewport, we’ll use a little JavaScript:

var shape = document.getElementById("svg");

// media query event handler
if (matchMedia) 
        var mq = window.matchMedia("(min-width: 500px)");

// media query change
function WidthChange(mq) 
        if (mq.matches) 
    shape.setAttribute("viewBox", "0 0 490 474");
    shape.setAttribute("enable-background", "0 0 490 474");
    shape.setAttribute("viewBox", "0 490 500 500");
    shape.setAttribute("enable-background", "0 490 500 500");

Now, when we scroll the browser window horizontally, the viewport will shift to display only the part of the SVG we want to expose. Our code is now primed and ready to animate.

Time To Animate

If you’re exporting from Illustrator as I am, it will account for the fact that you have many “mountain” classes, “dot” classes, etc., and number them for you: “mountain”, “mountain_2_” and so forth. The nice thing about naming all of these groups properly is that we can consistently reuse the same animation across an array of sprites. To target all of the “mountain” classes, we can use a CSS attributeStartsWith selector (I’ve changed the default Illustrator IDs to classes):

[class^="mountain"], [class^="grass"] 
  animation: slant 9s ease-in-out infinite both;
  transform: skew(2deg);

You’ll see here that we begin with a transform set on that element: this keeps the keyframe animation concise. The animation will assume that the 0% keyframe corresponds to the initial state of the element; all that needs to be defined to create a very succinct loop are the changes halfway through the animation sequence.

@keyframes slant 
  50%  transform: skew(-2deg); 

For the dots and stars that share a common animation, we declare that once in @keyframes, but then change the timing of the animation for each of the different effects with as little code as possible:

@keyframes blink 
  50%  opacity: 0; 

  animation: blink 2s ease-in-out infinite both;

  animation: blink 5s -3s ease-in-out infinite both;

We don’t want both the stars and dots to animate at the same time, so the animations are staggered with a delay. However, doing so with a positive integer will cause a gap in continuity at the start of the animation when the viewer arrives. This is solved here by specifying a negative delay.

Of course, we also need to add the most common viewport meta tag:

  <meta name="viewport" content="width=device-width">

To get the best possible performance and to offload work to the GPU (particularly in Firefox), we also need to hardware-accelerate any element that we’re animating. SCSS is great for this as I can use a mixin:

@mixin accelerate 
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;

and add this to all of the elements with animation:

@include accelerate;

Backwards Compatibility

If SVG or animation is not available, we can provide backwards compatibility by adding a fallback. In this case I’ve used a simple PNG, but you can also make something more complex if you wish.

<div class="fallback">
  <img src="fallback.png">

We add in Modernizr — a slim, custom build to check for SVG — and use the class hooks provided to hide and display it depending on the support level:

.svg .fallback 
  display: none;

.no-svg .fallback  
  width: 50%;
  float: left;
  margin: 0 7% 0 0;
  img  width: 100%; 

By nesting the image in a div set to display:none, the fallback asset isn’t accessed unless SVG or animation support is disabled. More information about what content is downloaded in different media queries can be found in Tim Kadlec’s blog post “Media Query & Asset Downloading Results11”. For a more detailed analysis on how to provide multiple fallbacks for SVG using the picture element and a polyfill, Sara Soueidan created a great resource12.

And there you have it: a complex animation with concise code that shifts based on the viewport.

Techniques #2 And #3: Keyframe Animation With Steps() And SVG Sprites

Techniques 2 and 3 are shorter and related to each other. In these examples, we’ll use the SVG sprite to make a step animation. Of all web-based animation techniques, step animation most closely resembles old hand-drawn cel animation. Cel is short for “celluloid” which is a type of transparent sheet. This material was used by animators like Disney or the original Looney Tunes to draw on top of their previous drawings, thereby defining a sequence and creating the illusion of movement.

The images were shot on film, frame by frame. Each frame was composed of several different layers. There was typically a stationary painted background, used statically throughout a scene. The character’s body and corresponding moving body parts were then painted on separate layers of celluloid to reduce repetition.

All cel animation photos used with permission of John Gunn. (Large preview14)
Sketch, with guides. (Large preview16)
Completed cel. (Large preview18)
Reverse side of cel. (Large preview20)

Here, we mimic this analog process by using a single motionless background, then quickly showing a series of images on top. This gives the illusion of movement without any real interpolation. Instead of a series of images though, we will simultaneously reduce HTTP requests and simplify our keyframes by using a single SVG sprite sheet. This technique is better for more complex shapes and expressive movement than what simple transforms can offer.

Here is the final animation for Technique #2:

See the Pen Step Keyframe Animation with SVG sprite21 by Sarah Drasner (@sdras27225) on CodePen28236.

The drawing in this animation has 21 parts. That might sound like a lot, but it is vital that the ratio of drawing per second stay high so that the animation appears smooth. Considering that there are 21 drawings over 1.8s seconds, we are pretty close to our goal of the standard 12fps. This number is not arbitrary – old film was shot at 24fps, and animators largely considered “shooting on twos” (meaning one drawing over two frames, or 12fps) the standard for an illusion of movement. Anything much lower than this, and the animation appears slightly choppy.

In order to appropriately place each drawing in each frame we could move guides around precisely with rulers, but it’s more efficient to automate that task. I’ll demonstrate two different options for preparing your designs: drawing in Illustrator with a template; and drawing in an SVG editor, or on paper frame by frame and using Grunt to sprite.

Drawing In Illustrator With A Template

First, we decide how big the animation is and multiply that number by 21 in one direction: that’s our artboard size. We drag a box around that area and choose Object → Path → Split Into Grid. Then we enter the rows we want (or columns, if you wish to make a horizontal sprite sheet) and click OK. Then choose View → Guides → Make Guides and our template is all set.

A view of 3 out 21 SVG drawings that make up our sprite sheet.

If you’re drawing directly in Illustrator, your best bet is to place your first drawing within the first box, copy it into the next box using the alignment line, or shift and drag to keep it steady. Then slowly pull and reshape parts of the drawing from frame to frame. With each drawing, copy the last version, move it and redraw it slightly.

You can also do a screencast of something and place each image in the Illustrator doc and trace it, either through Illustrator’s native trace functionality, or with the pen tool for a hand-drawn feel, and more concise paths.

Obviously, this approach can also be done in Sketch or any other SVG editor: use the tool of your preference.

Once we have a long sprite sheet, we export and compress the SVG, and also save a copy as PNG that we’ll use as a fallback, and in this case, the fallback will still animate.

Drawing In An SVG Editor, Or On Paper Frame By Frame And Using Grunticon To Sprite

If you like a hand-drawn look, you can draw it all by hand on paper and scan it. Old animation studios used lightboxes and celluloid sheets so animators could trace their previous drawings incrementally. You don’t necessarily need these materials to try this technique, though. By placing a lamp underneath a glass table, you can easily make a poor man’s lightbox. This set-up shines enough light so that you can see through even regular opaque copy paper. To create each new frame, place a piece of paper or vellum over your last drawing and change the drawing slightly until you have a series. You can then scan this set of drawings and vectorize them.

Alternatively, you can draw each piece frame by frame, shifting the image slightly each time, and saving every new version to a folder. Just be sure that what you’re initially saving is indeed an SVG and not an .ai (or any other) file type. You can then use Grunticon24 to compress and sprite them automatically. Here’s a great article 25 explaining how to do so. Notably, Grunticon also generates a fallback PNG automatically.

Personally, I think if you draw each frame by hand, it makes the most sense to just make sure the placement on each artboard is consistent and use Grunticon; but the Illustrator template technique has the benefit of allowing you to see all of your work at once.

Keeping It Simple

For this animation, I didn’t make the SVG fluid because I purposely designed it to take up the whole screen on mobile. Note that there is no need for a lot of complicated math and keyframe percentages. All we need to do is take the image height, and specify the background-position with that number as a negative integer on the 100% keyframe value:

@keyframes splashit 
        100%  background-position: 0 -3046px; 

Then on the splash div, we animate using steps() for the number of frames we had in the SVG:

  background: url(‘splash-sprite2.svg’);
  animation: splashit 1.8s steps(21) infinite;

Using an SVG rather than a PNG gives us the advantage of a crisp image on all displays, but of course we will still provide a fallback. We use Modernizr to create a class hook on the <html> element and can then provide a fallback, and still animate it with the PNG we created:

/* fallback */
.no-svg .splash 
  background: url(‘splash-sprite2.png’);

Technique #3

If you take the steps() value out of the last animation, you might see something interesting. Instead of creating a seamless moving drawing, it just rolls through the background. We’re going to use that to our advantage in the next Pen.

See the Pen SVG Sprite Animation #226 by Sarah Drasner (@sdras27225) on CodePen28236.

First, we make a walk cycle using the cel/steps drawing technique. For fun, I shifted the color in each frame by slightly adjusting the hue incrementally to do a little easy manual color animation. Again, it’s important that the steps() and animation-duration ratio still fall around the 12fps range.

A few sprites in the walkcycle shifting hue slightly from frame to frame.

Then we will scroll through the rest of the images by animating the background position of the SVG sprite sheet. In order to keep everything consistent, we’ve made all of the background images the same size.

To create the impression of fluid linear infinite movement, the three background images must be able to repeat seamlessly on the x-axis so that when they scroll through there are no hiccups. This can be achieved by making each end identical, or, in this case, using an image that is sparse enough that it can completely flow through.

There are three parallaxed background images that don’t include the figure. All three share a few things in common: they all have the same width and height dimensions for consistency, and they share a common keyframe value.

With SCSS, we can @extend the similar pixel region designation:

  width: 600px;
  height: 348px;

.fore, .mid, .bk, .container  @extend .area; 
(Large preview30)

Each element uses the same keyframe values, but we set apart their animations with an incremental decrease in seconds the further back their z-index. This yields a nice parallax effect.

  background: url(‘fore.svg’);
  animation: bk 7s -5s linear infinite;

  background: url(‘mid.svg’);
  animation: bk 15s -5s linear infinite;

  background: url(‘bkwalk2.svg’);
  animation: bk 20s -5s linear infinite;

@keyframes bk 
  100%  background-position: 200% 0; 

I’ve seen people write multiple intervals for this kind of animation, but remember, the keyframes will interpolate values for us. We can even avoid having to designate precise pixel amounts on the scrolling backgrounds (just in case that amount changes in one of the sprite sheets in the future) by setting a percentage.

Again, we’ve added null Z transforms, perspective:1000;, and backface-visibility:hidden; on all of the selectors with animation to enable a bit of hardware acceleration where possible, which helps remove jank and keep our animations fluid. And again, the use of negative delays ensures that the animation is running from the start. All of the SVGs are optimized and have a PNG fallback.

And there you have it! A full, parallaxed animation with SVG sprites and very little code.

(ds, il, og)


  1. 1 http://www.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/
  2. 2 http://responsiveicons.co.uk
  3. 3 https://medium.com/@michaelvillar/improve-the-payment-experience-with-animations-3d1b0a9b810e
  4. 4 ‘http://codepen.io/sdras/pen/xbyopy/’
  5. 5 ‘http://codepen.io/sdras’
  6. 6 ‘http://codepen.io’
  7. 7 http://en.wikipedia.org/wiki/Initial
  8. 8 http://petercollingridge.appspot.com/svg-editor
  9. 9 https://github.com/svg/svgo
  10. 10 http://slides.com/sarasoueidan/styling-animating-svgs-with-css#/34
  11. 11 http://timkadlec.com/2012/04/media-query-asset-downloading-results/
  12. 12 http://sarasoueidan.com/blog/svg-picture/
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2015/03/cel1-bk-large-preview-opt.jpg
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2015/03/cel1-bk-large-preview-opt.jpg
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2015/03/cel2-guide-large-preview-opt.jpg
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2015/03/cel2-guide-large-preview-opt.jpg
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2015/03/cel2-large-preview-opt.jpg
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2015/03/cel2-large-preview-opt.jpg
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2015/03/cel2-reverse-large-preview-opt.jpg
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2015/03/cel2-reverse-large-preview-opt.jpg
  21. 21 ‘http://codepen.io/sdras/pen/LEzdea/’
  22. 22 ‘http://codepen.io/sdras’
  23. 23 ‘http://codepen.io’
  24. 24 http://www.grunticon.com
  25. 25 http://css-tricks.com/inline-svg-grunticon-fallback/
  26. 26 ‘http://codepen.io/sdras/pen/azEBEZ/’
  27. 27 ‘http://codepen.io/sdras’
  28. 28 ‘http://codepen.io’
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2015/03/layer-illustration-large-preview-opt.jpg
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2015/03/layer-illustration-large-preview-opt.jpg

The post A Few Different Ways To Use SVG Sprites In Animation appeared first on Smashing Magazine.

Original link: 

A Few Different Ways To Use SVG Sprites In Animation