First impressions have the ability to make or break a business. When it comes to your website a splash page is great way to say all the things you need to say right before someone enters your page. In this article we will look into some Splash page examples that is used to promote a product or service or announce an important upcoming event or even evoke a sense of mystery or exclusivity.
In This Article I am going to explain:
- what are splash pages
- The importance of splash page for website (Splash page examples)
- how to build splash pages
what are splash pages ?
A splash page is a page that precedes any page on your website. A typical splash page contains minimal message, a background image, and most importantly a link that takes the visitor to the main website.
splash page vs landing page
A lot of times splash pages are confused with landing pages but they are different:
|splash page||landing page|
|By definition||A screen that pops up when you first enter a site||A standalone page created to fulfill a conversion goal|
|The main goals||– Provide valuable information to visitors|
– Drive people to a particular call to action (CTA)
|For a specific conversion goal:|
– Newsletter subscribers
– Content downloads
– Contest entries
– Webinar registrations
|Length||It’s mostly a short page||It may be a long or short page|
|The creation process||Can be created in a few minutes||Can be lengthier and in more than a few minutes|
The importance of splash page for website (Splash page examples)
Splash pages have all kinds of use cases for lots of different businesses.
When you navigate to the Ikea website, you get a friendly greeting and the opportunity to choose which site you’d like to view based on your location. The function it serves is immediately apparent, reducing the time it takes for visitors to get to the good stuff in their region.
Most websites that operate across regions and languages will now automatically detect location and language and take you the site that fits (using Geotargeting ), but it’s not an exact science and can still end you in a site in a language you don’t understand struggling to find the language selector.
The official Zara website still uses a splash site to ask visitors to choose. It also avoids the common error of confusing language and region, not assuming that everyone in a particular country prefers to communicate in the dominant language, so the US store, for example is available in both English and Spanish.
For a brand with stores in 96 countries, it makes sense and avoids sending people away from the site all together if they arrive at a store they weren’t looking for. But Zara also takes advantage to dazzle with impressive imagery. In the case of the Zara page, the site stores your preferences for the next time you visit, to avoid getting tired, and they change it every couple of months to make sure people are seeing something new if they visit again.
Freelancers who look for one-page websites can make use of a splash page as their digital calling cards. This example includes a concise professional background of the site owner and CTAs that take visitors to various contact options.
4. Atlantic Oceanfront Motel
This is a simple splash page design used by a small business motel. The images look great and contribute to the business objective of introducing what the location can offer. It also includes contact information at the bottom of the page, along with a CTA for entering the website’s main page.
5. Lukas Lindemann Rosinski
This is a splash page for an advertising agency’s website that’s deceptively simple until one explores the elements to see how much creativity went into the whole page. All the elements including the 3D logo design are interactive, allowing the business to showcase its skills and build enough credibility to increase the chances of getting new clients.
how to build splash pages
Creating a Splash Page like the Splash page examples we showed above :
Decide what you want your splash page to display to new visitors. You can create a splash page in basic HTML, or a more elaborate page using a program like Flash.
Use a basic text editor like Notepad if you don’t have a Web design program. Design your page as desired. You can use Cascading Style Sheets (CSS) files to format the page if you have them on your website. Avoid using large image files. Most imaging editing software lets you reduce file sizes without reducing the quality seen on a Web browser.
Create at least one link to direct visitors to what is now your current home page, using “index2.html” as the link. For example, to create a text link using standard HTML, you would write:
Save the file with the name “index.html” as the filename. If you are using a text editor like Notepad, save it in plain text format.
Uploading the Splash Page
Launch your favorite FTP client and connect to your website FTP server. If you are unfamiliar with this process, your Web host will provide details on your account page, including your FTP username, password and specific ports that should be used. Free FTP clients are available for download like FIlezilla or CuteFTP, or your Web host may offer a Web-based FTP service.
Navigate to the main directory for your website.
Locate the “index” file in the main directory of your website. Note the file may be “index.html” or “index.htm.” These extensions are interchangeable. If your current homepage uses the “.htm” extension, rename your splash page with the same extension.
Create a backup of your website by downloading all of the files in the main directory and saving them on your computer. In most FTP clients, you can do this by right-clicking the folder and selecting “Download.”
Using a Web browser, navigate through your website and identify any “Home” links. Find the file for each page that you just downloaded to your computer and use a text editor to rename these links from “index.html” or “index.htm” to “index2.html.”
Create a copy of the “index” file using your FTP client, and name the copy “index2.html.”
Upload your new “index” splash page file into the website directory as well as all the pages you modified with a new “Home” link. A confirmation message should open warning you that you are replacing the current file. Click “OK.”
Open a Web browser and navigate to your website. Press “F5” on the keyboard to refresh the screen. Click the links on the web page to ensure they are working properly.
Free honest and effective tips and tutorials in digital marketing
Today the internet is filled with misleading , time-wasting content. This is why we are putting long hours searching and providing articles that is just honest and effective so we save your time and provide value to our audience.