5 tools to help you give the gift of GIFs

Everybody loves a good GIF. And these 5 tools will help you keep coworkers entertained and website visitors engaged.

Mat Vogels
August 31, 2017
Resources

GIFs — the magical image type no one's quite sure how to pronounce* — pop up all across the digital world, from your latest Slack chat to marketing websites across the web.

Why are they so popular? Well, sometimes it’s just easier to explain a product with animation rather than with a static image. If you look through our help site, you’ll see that we use often GIFs to help designers understand Webflow.

One example of how we use GIFs for education.

GIFs let you visually demonstrate ideas and workflows in bite-sized chunks, without resorting to slow-loading videos or series of annotated images.

GIFs are also great for entertainment. We use them all the time here at Webflow. In fact, here’s one I shared with the team today.

But this post isn’t about our favorite GIFs. It’s about how you can easily create your own to use in your own projects, websites, and tools. So let’s get going.

Using GIFs for education, marketing, and support

Like I said, GIFs can really help people understand your product or website. They give your viewers just enough context to understand what you’re talking about, without distracting them too much or drowning them with buffering video.

They can also help you demonstrate features and workflows, so they’re perfect for your marketing site too.

They’re also a powerful tool for your support team. What better way to guide a user through a problem than a quick animated walkthrough? Instead of writing a detailed step-by-step guide, use a GIF to quickly show your user how to navigate or use a specific part of your app.

At Webflow, we use a variety of GIF creation tools, each with its own strengths and weaknesses. I’ll only cover the three I use most, and would love to hear what you (or your team) use to create animated GIFs.

LICEcap for Mac and Windows

LICEcap. Because it's that easy.

Yep, you read that right. The strangest tool name is also the Webflow favorite. Why? Because it’s so simple.

Just scale the LICEcap window to the area you want to capture and press Record. LICEcap will not only record your screen, but also save the file on your desktop to be shared and used anywhere you like. Did I mention it’s free?

Kap for Mac

Kap is a lightweight, open-source screen recording app.

LICEcap is solid, but sometimes it gets flak for producing GIFs of a relatively low frame rate. One alternative to solve this issue is Kap, a lightweight, open-source screen recording app that produces some slick recordings. They're also a small and responsive team (just recently chimed in on Twitter to help some of our team out) that love what they're building, which goes a long way in winning my loyalty.

GIFMaker for Mac

Another popular GIF creation tool is GIFMaker, a Mac app that lets you easily create GIFs from video files or a series of images. It’s a bit heavier than LICEcap, but it’s my go-to for converting existing content (like screencasts) into GIF files.

Another thing I like about GIFMaker is that it makes it easy to adjust the framerate and file size before generating the file itself. GIFs tend to be pretty large files, so the ability to adjust these characteristics helps you avoid slowing down your site.

Where to find and use GIFs

You can work GIFs into your workflow in all kinds of ways, from marketing to education to pure entertainment. The following GIF tools are mostly for entertainment, and can be integrated into many of the tools and apps you already use everyday.

Giphy

Think carefully before visiting Giphy. You might not be back for a while.

Giphy is a personal favorite, in part due to its Slack integration, which works like a charm when you want to surprise your team (and yourself) with a themed GIF.

Giphy also has a GIF creator! Just paste in Vine, YouTube URL, or Vimeo URL and you’re good to go.

Pro tip: When you integrate Giphy with Slack, you can pick the audience rating (from G to NSFW) to minimize your chances of offending anyone.

GIF Keyboard for iOS

GIF Keyboard is another favorite because it easily integrates into your everyday life. Unlike Giphy, which collects and stores GIFs on their website for you to browse, GIF Keyboard can be added as a keyboard to just about any of your messaging apps (including Facebook Messenger and iMessage).

What do you use to create GIFs?

GIFs are a great alternative to static images, and with these tools and resources you’re on your way to using them on your own marketing site, social channels, and help content.

Don’t see your favorite GIF tools here? I’d love to hear what tools you’re using to create, share and use GIFs — so send us a tweet!

*The creators say it should be pronounced "Jiff," like the peanut butter. But I prefer the good ole hard-G "Giff."

What else should I consider?

While speed, reliability, scalability, and security should be your chief concerns, Webflow offers a host (pun sheepishly intended) of other features that have a significant impact on SEO and performance, and may not be offered by most hosting services.

HTTP/2

2015 saw the release of the first new Hypertext Transfer Protocol since 1999: HTTP/2.

This new standard promises faster websites across the web — but not all hosting platforms support it yet. Because Google has always cared about page speed, there’s a good chance that HTTP/2 will become a component of their ranking algorithm soon.

Here are some benefits of HTTP/2 support/compatibility:

  • Multiplexing: Your browser can receive requests over multiple connections, not just one. Think of it like switching from a one-lane road to an interstate.
  • Header compression: Your browser loads the top of your pages first, before the rest of the page, which means your site visitors see content faster. On mobile especially, this is a big improvement.

Webflow’s hosting has been HTTP/2 compliant for a couple years now, unlike services out there. (And even hosts who do offer it typically only do so on higher-tier packages.)

Today, all assets published to a Webflow site are served via HTTP/2 — increasing page load performance when a large number of assets need to be downloaded.

Other powerful features of Webflow hosting

Everything above is more or less essential, but there are many other features that can make managing your website a lot easier and more convenient. These include:

  • Automatic backups and version control (you can also save and name a site version whenever you’d like with the key combo Command + Shift + S on Mac or Control + Shift + S on Windows)
  • Site-wide and per-page password protection
  • Simple publishing workflows
  • Responsive images
  • Protection against distributed denial of service (DDoS) attacks

On top of these features, Webflow hosting includes:

  • Form submissions (manage lead gen and let us store your data for you). It’s like Wufoo, but built into Webflow!
  • SEO and social tools: manage OpenGraph and SEO meta tags in one convenient interface. Easily combine it with the CMS to automate your metadata optimization.
  • Dynamic embeds: integrate Webflow CMS with Shopify for ecommerce, SoundCloud for music, Eventbrite for events, and anything else that uses custom code embeds.

Webflow combines all these elements in a first-class global hosting infrastructure that’s available at the click of a button. This means that when you publish with Webflow, your site’s files and assets are published across the globe and immediately ready for any amount of traffic, from any location.

Want to know how much we believe in Webflow hosting?

We put a lot of thought and effort into making Webflow hosting one the the best hosting services out there. We’ve seen Webflow-using businesses like Kisi grow their organic traffic by over 300%, while also supporting thousands of requests per second for businesses like Eventbrite.

In fact, when Eventbrite launched their Amstel Live festival page with Webflow, they received over 10,000 requests a second — resulting in over 3,000,000 page views in just one hour. Webflow hosting was able to handle it without a hitch.

But above all, we believe in our hosting platform so much so that we use it for our own websites, which see hundreds of thousands of visitors from around the globe every day, and have seen nearly perfect performance over the last year.

Mat Vogels

I'm a web creator and Webflow evangelist. Follow me @matvogels.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.