{"id":72988,"date":"2024-03-15T20:30:00","date_gmt":"2024-03-15T09:30:00","guid":{"rendered":"https:\/\/elements.blog-cms.envato.net\/?p=43056"},"modified":"2025-11-11T18:55:49","modified_gmt":"2025-11-11T07:55:49","slug":"create-website-under-construction-page","status":"publish","type":"post","link":"https:\/\/elements.envato.com\/learn\/create-website-under-construction-page","title":{"rendered":"How to Create a \u2018Website Under Construction\u2019 Page that Still Showcases Your Brand"},"content":{"rendered":"\n

Whether you\u2019re building your first website or working on a redesign, you need a \u201cwebsite under construction\u201d page to let visitors know why your site is offline.\u00a0Now, while you could <\/em>create a simple blank page that says \u201cwebsite under construction\u201d and leave it at that, why not build a memorable, on-brand page that keeps visitors engaged and anticipating your relaunch? <\/p>\n\n\n\n

A good \u201cwebsite under construction page\u201d is unique and enticing, using brand identifiers and interactive elements to turn a frustrating, inconvenient user experience into an engaging and valuable one.\u00a0Want to know how to create your own on-brand \u201cwebsite under construction\u201d page? Let\u2019s get started.<\/p>\n\n\n\n

Common Types of Error Pages<\/h2>\n\n\n\n

\u201cWebsite under construction\u201d pages are just one of many types of error pages that you can create. The most common ones include:<\/p>\n\n\n\n

Website Under Construction<\/h3>\n\n\n\n
\n
\n
\n
\n
\n \"Website\n <\/div>\n <\/div>\n\n
\n \n <\n <\/a>\n \n >\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n
\n
\n

\n Website Under Construction Line Scene <\/h3>\n\n
\n By\n \n krugli <\/a>\n in\n \n Graphics <\/a>\n <\/div>\n <\/div>\n\n
\n \n View more\n <\/a>\n <\/div>\n <\/div>\n<\/section>\n\n\n\n

\u201cWebsite under construction\u201d pages tell visitors that your web page is still being built.<\/p>\n\n\n\n

They can also be used if you redesign your website, perform planned maintenance, change domain names<\/a>, or join two websites together. <\/p>\n\n\n\n

\u2018404′ Page (Not Found)<\/h3>\n\n\n\n
\n
\n
\n
\n
\n \"404\n <\/div>\n
\n \"404\n <\/div>\n <\/div>\n\n
\n \n <\n <\/a>\n \n >\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n
\n
\n

\n 404 Page Illustration <\/h3>\n\n
\n By\n \n craftworkdesign <\/a>\n in\n \n Graphic Templates <\/a>\n <\/div>\n <\/div>\n\n
\n \n View more\n <\/a>\n <\/div>\n <\/div>\n<\/section>\n\n\n\n

If a user mistypes a URL or clicks on a broken link, a 404 page will display. 404 error pages tell the user that the page they\u2019re looking for doesn\u2019t exist and will usually direct them to another page on the website.<\/p>\n\n\n\n

‘403’ Page (Forbidden)<\/h3>\n\n\n\n
\n
\n
\n
\n
\n \"Banned\n <\/div>\n <\/div>\n\n
\n \n <\n <\/a>\n \n >\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n
\n
\n

\n Banned Account – Landing Page <\/h3>\n\n
\n By\n \n TanahAirStudio <\/a>\n in\n \n Graphic Templates <\/a>\n <\/div>\n <\/div>\n\n
\n \n View more\n <\/a>\n <\/div>\n <\/div>\n<\/section>\n\n\n\n

A 403 page displays if a user tries to access a web page that they don\u2019t have permission to view. So, the server recognizes the request but refuses to fulfill it. You might find this if the page is behind a sign-in page or only available to internal users.<\/p>\n\n\n\n

‘410’ Page (Gone)<\/h3>\n\n\n\n
\n
\n
\n
\n
\n \"No\n <\/div>\n <\/div>\n\n
\n \n <\n <\/a>\n \n >\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n
\n
\n

\n No Search Found Vector Illustration <\/h3>\n\n
\n By\n \n spacestudios <\/a>\n in\n \n Graphics <\/a>\n <\/div>\n <\/div>\n\n
\n \n View more\n <\/a>\n <\/div>\n <\/div>\n<\/section>\n\n\n\n

A 410 page tells a user that the page they\u2019re looking for no longer exists. It\u2019ll usually redirect them to an up-to-date page version or a search option. <\/p>\n\n\n\n

‘429’ Page (Too Many Requests)<\/h3>\n\n\n\n
\n
\n
\n
\n
\n \"website\n <\/div>\n
\n \"website\n <\/div>\n <\/div>\n\n
\n \n <\n <\/a>\n \n >\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n\n
\n
\n

\n website under construction or error Illustration <\/h3>\n\n
\n By\n \n orenjistudio <\/a>\n in\n \n Graphics <\/a>\n <\/div>\n <\/div>\n\n
\n \n View more\n <\/a>\n <\/div>\n <\/div>\n<\/section>\n\n\n\n

The 429 error code will display if a user sends too many requests within a given period. <\/p>\n\n\n\n

Custom Error Pages<\/h3>\n\n\n\n

A custom error page is an error page of any type customized to reflect the brand\u2019s unique personality. Custom error pages include images, funny messages, helpful advice, redirects, and other elements that keep users engaged on the site.<\/p>\n\n\n\n

How to Create a Page that Stays Authentic to Your Brand<\/h2>\n\n\n\n

Every website page you create should feel true to your brand identity, even under construction. A plain white page with black text isn\u2019t likely to get people checking back, but something engaging will. Let\u2019s discuss how you can create a \u201cwebsite under construction page\u201d (or any type of error page) that stays authentic to your brand. <\/p>\n\n\n\n

1. Select a Concept<\/h3>\n\n\n\n

Before you start building, flesh out a concept for your page. Your concept design should align with your brand\u2019s personality while achieving its overall purpose \u2014 communicating that your website isn\u2019t currently available.<\/p>\n\n\n\n

Let\u2019s say you\u2019re a sleek, sophisticated jewelry company. The design of your page should reflect this with a modern layout and simple, elegant imagery of your products. Whereas if you\u2019re a creative gaming company, your error page might be more colorful and quirky.<\/p>\n\n\n\n

Take a look at this example by Hootsuite. Their brightly-colored construction page features their iconic brand mascot and even dishes out some fun owl facts, perfectly showcasing their uplifting, playful personality.<\/p>\n\n\n\n

Using a website template is one easy way to ensure all your pages convey the same image. By subscribing to Envato Elements, you can access thousands of website templates<\/a>, WordPress themes, landing page templates, and more \u2014 all completely customizable.<\/p>\n\n\n\n

2. Incorporate Your Current Brand Elements Consistently<\/h3>\n\n\n\n

According to Marq’s report, 68% of businesses<\/a> say maintaining brand consistency contributed to over 10% of their revenue growth. So, crack out your brand style guidelines and create error pages considering the following elements.<\/p>\n\n\n\n

Color Palette<\/h4>\n\n\n\n

A consistent color scheme boosts brand recognition. Use your brand\u2019s signature color palette to help visitors identify your brand.<\/p>\n\n\n\n

Brand Logo<\/h4>\n\n\n\n

A well-designed brand logo conveys professionalism and visual consistency. Feature your logo prominently on your error page to drive brand recognition and increase customer trust. <\/p>\n\n\n\n

Font Style<\/h4>\n\n\n\n

Keep your font style and typography consistent by using the same fonts throughout your website. They should be easy to read, especially for error pages, so the user understands what happened.<\/p>\n\n\n\n

3. Write Engaging Content<\/h3>\n\n\n\n

Even the most beautifully designed page is useless if it doesn\u2019t tell the viewer anything. Creating engaging content<\/a> is a must. The following tips can help:<\/p>\n\n\n\n

Catchy headline<\/h4>\n\n\n\n

A catchy headline draws website visitors in. Instead of bouncing after a glance, visitors are inclined to linger on your page. Plus, the more catchy your headline is, the more likely visitors will remember your website\u2019s launch time\/date and return to check you out. <\/p>\n\n\n\n

So, have fun with it! Use humor, puns, and emotive language to engage your visitors. Take a look at Flickr\u2019s under construction for inspiration. <\/p>\n\n\n\n

\"Flickr<\/figure>\n\n\n\n

Not only is their humorous headline memorable and on-brand, but their clever use of imagery creates a delightful viewing experience. Surprisingly, this image has become one of Flickr\u2019s most famous photos (and the panda is an official brand mascot). <\/p>\n\n\n\n

Concise overview <\/h4>\n\n\n\n

Even the most self-explanatory error messages should include a note briefly describing why the user has been directed to the page.<\/p>\n\n\n\n

If your site is under construction, let visitors know when it\u2019ll launch. If it\u2019s undergoing scheduled maintenance, assure visitors you\u2019ll be up and running shortly. Keep visitors informed by letting them know what you\u2019re doing (for example, switching to a .io domain<\/a> or fixing some pesky website bugs).<\/p>\n\n\n\n

For other types of website error pages, such as 404 and 410 pages, briefly explain to the user why they\u2019re seeing this error message. This can be done in just a few words \u2014 \u201cwe can\u2019t find the page you\u2019re looking for\u201d or \u201cthis page doesn\u2019t exist\u201d are perfectly to the point.<\/p>\n\n\n\n

Contact information and social media links<\/h4>\n\n\n\n

Be aware that when your website is undergoing maintenance, it inconveniences your website users.  <\/p>\n\n\n\n

Let’s say a customer has a time-sensitive purchase or an important query they need to answer. If they can\u2019t access your website, it can be a frustrating \u2014 and potentially relationship-damaging \u2014 visitor experience. <\/p>\n\n\n\n

Along with your email address, provide your phone number so that customers can contact you via telephone or web calling<\/a>. Link to your social profiles, too, so visitors can access the latest updates and interact with your brand via your public feed or direct messages.  <\/p>\n\n\n\n

Progress updates<\/h4>\n\n\n\n

If your site is under construction \u2014 and you know the exact launch time and date of its launch \u2014 consider using a countdown timer. Countdown timers show your progress and create excitement and anticipation around your launch. <\/p>\n\n\n\n

4. Integrate Interactive Features<\/h3>\n\n\n\n

Instead of creating a static error page, why not increase its value with interactive elements like animations, games, or call-to-actions?<\/p>\n\n\n\n

Here\u2019s an example by Spotify. They use a fun record animation to turn what could be an annoying experience into an entertaining one. Some handy links also help users get to where they need to go.<\/p>\n\n\n\n

\"Spotify<\/figure>\n\n\n\n

Adding interactive elements is a particularly rewarding strategy for a .ai domain <\/a>as it proves your commitment to embracing modern features and technologies. Subtly demonstrate that your brand isn\u2019t like the rest; it\u2019s innovative and exciting, drawing users back to your website after launch.<\/p>\n\n\n\n

Where do you find interactive elements for your error page? Explore Envato Elements\u2019 huge variety of customizable 404-page templates<\/a> and graphics.<\/p>\n\n\n\n

5. Streamline Mobile Responsiveness<\/h3>\n\n\n\n

A substantial amount of web traffic now comes from mobile devices. That means if your website pages aren\u2019t accessible, you can lose out on many customers. Luckily, it\u2019s easier than ever to create responsive, mobile-friendly error pages using website builders and plugins. You can check mobile responsiveness using online tools like BrowserStack. <\/p>\n\n\n\n

6. Optimize Analytics and Tracking<\/h3>\n\n\n\n

Use analytics and tracking tools like Google Analytics and Google Search Console to gather insights on user activity. Discover what keywords drive traffic, which campaigns users interact with, their location, their devices, and more. Understanding why people end up on your site can help you target it more effectively – which is very useful while it\u2019s still under development!<\/p>\n\n\n\n

7. Testing and Constant Feedback<\/h3>\n\n\n\n

Use A\/B testing to optimize your error pages. A\/B testing involves presenting two different segments of your audience with two different versions of your website page to see which one drives the most engagement and repeat visitors. Don\u2019t forget to ask for feedback \u2014 you can link to your feedback form on your error page. <\/p>\n\n\n\n

How to Use an ‘Under Construction’ Page to Your Advantage<\/h2>\n\n\n\n

1. Marketing and Promotion<\/h3>\n\n\n\n

Your \u201cwebsite under construction\u201d page lets visitors know there\u2019s exciting work behind the scenes. So, you can use the page to market and promote your upcoming products, new features, or services. 404 pages are also a great place to direct visitors toward your best-selling products or content.<\/p>\n\n\n\n

\"Hubspot<\/figure>\n\n\n\n

Plus, you can create social media brand campaigns<\/a> (such as creating a branded hashtag) to build social proof and incite hype around your launch. <\/p>\n\n\n\n

2. Ongoing Updates<\/h3>\n\n\n\n

On your \u201cwebsite under construction\u201d page, let visitors know what you\u2019re currently building and how long it is left until completion. Or, if you don\u2019t have a set date but have a presence on other platforms, make sure to link to them. Many people will happily follow you on social media for ongoing updates, providing you with a ready-made audience when you\u2019re good to go.<\/p>\n\n\n\n

3. Ensures a Smooth Transition<\/h3>\n\n\n\n

Hooray \u2014 your site is ready to launch! Follow some of these best practices to aid a smooth transition to your full site: <\/p>\n\n\n\n