Creating Good Splash Pages

Posted on: December 7th, 2011

DISCLAIMER: There has been one instance where someone was penalized by SERP for using the redirect. I am looking into the issue, but in the meantime I wanted you to be aware of the situation. I personally have no issues with this code and the site I used it on is still working.

When creating a splash page, it’s easy to turn visitors off or away. They’ve come to your site to see specific content and when they can’t access that content, they’re going to throw their computer out the window.

Alright, so it probably won’t be that intense, I’m just saying it could happen. A splash page is generally used to show some new information about your company or yourself that is important for visitors to know. Say you’ve moved locations, merged your company, or you finally got that rare Ninja Turtles collectible and want to make people jelly. These are all great reasons to have a splash page.

Where To Begin?

So how should you go about creating your “my action figures are better than yours” page? Start by creating a splash.html page (these methods are my own and are not the only ways to create a splash page). This will be where all of your splash page content goes.

The Code

Next you will need two pieces of Javascript. The first is below (source).

<!--
/* Copyright http://www.perlscriptsjavascripts.com 
   Free and commercial Perl and JavaScripts     */
   
// page to go to if cookie does not exist
go_to_splash = "http://www.hartleytest.com/code/splash.html";

// number of days cookie lives for - in this case, 60 days
num_days = 60;
function ged(noDays){
    var today = new Date();
    var expr = new Date(today.getTime() + noDays*24*60*60*1000);
    return  expr.toGMTString();
}

function readCookie(cookieName){
    var start = document.cookie.indexOf(cookieName);
    if (start == -1){ 
                // a cookie will be added and the page redirects to splash.html
                document.cookie = "seenit=yes; expires=" + ged(num_days);
		window.location = go_to_splash;
    } else {
               // if a cookie still exists, there will be no redirect
    }
}

readCookie("seenit");
// -->

This piece of Javascript goes in index.html. When a visitor goes to index.html, the Javascript runs and checks for a cookie. If a cookie exists, nothing happens, but if a cookie does not exist, the page will redirect to splash.html.

As long as this script is placed before the closing head tag, your visitor won’t see a flash of index.html before the redirect. Once on splash.html the visitor will see all of your wonderful content.

The Other Code

To get them back to index.html, you can either add a link, or use a Javascript redirect like the code below (source).

<!--
setTimeout("location.href = 'http://www.hartleytest.com/code/index.html';",8000);
-->

By placing this code before the closing head tag, a redirect timer will be triggered. The above timer is set to 8000 milliseconds, or 8 seconds. If your splash page is content heavy, you should definitely increase the redirect time and most likely add a ‘Continue to Home Page’ link.

Note: for above script, be sure to place inside script tags.

Closing Words

That’s pretty much it. If you’ve successfully placed those pieces of script, you should be able to go to index.html, have it redirect to the splash.html page, then back to index.html after 8 seconds.

If you want to change the number of days the cookie exists, just switch ‘num_days=60’ to something else, like 2 or 12, or whatever.

If you’ve got questions or methods to improve upon this one, please leave me a comment down below.

Tags: , , ,

previous post: Golf Road Warriors next post: Top 10 Albums for Maximum Coding Efficiency