The Ultimate Guide to Building an Effective Website Under Construction Page
Is your website temporarily unavailable due to maintenance, updates, a redesign, or pre-launch preparations? Don‘t leave your visitors hanging – create an engaging under construction page to retain your audience and generate excitement for your upcoming site.
An under construction page is much more than a "closed" sign on your virtual storefront. When done right, this placeholder page allows you to:
- Inform visitors about what‘s happening with your site and when it will be back
- Maintain your brand presence and professionalism
- Provide alternative ways for customers to contact you
- Protect your search engine rankings
- Capture leads and grow your audience
Whether your site will be down for a few hours or a few weeks, it‘s crucial to plan ahead and design an effective under construction page. In this complete guide, we‘ll share best practices, inspiring examples, and customizable templates to help you make the most of your website downtime. Let‘s get started!
7 Must-Have Elements of an Effective Under Construction Page
While the specific content of your under construction page will depend on your business and the reason for your site being down, there are some key elements every page should include for the best user experience and results:
1. Clear, Informative Headline and Message
The primary purpose of your under construction page is to communicate that your website is temporarily unavailable. Your headline and copy should convey this in a clear, concise and on-brand way.
Here‘s a formula you can follow:
- Headline: [Brand Name] Website Under Construction/Coming Soon
- Subheading: We‘re making updates to serve you better!
- Body copy: Our website is temporarily unavailable while we [reason for downtime]. We‘ll be back [date/time frame]. In the meantime, [call-to-action].
Be sure to infuse your brand voice into the copy and convey empathy for any inconvenience to the user. Whenever possible, provide a specific time frame for when the site will be live again.
2. Cohesive Visuals and Branding
Even with limited content, your under construction page should align with your visual branding so it‘s instantly recognizable to visitors. Incorporate your:
- Logo
- Brand colors and fonts
- Imagery that reflects your offerings or industry
Avoid generic graphics like "men at work" signs. Instead, have fun with the design while keeping it professional. You could feature an illustration of your mascot wearing a hard hat, an animated gif of your team "working behind the scenes" in on-brand colors, or an engaging branded background video.
3. Alternative Contact Information
Just because your website is down doesn‘t mean your business is closed. Make it easy for people to get in touch with you by including:
- Email address or contact form
- Phone number
- Customer service chat or chatbot
- Links to active social media profiles
Including alternative ways to contact your business helps maintain trust and prevents lost leads or sales.
4. Relevant Keywords
While the content on your under construction page will be minimal, it‘s still important to incorporate relevant keywords. This signals to search engines that your page is still active and helps you maintain your rankings.
Naturally weave in keywords in places like your page title, meta description, headline, and body copy. But avoid keyword stuffing as this can actually hurt your SEO. A few strategically placed keywords is all you need.
5. Lead Capturing Call-to-Action
Think of your under construction page as a unique opportunity to grow your audience before your new site even launches. Include a prominent call-to-action inviting visitors to:
- Sign up for your email list to be notified when the new site is live
- Follow you on social media for sneak peeks and updates
- Fill out a survey providing input on what they want to see on the new site
Offer an incentive, like a discount code or free download, in exchange for their contact information or engagement.
6. Entertaining or Valuable Content
Beyond the essential information, consider including an element of entertainment or value on your under construction page. This could be:
- A funny video from your team about the relaunch
- Interesting behind-the-scenes content about your redesign process
- A free resource or tool related to your business
- An exclusive offer or giveaway for visitors who engage
Providing something fun or useful gives people a reason to stay on your under construction page longer and keeps your brand top-of-mind.
7. Countdown Timer
If you have a set launch date for your new website, adding a dynamic countdown timer is an effective way to build anticipation. Just be sure you are confident in the relaunch date and have a backup plan if you need to extend it, to avoid showing a past due timer.
The countdown timer should be visually prominent and clearly labeled with the relaunch date. For example: "Our new site launches in [timer]" or "Something exciting is coming on [date]! [timer]"
Under Construction Page Layout Best Practices
In addition to including these key elements, how you structure and design your under construction page is important for usability and engagement. Follow these best practices:
Put the most important information above the fold
Visitors should be able to understand that the site is temporarily down and know what to do next without having to scroll. Include your headline, key message points and primary call-to-action in the top section of the page.
Keep the design and content simple
Limit the content to what‘s most essential and use concise, skimmable copy. Avoid overwhelming visitors with too many CTAs or images. Incorporate plenty of white space for visual breathing room.
Optimize the page for all devices
With more than half of internet traffic coming from mobile devices, it‘s crucial that your under construction page works well on any size screen. Use a responsive template, legible fonts, and images that scale.
Make the page interactive
Boost engagement by including interactive elements like animated graphics, an email signup form, or social media feed. You could even gamify the experience with a poll or trivia about your relaunch.
standout Under Construction Page Examples
Now that you know the formula for an effective under construction page, let‘s look at some brands who nailed the execution for inspiration:
Poo~Pourri
This top-selling before-you-go toilet spray company stayed true to their playful branding with this sassy under construction page. The copy pokes fun at the reason for the site being down while still providing key information like the expected relaunch date and links to their social profiles.
[Insert example image]Trello
The popular productivity tool took a meta approach by formatting their under construction page like a Trello board. Each "card" provided an update on the redesign progress, a form to submit feedback, and fun facts about the relaunch. This on-brand execution created transparency and trust during the transition.
[Insert example image]Chipotle
To drum up excitement for their new website and app, Chipotle created a mouth-watering under construction page. A video montage of their delicious ingredients was paired with a bold "COMING SOON" headline and launch date. The page also included a CTA to sign up for notifications and links to online ordering in the meantime.
[Insert example image]Barkbox
The subscription service for dog owners used their mascot pup to announce site maintenance in the cutest way. Bark Box‘s page features an adorable photo of a dog with a tool belt and a cheeky message about "working like a dog" on the site updates. Social profile links and a subscriber email form are included to keep fans engaged.
[Insert example image]Customizable Under Construction Page Templates
Want to create a well-designed under construction page without starting from scratch or needing to code? There are plenty of free and low-cost templates you can easily customize for your brand and needs. Here are our top picks:
Elementor Coming Soon
This free WordPress plugin offers stylish, ready-to-use under construction and coming soon page templates. With a simple drag-and-drop editor, it‘s easy to add your own copy, logo, forms, and more. The pages are all mobile responsive and include perks like a built-in countdown timer and subscriber admin dashboard.
[Insert example image and link]Rocket Coming Soon Template
Designed for promoting new apps or digital products, this animated HTML template features engaging graphics and a slick countdown timer. Simply replace the logo, background, and text with your own branding and launch details. It‘s also fully customizable for developers who want more control. Available for just $12.
[Insert example image and link]HubSpot Coming Soon Template
HubSpot offers this bold and bright under construction page template as a free resource. The layered design and CTA button are easy to update with your brand colors and copy. As a bonus, the template is already optimized for lead generation with an email signup form. It can be embedded on any existing website.
[Insert example image and link]Divi Maintenance Mode Layout Pack
Divi is a powerful WordPress page builder used by over 700,000 websites. Their Maintenance Mode Layout Pack add-on provides 20+ pre-built under construction page templates in a range of styles, from playful illustrations to sleek countdown designs. Customize any of the templates using the Divi editor. A 1-year license is $89.
[Insert example image and link]How to Set Up an Under Construction Page in WordPress
Once you‘ve designed your page, you need to set it as your site‘s default homepage while you work on the full site behind the scenes. Here‘s how to do that in WordPress:
- Install a maintenance mode plugin like Coming Soon Page & Maintenance Mode by SeedProd or UnderConstructionPage.
- In your WordPress dashboard, go to Settings > [Plugin Name] and create a new page.
- Customize the content and design using the plugin‘s editor.
- Choose your preferences for which user roles can access the full site. You may want to allow administrators and editors to bypass the under construction page.
- Set the page status to Active or Enable to make it go live on your domain.
That‘s it! Your under construction page will now display to visitors while you build your new site.
Maximize Your Website Downtime
Failing to plan for scheduled site maintenance is a missed opportunity to engage your audience and sustain your online presence.
With these best practices and inspiring examples, you can create an under construction page that captivates visitors and converts them into subscribers or customers. By designing a useful, user-friendly experience, you‘ll build anticipation for your new site and keep your business top of mind.
Website downtime doesn‘t have to mean shutting out your audience. Make the most of this transition period with a stellar under construction page. Your future site traffic will thank you!
