So that time of the year is fast approaching yet again with only 4 weeks until Christmas. It's the time when the Christmas trees come out, decorations go on and the lights go up - why not do the same with your website?

7 Website Design Ideas for Christmas

We've put together a great list to get your website spiced up for the festive season and we've included some goodies to go along with it; consider them your first presents this Christmas!

Let it Snow

Everyone loves a white Christmas so why not let your visitors enjoy the snow on your website as much as they do outside. We have taken the best snow storms and combined them into one simple to use file that does the work for you. If you're running a tumblr blog, it is easy to make it snow over your blog and let your visitors enjoy the festive season whilst controlling and interacting with the snow.

We've taken the jQuery code provided by Ivan Lazarevic and put it up on our website for everyone to easily place on their website. If you want it on your website, just add this code to your site:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//static.madebymagnitude.com/javascript/jQuery.snow.min.js"></script>

To get it all setup and running, you can use the basic configuration:

$(document).ready(function(){
	$.fn.snow();
});

Or, if you want to specify your own options then use:

<script>
$(document).ready(function(){
	$.fn.snow({
		minSize: 5, // Minimumsize of the snowflake (px)
		maxSize: 25, // Maximum size of the snowflake (px)
		newOn: 350, // Frequency they fall (ms)
		flakeColor: '#FFF' // Colour of the snowflake
	});
});
</script>

If you're looking for a list of other options available, be sure to give it a Google or check out this article on jQuery Snow Falling Effects.

Create a Christmas Landing Page

Do you run an e-commerce website and want to focus your visitors attention onto your Christmas offers or any seasonal content you've got on your website? A Christmas landing page is the perfect way to upsell your offers and expand your potential earnings in the busiest shopping period of the year.

Creating an optimised landing page that specifically matches your featured products with a definitive 'call to action' will not only put your website in the Christmas spirit, but it'll help you improve your conversion rates. A great landing page needs great, unique content - so be sure your content is as relevant and as most ramble-free as possible.

Here is a design we particularly find effective; if you live in the UK, then you'll of heard of 'Boots'. Every year they put a simple Christmas feel onto their website. Simple, yet effective. It gives you all the information and offers you need to know straight from one place.

Boots Retailer - Christmas Landing Page

Run a Christmas Competition

Do you want more visitors to engage with your site? Perhaps you're looking for a great way to get people to like your page on Facebook, follow you on Twitter or subscribe to your blog? Why not run a competition? No matter how big or small the prize is - people love competitions, especially if its a prize that'll make a perfect Christmas present.

Make sure you plan out your budget - what's the maximum you'd want to spend? What's the potential increase in traffic and thus conversions you could make? How effective will the competition be overall?

Add some Festive Imagery

It has been tradition for many years to put up a Christmas tree and decorate it until there isn't a branch that isn't covered with tinsel, lights or baubles. Why not do the same on your website? (perhaps just not as extreme!).

We've put together a free set of four Christmas vectors graphics to get you going including a stocking, snowman and Christmas tree.


Download for Free

Re-craft your logo

If you're looking for a simpler approach or you haven't got time to re-design your website, you could just craft a Santa's hat onto your logo or swap out a letter for a Christmas tree or Snowman.

Web Design Chester, Cheshire - Our Christmas Logo

We've put together a pack of Santa hat PSD's that you can use to tweak your logo. Thanks to timebomb on Tumblr for supplying the pack. You can download it for free below:


Download Christmas Goodies

Add a Popup Snowman

Web designers and developers are always coming up with new ways to craft interactions into every website. For this idea, we're going to create two images of a Snowman. One will be the 'shut' state when the Snowman hasn't sprung into life, and the second will be the 'open' state when the Snowman is clicked / popped open.

You first want to craft together your snowman that you'll use. We're going to be using this hand-crafted Snowman. (Source: DryIcons)

Snowman Christmas Website Design

Now we've got our Snowman, we need to setup our page. We'll create two elements, one for a repeated snow background layer and the second for our Snowman.

.snowBackground {
	background: transparent url(snow-bg.png) bottom left repeat-x;
	/*-- Fix to bottom --*/
	position: fixed;
	bottom: 0;
	left: 0;
	/*-- Full width --*/
	width: 100%;
	height: 40px;
	/*-- Above snowman --*/
	z-index: 99;
}
.snowman {
	width: 187px;
	height: 108px;
	background: url(snowman.png) 0 0 no-repeat;
	/*-- Fix to bottom --*/
	position: fixed;
	bottom: 0;
	right: 50px;
	/*-- Lower than snow background --*/
	z-index: 9;
	/*-- CSS Transition --*/
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
	/*-- Click --*/
	cursor: pointer;
}
/*-- Expanded --
 * Alternatively you could have:
 * .snowman:hover
 *
*/
.snowman.expanded {
	background-position: 0;
	height: 220px;
}

Now the Javascript, we'll be using just 3 lines of jQuery code so that our Snowman appears when he's clicked:

<script>
$(document).ready( function(){	
	// Click snowman to expand
	$('.snowman').click(function() {
		$(this).toggleClass('expanded');
	});
});
</script>

Voila - you're all set! You can view the full HTML, CSS, images and Javascript on jsFiddle.

Add the Christmas Lights

Javascript Smashable Christmas Lights

What is Christmas if you haven't got your lights up? Our personal favourite is the 'Smashable Christmas Lights' Javascript plugin that literally lets your visitors be impressed by the Christmas lights, before finally smashing and exploding every single light. Check it out.

Looking for Inspiration?

Here are some more great resources for you to check out:

19
Ignite your brand, utilise user-generated content no matter where you or your audience are ›