Hosting videos for your site with Wistia

Written by   in 

In today’s world video is everywhere. You can find them on websites, social media and the biggest place of all, Youtube. Now, most people who run a website or blog will use Youtube to host the videos on their site. And for the most part, that’s fine.

Why people use Youtube?

Well it’s free… in a sense. Yes, Youtube will allow you to upload as many videos as you want and they’ll even let you do it for free. You can then turn around and embed those videos into your site and life is grand.

But why does Youtube let you do it for free? Well, we are talking about Google aren’t we. It’s because they will display ads for hosting videos for your site. And for some businesses that might be a problem. Because you may not want ads being displayed on your sales pitch video for your product right?

Or what if you’re running a paid membership site. How are you going to show your members videos and keep them from being viewed by the entire world?

Enter Wistia


Wistia is a video hosting company. I personally heard about it from Chris Lema. And if you’re in the WordPress world, then you’ve most likely heard his name or visited is blog. Here’s a little clip from that article I read from Chris.

If you’re a business that is trying to incorporate more video, you may want to check them out as well. And if you’re a blogger that’s getting decent traffic, and want control over (insert anything here), then Wistia may be the right choice for you too.

Source: Businesses & Bloggers: You and YouTube may not be in sync

Here’s the gist of why you might want to use a service like Wistia. It all boils down to control of your videos. With Youtube, you don’t have much control over your videos. Sure, you can make the videos public, unlisted or private. But when it comes to displaying ads on your videos, you don’t have any control. And if you have videos you don’t want shared with the world then Youtube is not the choice for you.

While Youtube has the right price for their service, sometime you need something just a little more professional. Now Wistia does offer a free plan and for some people it might be all that you need.

The free plan over at Wistia allows you to upload 3 videos and gives you 5gb a month in bandwidth for those videos. Plus your videos will be displayed in a branded player that says “Powered By Wistia” on a little tab that disappears when your mouse cursor isn’t on top of the video.

Wistia also comes loaded with a ton of cool features for your videos. From analytics, call to actions, email captures and more. To get a better idea, you may want to check out 10 Reasons Why You Should Host Your Videos On Wistia over at Explainify.

Wistia can be a little on the pricey side if you need to host a lot of videos. All of the prices below are monthly.


  • Up to 3 Videos
  • 200GB of Bandwidth
  • Branded Player


  • Up to 150 videos
  • 200gb of Bandwidth
  • Unbranded Player


  • Large # of videos
  • Millions of views
  • Unbranded Player

Wistia used to offer several plans starting from $25 per month. However, it appears as though they have over simplified their pricing model. Personally I think this new model alienates a lot of small businesses from using their service as they used to have a $25 and $50 per month plan.

And with their current pro plan running at $100 per month, this allows you 150 videos with 200gb of bandwidth. The old plan that ran for $100 per month allowed you unlimited videos with 200gb of bandwidth.

YouTube is still the king of free video hosting. But if you need a more professional solution where you’re not displaying ads or related videos to your customer, then Wistia is the way to go. Although a pricey way to go.

Learn CSS Animation for your web projects

Written by   in 

CSS has been around for a number years. The usual method one might benefit from using CSS is to design the look of a website. This is typically done through the use of a CSS stylesheet.

With the stylesheet you can dictate just about everything with regards to the look of your website.

CSS animation?

A lot of people don’t know about CSS animation. Even I thought the majority of animation was done with a javascript code like jQuery. But it appears as though it is not overly difficult to add animation through the use of CSS.

For some CSS Animation Examples visit http://codepen.io/collection/EIqBg/

What to learn CSS from an Expert?

Well, one of my Twitter friend has written a publication on CSS Animations. Her name is Val Head and her book is called The CSS Animations Pocket Guide. And for the time being you can get it for just about any price by visiting her site. Val’s offering a pay as you like system.

But before you do that here’s a run down of what’s in the book.

Part 1: CSS Animation Basics

An explanation of the basic building blocks for creating animations with CSS.

Part 2: Exploring animation properties

Slightly more advanced and highly useful properties like animation-direction, animation-delay and animation-fill-mode give you more fine-tuned control over your animations. This section shows how and when to use these properties.

Part 3: Understanding Easing

Where an object goes is important, but how it gets there is even more important. This section covers the details of the easing keywords and custom bezier functions.

Part 4: Common Animation Tasks

This section puts our CSS animation knowledge so far into practice, going into the details behind four example animations: an infinitely looping animation, animating with steps, using animation-play-state and applying multiple animations to one object.

Part 5: Performance and browser support

This section looks at the practical aspects of using CSS animations in production work. It covers how to determine browser support and what to consider when choosing your approach to fallbacks.


It is a well written book, giving you concise instructions on how to do you own CSS animations. After you finish this book you should be able to make all sorts of object move on your web page.

Free tools for your website

3 Free Online Design Tools

Written by   in 

Here are some very handy tools we use when we’re working on a new web design. For the hard core coder who lives and breathes CSS, these tools are probably not for you since you can do this stuff in your sleep. But for the rest of us, these can be some invaluable tools to create some results quickly.

CSS Gradient Maker

In the beginning days of the internet, when people needed, or wanted, to have a gradient background, the only way to do it was to use an image. This meant opening a graphics editor, making the gradient and then using it in the web design.

The are some problems with using an image.

  1. Images add to the size of your site. And if you needed a big background image then it could slow up your page loading speed.
  2. People use a wide range of screen resolutions. So it’s possible that your background won’t look the same from one visitor to the next.

The solution? Create a gradient background in CSS. While you might be familiar with CSS, creating the code to do a gradient might be a little beyond your skills. Luckily the folks at Colorzilla have provided an easy to use CSS Gradient Maker. Check out the video below and then click the button below that to check out the free tool.

Make CSS rounded corners

We’ve all seen them, done them or wanted to do them, rounded corners. If done right and tastefully, rounded corners can look great on a website. You can use rounded corners to round out a container or even round your images. It’s a nice little effect, that’s relatively easy to implement. At least if you’re using a rounded corners css generator.

CSS Rounded Corners
CSS Matic has provided an easy to use to to generate the code you need to make rounded corners possible in CSS. The generator makes all of code you need for cross browser compatibility. And as an added bonus, CSS Matic also provides a CSS shadow generator.

Picking a color scheme

The internet has been around for several decades now. And over that time there have been millions of websites built. There have been some great ones and some that are just painful to look at.

Poorly Designed Website

In some cases, it can be a bad design. In other cases it’s a poor selection for the color scheme. Picking colors just because you like them, doesn’t mean they go together well. For example, you don’t want to have a bright red background with bright yellow text on it. Unless you’re trying to go blind, or trying to give yourself a headache.

So we found an online tool to help you with picking your color scheme. Obviously if you have a log and it uses a particular color then you’re going to include it in your web design. But you should try to find a color scheme that works well with it at the same time.

Remember you’re designing a website, not applying for a job at Crayola. You don’t need 64 colors in your website.

So we found an online tool to help you with picking out a color scheme for your web design. It’s free, just like the rest of the tools in this post.

Color Scheme Designer

We hope that you find these tools useful. And if you happen to know of any other great, free, online tools then let us know.

Six Revisions

Free Website Resources from Six Revisions

Written by   in 

Website Resources

A few years ago I came across a website called Six Revisions. If I remember correctly I was looking for free icons to use on a website I was making at the time. Over the past year there have been few updates to the freebies section but there are still some great free website resources to be had from visiting them.

Free Icons

Like I said this is how I originally came to find Six Revisions and there are quite a number of free icon sets you can download from their website. Icons are great little graphics that can be used in a variety of spots on your website.

Photoshop Brushes

While you can really use Photoshop brushes on your website, they can be used to help create graphics for you to use on your website. In order to use those brushes you’ll need a graphics editing program like Adobe Photoshop or you can use a free program called GIMP.

Free Templates

While the bulk of their freebies are icons they do offer a couple of free templates you can use to build websites with. Some are for WordPress and others are for simple HTML sites. But at least they’re free.