Christmas Plugins vs DIY

It’s that time of the year again, where we start putting Santa hats on our company logos, prepare for Christmas work parties and count down the days till the relatives stop by to watch Home Alone for only the 50th time.

In all reality changing your website to reflect the festive period is easy, quick, inexpensive and an engaging way to keep your website fresh with a little bit of personality.

However, it is essential that your seasonal branding is engaging, meaningful, and most importantly, in keeping with your branding. Make sure you don’t completely redesign your site to the point that it affects the user experience and makes customers question if they are on the right site.

WordPress Plugins

WordPress has an array of different plugins to help prepare your site for the festive period, from countdowns, Christmas animations, holiday messages the list goes on and all can help to welcome the Christmas spirit to your site.

Adding WordPress plugins to your website can however have implications, getting the balance of plugins and site speed is always a difficult task. WordPress plugins may add their own style sheets and assets which may do more harm than good by slowing down your site.

Plugins vs DIY

Every year I see blogs such as “10 Best Christmas WordPress Plugins” or something similar and i didn’t want to be another blog to grow that list even more.

With site performance my main priority I wanted to test WordPress plugins vs creating my own solution based on a number of factors such as time, size, speed, amount of coding etc. to see which is better.


Snow Animation WordPress Plugin

A number of different snow falling plugins are available however my favourite to test is WFS Let It Snow. Within the settings for the plugin you can alter the snowflake speed, size and type of snowfall until you have a light snowfall you are happy with rather than distracting your website customers with a blizzard.

The plugin also lets you select where the snow will fall with two options “Homepage Only” or “Entire Site”, snow on every page might annoy your audience so homepage only might be the preferred option, however it would be nice if the plugin had additional functionality such as “Posts Only” or “Shop Only”.

The main reason i wanted to test WordPress plugins vs DIY is the amount of additional requests plugins use and this plugin is no different. For such a small plugin with the only purpose to animate snow falling i was surprised to see two JavaScript requests being used. This of course doesn’t seem like a large number however small plugins such as this can add up very quickly affecting the performance of your site.

Pros Cons
Install and setup in 60 seconds. 2 JavaScript requests
Option to show on homepage/all pages Can’t show on specific pages
Change speed/size of snow Safari issues
Shadow for lighter sites Responsive issues

Snowfall Animation DIY

As you might notice while reading this blog my website has a snowfall effect, however this is not a plugin but a snowfall animation using pure CSS which i have shown below.

body {
position: relative;
}

body:before {
content: '';
   display: block;
   position: absolute;
   z-index: 999999999999999 !important;
background-image: url('https://samtswift.com/wp-content/uploads/snowflake1.png'),
url('https://samtswift.com/wp-content/uploads/snowflake2.png');	
	-webkit-animation: snow 15s linear infinite;
	-moz-animation: snow 15s linear infinite;
	-ms-animation: snow 15s linear infinite;
	animation: snow 15s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
Pros Cons
Under 40 lines of CSS Longer to implement
Only size 10kb images As the code repeats a noticeable jump occurs
More control of functionality Additional CSS required to add functionality
Different variety of snowflakes
No JavaScript requests

This DIY version of this plugin is not perfect don’t get me wrong but it does show how simple it is to make your own snow animation, no Jquery, no JavaScript and no additional HTTP requests just a few lines of CSS.


Christmas Lights WordPress Plugin


The second Christmas plugin to test is Xmas Lights by GraphicEdit, this was the only Christmas lights plugin i could find however more may be available. This plugin adds Christmas lights to the top of your website and couldn’t be easier to set up simply activate the plugin and the lights will appear on your site.

It really is that simple, just activate the plugin and view your site to see the festive feeling. Don’t get to comfortable though as this plugin does have its issues, on mobile devices the plugin doesn’t show at all which when 80% of your target audience use mobile devices this is a big issue. The plugin also has issues with WordPress Themes and my site needed to stripped down to Twenty Twelve WordPress Theme just so i could see how the lights appear.

Although the plugin doesn’t work on most mobile devices it doesn’t show an error to alert the user to this issue and for all desktop users that use your site they can engage with your site as they get into the Christmas spirit. This plugin also doesn’t add any additional requests to your website but instead adds the JavaScript required into your site so site performance remains unaffected.

Pros Cons
Quick win to make your site festive Mobile issues
No additional requests Custom designs may not work with this plugin
No additional functionality

Christmas Lights DIY

This same Christmas Lights effect can be created without the need for a plugin and not only that it can be done with pure CSS.

View Demo

As you can see from my demo a small amount of CSS is required and you have Christmas Lights that are not restricted to the top of your site but anywhere and most importantly yes it works on mobile. Using pure CSS means no additional requests, no effect on site speed and no plugin added to your library just a small image file and a few lines of CSS.

Pros Cons
Pure CSS Image needed in media library
Works on all devices
Use anywhere on your site

Christmas Countdown WordPress Plugin

We all love counting down the days until Christmas, getting excited the closer it gets, getting your site visitors excited can help to increase sales.

There are plenty of WordPress plugins currently available, Christmas Countdown Widget by Monica Mays is the most highly rated. This Christmas Countdown displays a Santa Claus countdown which can be added to your site via shortcode or sidebar and once the countdown has finished the “Merry Christmas” greeting appears before the countdown starts again.

This particular plugin uses one CSS and one JavaScript external request, time based plugins however will require either php or JavaScript to calculate the current time so every solution will require more than simply CSS.

Pros Cons
Shortcode to show anywhere you wish Only shows days left
Quick to set up 1 CSS & 1 JavaScript File
Only santa as a graphic

Christmas Countdown DIY

Santa is coming to town in….

Days
Hours
Minutes
Seconds

View Code

This DIY Christmas countdown is an actually timer showing days,hours,minutes and seconds. Watching the countdown slowly tick away adds the power of urgency to induce sales you must’ve seen it so often on Amazon. Amazon quite cleverly places a timer alongside a particular deal (like sale, or “Free Shipping”), the urgency of realisation that Christmas is quickly closing in can make your landing pages more effective.

Creating this solution rather than with a plugin means you aren't restricted to an image of a santa but you can change however you require, perhaps changing the boxes to look like presents or brand in your company colours to make the timer more personal to your business. The benefits of creating the countdown is that it can be used for future use by simply changing the timer in JavaScript for events such as Black Friday, sale events etc.

Pros Cons
Shows more than just days Uses CSS & JavaScript
Brand to your business Larger amount of space on page
Power of urgency to induce sales
Use for future events (Sales)


Find Your Balance

This test is not to prove that we don't need WordPress Plugins nor that we shouldn't use them but instead to be more cautious of how much we use them. Firstly question what your aim is for the plugin and if infact your goal can be achieved much easier than anticipated. Nobody wants to login to a WordPress site and see a full library of installed plugins requiring updates nor testing a site on Pingdom with a grade F "Make fewer HTTP requests".

Things to consider:
  • Cost of buying different tools (theme and plugins)
  • The development time you need to spend
  • External dependencies (things that can go wrong and are outside of your control)
  • Stability (the chance of something that works now to break by itself in the future)
  • Future cost of maintenance work

    I believe a balance needs to be struck to use a mixture of a good theme, reliable plugins from vetted sources and a bit of your own development to build great websites rather than relying only on plugins to run your site.

    Tags:

    Trackback from your site.

    Leave a comment