The Sailor Moon Pocky Box : Articles

Help Desk: Layout


by Cyprine

A Lesser Splash: Splash Pages for the Masses

You’d think a simple preface to a website couldn’t be the source of so much webmaster woe and viewer irritation. I remember a few years ago when splash pages were all the rage – a good site simply wasn’t good enough unless it had a cool splash page. Which of course led all the not-so-good websites to emulate this trend, initiating a flashflood of poor splash page etiquette that lives on to this day.

The problem is that many wannabe webmasters simply don’t understand what a splash page is, let alone what it should accomplish and how it should be properly implemented.

A splash page is a page that loads as the default of your root directory (usually index.html or index.htm) but which does not contain your main site. Instead, it is a simple preface to your site, and provides a link for viewers to continue through into your main content page.

But this definition alone doesn’t encompass what a splash page should be. A splash page must accomplish these following tasks:

  1. List the browser requirements for your site.
  2. State the name of the site.
  3. Be equally compatible in all browsers.

And that’s it.

Now, I’m sure you’re scratching your head – after all, that list is very short. That’s intentional, folks. Still, let’s go over these tasks.

Browser Requirements
The problem with splash pages is that many webmasters want to consider the splash page to be part of their site. For the most part, it’s not. The cover of a book is not a part of a book, and while it can set the mood for anyone turning to the first page, the book does not rely on the cover page to relay whatever message that the book is trying to communicate.

Similarly, the splash page cannot be considered part of the site in the same way that the information section, the profiles section, the galleries and links are. Splash pages are intended to be seen once during any given visit, and to be promptly forgotten once someone has moved past it. Its most important function is to get people in the right shape, or the right mood to enter the site. The most relevant task is therefore to make sure everyone who tries to access the actual site is using the proper browser and system settings so that the main site doesn’t crash the visitor’s computer.

With so many web browsers available, it’s no surprise that most people who access your site will do so with different conditions set for their computer. Some may be using Microsoft Internet Explorer, while others may be using Firefox or even Opera. Any seasoned webmaster knows that no site will look the same on every browser (unless it’s very simplistic and boring), but that same wise webmaster will have tried to make their site look as similar as possible in order to accommodate the diversity of viewers they’ll have coming to their site. This doesn’t mean just guessing, but actually having tested your site in each of these browsers.

The splash page acts as a way of notifying a viewer that they will or will not be able to see the site in its intended form. The splash page should list which browsers are supported and occasionally, which aren’t. Also, be specific; if you have tested your site on Microsoft Internet Explorer 6, you can say that any browser version later than 6 will be supported, but you can’t say anything about Microsoft Internet Explorer 5.5, so make sure you include version numbers whenever possible.

You will also need to notify your viewers of any “funky” coding being used by your site, including Javascript, Java applets and Flash. Many browsers and firewalls have these functions turned off, and by letting your viewers know that they will need to have those codes enabled to view your site will give them an opportunity to decide whether they want to turn off their firewall or not visit your site. It’s also good to mention what kind of layout you have if it’s different from a standard static layout – most importantly if the layout will be using iframes or popup windows (or both). Iframes are not supported by earlier versions of most browsers, and are still often displayed strangely, while popup windows, like Javascript, are usually disabled by most firewalls.

Cascading Style Sheets (CSS) is trickier -- one day, it will probably be no longer necessary to include in a splash page. Most modern web viewers are using browsers that can understand CSS (provided that the CSS is properly validated and well-written). But, it’s still a good idea to include such information for now, though I can imagine that within a year or two, this will no longer be necessary.

Lastly, any decent splash page will also include information about the minimum resolution needed to view the site without having to do too much horizontal scrolling.

What is not needed in a splash page are elements that are so basically ingrained in HTML coding that they should be supported by all browers. Including the fact that a site uses tables (a real example!!) is superfluous and indicates a basic misunderstanding of the point of splash pages.

So, if we have a site that uses CSS, iframes, is best viewed at 1024x768 and has been well-tested on Microsoft Internet Explorer 5.0, we might write in our splash page the following:

This site is best viewed in Microsoft Internet Explorer 5.0+ at 1024x768. Please ensure that your browser is able to display CSS and iframes.

It really is just that simple.

State the Name of the Site
Another task that the splash page should accomplish is an announcement to a viewer of what site they have encountered. It’s always a good idea to include either in the text of the splash page or on the enter button (if you choose to use a linked image as your enter button) what site this is.

Also, while the splash page is not actually part of your site, it still prefaces your site. You want your splash page to flow nicely into your main site, visually, so it’s often a good idea to give your splash page the same “visual theme” as your main site. Use the same background and font colours that are used in your main site, and if you designed your layout, it’s a good idea to re-design your splash page to suggest the same look as the main site design. For example, if you use an image of Eternal Sailor Moon on your main site, you might want to use the same image with the same paintbrushes, colours and filters to make your splash page button so that viewers aren’t jarred going from your splash page to your main site!

Many seasoned webmasters therefore use the splash page as an indication to repeat visitors that the site design has changed. Viewers who return to their site are notified, just by the look of the splash page, that a new theme is up, and they are prepared for the changed look of the site.

Lastly, please, please, please make sure that the enter link is prominent. I don’t know how many times I’ve visited a site only to get lost on the splash page, in which the enter button is not obviously marked. This is a big no-no that should require no further explanation.

Compatibility
This last issue is almost as critical as the first – your splash page absolutely must be compatible with all browsers. This is not a debatable point.

Your splash page presents to viewers what requirements they will need to view your site. It only follows, therefore, that the site telling the viewer what requirements they’ll need shouldn’t, itself, have any requirements. It’s so simple I’m almost surprised how often this last rule is violated.

How, you might ask, will you know if all browsers can view your splash page? It’s simple, really – don’t make your splash page flashy. Your splash page should employ simple HTML, very little CSS (if any) and use no Flash, Javascript, Java, or other clunky extras.

Your splash page does not need to grab anyone’s attention. It does not need to have a huge load time, nor should it be presenting that much information to the viewer. It should be fast-loading, easy to read, present the browser requirements, and have an enter button or text link immediately obvious. If I spend more than thirty seconds waiting for your splash page to load, looking at your splash page, and clicking into your site, you’ve done something wrong.

All browsers are able to understand basic HTML, and given that this allows for control of images, links, paragraph tags and background and font colour, you shouldn’t need anything else. Your splash page code should validate on any HTML validator, and probably shouldn’t be more than five lines long. If you keep your splash page simple, there’s no reason why everyone under the sun shouldn’t be able to see it properly.

So most of you are probably wondering, at this point, whether anything else might be added to your splash page. Optional content is, of course, always optional and nothing prevents a webmaster from including that content on their splash page, but it always must be done with care not to overdo your splash page, clutter it up, and increase load time to the point where it prevents those with slow connections from even accessing your site.

Splash page optional content may include:

Again, remember that your splash page is not part of your site. You should not expect your viewer to return to your splash page once they’ve made it into your actual site, so don’t put any information there that you absolutely have to have your viewers see go back to. Remember that any person loading your splash page and seeing all your affiliates might just decide to skip your site entirely and go there, instead, so keeping your affiliate list on your splash page only might end up directing people away from your site rather than into your site.

Another optional feature of splash pages is to separate out viewers who might want to access different versions of a site. Some sites offer a high speed connection versus a low speed connection version of their site. If you do, then it is important to provide a chance for viewers to choose the version they want to enter in the splash page, but I also provide the caveat that a well-designed web layout does not need a low-resolution version.

The bottom line is that while there might seem like more information would be relevant in a splash page, it should be content you feel your viewer must see before they enter your site. If you simply feel like your site affiliates or fanlistings have no other place to go, it’s better to put them in a page out of the way, in your navigation bar, than to throw forty fanlisting buttons onto a splash page that a viewer has to load before they’ve even gotten to your site.

By this point, you’re probably thinking I’ve taken all the fun out of splash pages. No fanlistings? No javascript? What’s the point?!?

Exactly.

Not every site needs a splash page, and having a splash page is not an indication of a good site. In fact, having a splash page may actually hurt your site – search engines tend to display your index page which, if it’s your splash page, will not be ranked as high as pages with better compatibility to the search terms since splash pages have little text in them. Splash pages may also distract people from your actual site, and lazy web viewers might not be inclined to visit your site based on a poorly designed splash page. You’ll notice that this site, the Sailor Moon Pocky Box does not use a splash page in its current incarnation. I designed the site, and the layout and coding is extremely simple. It is compatible in most browsers (untested in Opera), uses tables, and can be seen without horizontal scrolling in most common screen resolutions. When I designed this site, I opted out of a splash page precisely because that splash page would provide no useful information for the viewer.

Alternatively, my main Sailor Moon site does include a splash page. This is because the current layout uses iframes, and some of the games offered on the site require Javascript to be enabled. Therefore, I use my splash page to notify visitors of this requirement, and nothing more.

The take-home message of this article is, therefore, that splash pages are more often abused than used properly. If you are a budding webmaster, consider exactly what ‘technology’ your website uses and decide accordingly whether you will need to include a splash page. When in doubt, include one but keep it simple and make sure your splash page accomplishes the three main tasks listed above.