As more of life takes place online, businesses are looking to engage with their target audience quicker, or fear losing them. Gen Z’s typical attention span clocks in at a mere 8 seconds, while Millennials can hold focus for 12 seconds.
To make a valuable first impression online, add a splash page to your website. This strategic page, also known as an intro page, greets visitors before they even reach your homepage—and can engage them immediately.
This article will explore exactly what a splash page is, why it’s useful, and how to add one to your website. We’ll also show you some great examples to help you build a splash page of your own.
Ready to make a splash? Start by creating a website of your own.
What is a splash page?
Splash pages capture a visitor's attention before entering your website. Your splash page introduces them to your site and then leads to the homepage. A splash page can both benefit your branding and marketing efforts by maintaining brand consistency and messaging, and be used for a variety of practical scenarios. From a design standpoint, this web “accessory” will enhance your website’s look and impress viewers with flair. Splash pages may also utilize more web design elements such as animations, video and unique elements than a website’s main page.
Splash page vs landing page vs homepage
Many web users confuse a splash page with a landing page or homepage, but while these three web design assets share similar forms, they perform different functions on a live website. A landing page is a destination, a single page that gets visitors to complete an action or click through to an end goal. Your homepage acts as your website’s main page.
Apart from images and a description, a homepage typically also includes a navigation menu that visitors use to browse through the site’s categories and pages.
Why use a splash page?
A splash page can perform many functions on your website. Browse through the options listed below and decide your own splash page’s purpose. Focus on just one or two goals to keep it short and sweet.
Charm visitors
Use complementary visual elements on your website’s splash page to show off your work and grab your users’ attention. This clever marketing tactic can work for any business site, but it especially shines for art, photography or design portfolios.
Some of the best website designs use splash pages to show off photographs, graphic designs or videos and give visitors a taste of what’s to come.
Advertise a launch or event
Use a splash page to showcase a soon-to-be-released product or an upcoming event and further your marketing efforts. This can effectively notify visitors and create excitement around your upcoming launch.
With this marketing momentum in mind, add a contact form to your splash page for extra engagement, letting visitors know that you’ll use this information for future updates.
Restrict access to your site
If your website deals with sensitive content or products that are restricted to a particular group, a splash page is a smart way to add a prominent disclaimer. For example, an online alcohol store can use a splash page to ensure that visitors to their website are of legal drinking age.
Allow visitors to choose a language or region
Building a multilingual website will make information about yourself or your brand more widely available by providing translated and localized content for users.
A splash page can provide space for users to choose their language and location preferences before they arrive at your website. This makes for easy navigation and a pleasant user experience.
Alleviate wait times
While stellar website performance and page speed are of utmost importance for users, there are, in fact, times when a page or screen needs to load. Particularly for mobile websites, splash pages can be used to display creative elements (like a loading bar) to indicate the remaining time until the next screen loads.
As Khalil Habashi, technical and UX designer for Wix, explains:
“On mobile, there is way less incentive for users to wait. Especially because mobile users are out in the world, on-the-go and time is a commodity. That's why today, mostly on mobile, you see gamification of splash screens with tap gestures and swipe features. It’s a creative and playful way to keep users engaged while they wait.”
Habashi also explains that this gamification approach is only appropriate for mobile splash screens, since on desktop, users browse differently; they’ll likely click to another window or leave. For desktop users, it’s recommended to clearly indicate the expected page load time.
Evolution of splash pages
As with most web design trends, splash pages have been considered both en vogue and passé.
In web design’s evolution, flash technology was new in the late 90s as, “interactive menus, splash pages, decorative animations, and beautifully rendered bubble buttons dominated the web design trend to wow people.” But in the mid-to-late 2000s, splash pages already felt dated and drab.
In 2014, Gene Crawford discussed with Creative Bloq why this “long-dead design pattern” was already making a comeback. According to Crawford:
“I actually feel that [splash pages] may help draw the visitor in more, as the creators of the original splash pages intended, and it makes really neat visual interactions possible, like the main navigation bar scrolling into place and becoming 'locked' in the header area. This simple movement really helps to focus the visitor’s attention on the site's navigation.”
Crawford’s key takeaway was that if a splash page created any friction to the user experience, it should not be used.
Jenna Romano, web design blogger at Wix, shares that a splash page must align with a website’s cohesive visual identity. “A splash page is not a pop-up that is distinguished from the rest of your site, it’s almost a website in and of itself,” Romano shares. “It must uphold the functional and visual aspects of the overall web design”
To put it simply, a splash page should draw visitors in—not push them away.
SEO and splash pages
Just as web design trends have evolved, overall functionality has, too. For example, the way that search engines crawl and index websites has changed over time, but one thing remains constant—content must be accessible.
To avoid splash pages causing any SEO issues, follow Google’s popup guidelines. First, remember that Google uses mobile-first indexing, so pay attention to their guidelines on mobile interstitials.
5 splash page examples for inspiration
Let’s look at some great splash page examples:
Zara
As a global retailer, Zara’s corporate website is available around the world. When you first enter the website, Zara’s splash page greets you and asks for language and location information. This simple step, using two drop down menus, optimizes and personalizes the browsing experience with the correct language and currency for pricing.
In addition, Zara’s splash page has a minimal, almost quiet design. A striking image puts Zara’s clothing front and center, enticing visitors to click through to the good stuff. The overall aesthetic is consistent with the brand’s products and brand identity, and confirms that visitors have landed in the right place.
Spritz Society
Upon entry to Spritz Society’s bright and colorful website, an age verification splash page greets you. Think of it like a virtual bouncer, or getting ID’d to confirm that visitors are the legal drinking age to access the site.
While there is no law or regulation that requires age verification, with DTC alcohol products on the rise, more attention is falling on alcohol brands to provide clear verification on their websites. There are more age verification steps such as state-approved online verification providers and carrier ID inspection (adult signature required upon delivery) to prevent underage sales of alcohol.
Regardless, if your brand sells alcohol, cannabis or any other age-specific product, the first and most important step is a splash page to verify that all visitors are of legal age before accessing your content.
H&M
Here’s another fashionable splash page example for location and language selection. H&M’s splash page lists every possible location and language by continent. Unlike a drop-down menu, this method clearly and conveniently lays out all the relevant information. Furthermore, each language is localized and displayed in the correct dialect, which makes this more accessible for first-time visitors to navigate to their respective site.
H&M’s splash page also showcases their brand identity, with bold on-brand imagery that highlights their products.
The New York Times
The New York Times not only asks users to log in, but also requires visitors to subscribe before reading their articles. This “paywall,” or a splash page that requires readers to subscribe or pay a fee before accessing content, is a common monetization strategy among digital publications.
For first-time visitors, The New York Times offers three articles free of charge to sample content and entice them to subscribe. On the fourth article, the paywall pops up.
When creating your splash page, keep in mind that, without proper implementation, paywalls can alienate audiences or negatively impact customer retention.
Football.com
Football.com’s splash page takes language and region into account, cleverly playing on the variation between American football and European football (known as soccer to most North Americans). With clear visual representation of each respective sport, users can select their desired region and game version. Once they’ve selected, they receive curated content based on their preferences.
This splash page example also includes an option to opt out from seeing it in the future. By selecting “Don’t show me this again”, returning users can bypass the splash page on return visits.
How to create a splash page
If you’ve decided a website splash page is right for you, you have two methods to create your own: do it yourself or hire a designer.
Do it yourself
When you use a website builder like Wix, you can access a range of customizable templates to suit your website needs. Alternatively, you can use the templates as inspiration to create something unique from scratch.
Check out these splash page templates and start creating your own.
Keep the design simple and visually appealing to grab visitors' attention. Use high-quality images, concise text and a clear call-to-action (CTA) that encourages users to explore further into your website.
Clearly communicate the purpose of your splash page, whether it's to announce an event, promote a product or collect visitor information. Review that the message aligns with your website's overall goals.
Consider when the splash page should appear – upon arrival, after a few seconds, or when a specific action is taken. Add interactive elements like animations, videos or interactive forms for higher user engagement.
Make sure your splash page is mobile-friendly to provide a seamless experience across devices.
Provide a seamless transition from the splash page to your main website content. Include a visible option to enter the site or continue browsing for a user-friendly experience.
Track analytics on your splash page to measure the splash its performance, including conversion rates and user behavior. Use this data to optimize design elements and messaging for better results.
Hire a designer
Alternatively, you can hire a freelance web designer to create your website’s splash page.
What to include in your splash page and why
Before you start building your splash page, define your goals. Are you looking to promote an upcoming event? Do you want to wow visitors with stunning visuals or grow your mailing list?
What you include in your splash page will vary by industry, personal taste and business goals. Try including these effective elements in your splash page:
Eye-catching visuals: A splash page can attract visitors with intriguing visual elements that represent yourself, your work or your brand. Since a splash page typically includes very few elements, upload a background image that will stand out. Speaking of visuals, be sure to create a logo and include it on your splash page—since this is the face of your brand, it will indicate to visitors that they’re in the right spot.
Concise messaging: A splash page should include a succinct message that informs the viewer, describes your brand and conveys that there’s more to come. Apart from welcoming users to your page, you can include text that will inform your audience of relevant updates or provide them with instructions before entering your site. Or you could use it to even set the tone with an inspiring quote. Remember to use short, action-oriented text—visitors shouldn’t have to read a full page before reaching your site. Remember to also use language that’s consistent with your brand identity.
A clear exit link: Your intro page must carry viewers to your homepage. Add a button with a clear call-to-action that reads “enter here” to ensure visitors reach their final destination. If the main purpose of your splash page is to give visitors language options or view a specific website version, this is the place to let them choose their preferences and direct them to the relevant homepage. Ideally, splash pages shouldn't ask visitors to take specific actions. However, if your splash page promotes an offer, advertises a specific product or directs traffic to a certain page—use a clear call-to-action.
How to optimize a splash page
While you can design a splash page however you please, consider these pro tips while you create your own:
01. Use visual hierarchy
Keep visual hierarchy in mind when laying out your site’s splash page elements. Consider each component’s size and placement to ensure everything works in a fluid and effective manner.
02. Keep it consistent
Since the splash page is a preface to your website, keep the style—including use of language, as well as your website’s color scheme and imagery—consistent with the rest of your website design. This will not only please visitors aesthetically, it will also strengthen your branding.
03. Ensure speedy loading time
A slow loading website will cause even the most patient of people to leave a page. When creating your page and adding in elements, follow a flat architecture structure and keep in mind how each element may affect your page speed.
04. Add subscription forms and social media accounts
A splash page lets you capture contact information and sign up both new and returning visitors for your newsletter mailing list. Additionally, add social media icons linked to your relevant accounts to help your audience to follow you and stay up-to-date with your latest ventures.