Creating a Splash Page

The Latest Article • Posted 4 years Ago • August 18, 2006

---

A splash page, sometimes referred to simply as a splash, is a full page drawing in a comic book. A splash page is often used as the first page of a story, and includes the title and credits.

With all the reboots and redesigns going on, or even otherwise, making nice splash pages is a skill to have. The CSS involved is rather simple. This article goes through the design and coding of a sample page.

For SEO reasons and practicality, it’s not definitely recommended to have a permanent splash page. That is: a small content-less entry page, with something like a logo and ‚Äúclick here.‚Äù However, such a thing if often useful with sites that have options between flash and html, or different languages - as an entry page.

One thing (and perhaps the only thing) that splash pages are very good for are the standard “coming soon” pages.

The Anand Sharma Guide to Creating a Splash Page

By Anand Sharma

Here are some demos for you visual people. They’ll give you an idea of the type of thing we’ll be learning to make.

Demo 1
Demo 2
Demo 3
Demo 3 Outlined
Demo 4
Demo 4 Explained

So, let’s get started.

Don’t get Wet!

These types of pages are perhaps the simplest possible - they don’t have much content or complex code at all. You normally just have an image or a block of content centered in the window. It could be a link to your website, or just say ‚ÄúComing soon.‚Äù The ‘challenge’ in making a splash page is the design.

This article will cover aligning different types of content, both vertically and horizontally. It will also deal with a few design techniques and aligning backgrounds.

Round One

The Simple Way

We will go through the process of designing a splash page — let’s say for a client whose website we are still working on.

Here we have two simple designs, created in Photoshop. What is good (or easy) about them is that they are just an image. Simple images are extremely easy to center with CSS. Especially if there is just a solid color in the background. View Image

The HTML

First we need to make the body the full height of the browser window.

html {
height: 100%;
}

body {
height: 100%;
}

And then apply the image. We will use the background property.. and use the position of center center (vertically & horizontally).

Which leaves us with..

html {
height: 100%;
}

body {
background: #fff url(1.jpg) no-repeat center center;
height: 100%;
}

Yep! That’s all. Check out the demo of this.
Vertically Centered
This is going to get a little messy.

Now let’s say we want to have some links or some type of content. That complicates things just a little. Now we have to treat the content as a block and position it likewise. So start off with putting it in a div, the only one we’ll have on the page.

div#center {
position: absolute;
top: 50%;
left: 50%;
margin: -(half of height)px 0 0 -(Half of width)px;
}

What we’ve basically done is position it so that it’s top left corner is in the center of the page. But that’s not what we want. So we have it move halfway over vertically and horizontally, effectively moving its centered point from the top left corner to its center.

It might be a little hard to understand at first, but it’s pretty simple. Check out demo two.

Part Three

Dude Where’s my Link?

The previous method, of absolute positioned centering is good if you want to have content. Now speaking from just the general way that things work, you’ll most likely want to have a link ‚Äì or perhaps a paragraph.

Of course, you could easily fill the box with some text and maybe some images. But I find it nicer to have a whole image made in Photoshop, with anti aliased text and perfect positioning. It’s a splash page and not a normal content page, so in my opinion you have some freedom here.

We’ll basically create a link, and position it as an overlay to our pseudo-link in the image. Within a relatively or absolutely positioned box, absolutely positioned boxes are positioned relative to their positioned container. In other words, normally absolute 0 0 is at the top left of the viewport. But if you make the element which it is in relatively positioned, then 0 0 becomes the top left of that, and not of the whole viewport. Good trick to know when dealing with positioning.

Anyways, we just give the link an id, then position it and give it a display of block. That lets us specify the height and width. Your mileage may vary.

#link {
position: absolute;
display: block;

top: 25px;
left: 20px;

height: 25px;
width: 110px;
}

This technique can be seen used on the dragon labs homepage, where the center link is a blank one superimposed over an image background.

The Demo and the same demo outlined for better understanding.
More

The Madness Never Ends!

Getting an image to play nicely with a complex repeating background can get tricky. One example of this is a page that I was working on where the background was a soft gradient, with some texture applied. I then had a box with rounded corners and shadows.

The solution was to apply the background vertically centered, so as the browser was resized, they would still be in the same orientation with respect to each other. Get what I’m saying? Check it out.

Lot of it is just a matter of thinking outside of the box and using background properties to your advantage.

Conclusion

Remember, this is just a small simple holding page. Keep it simple. A couple well designed elements will be more effective than a pageful of links and text.

Demo 1
Demo 2
Demo 3
Demo 3 Outlined
Demo 4
Demo 4 Explained

---

« Previous • 9 Comments • Digg it! • Next »

Comments

This place isn't ALL about me — just mostly.

---

---

Those were all the comments. But don't be shy — Add your own!

Leave a Comment!

Please enter your information and entry.

---

Name

Mail (will not be published, but is required)

Website

---

Or Contact me Directly »