Published

I’m not a huge fan of Under Construction style landing pages — I rank them just below websites that make me Click here to enter — but that doesn’t mean we can’t have some fun building them (and perhaps learn a thing or two).

Live example

If you’ve spent a healthy amount of time doing this webdev thing you have probably come across lists of Creative 404 Pages. I thought of doing something along the same lines with the Under Construction page and started searching around the Internet to get the creativity jumping. But then it hit me:

Why should I make users wait to see a page that essentially says “There is nothing here yet, please come back later”?

And my answer was I shouldn’t. And so I created a list of requirements for the Under Construction page:

  1. Light: Size of the page and all assets should be as small as possible.
  2. Fast: Minimize HTTP requests and DOM elements. Little to no DOM manipulation.
  3. Portable: The page should preferably be self-contained. Barring that, it should have as few files as possible.
  4. Branding: We may as well use the company color scheme for brand reinforcement.

Here is the code I finalized:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>caveenasolutions.com</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<meta name="robots" content="noindex,nofollow">

	<meta name="author" content="Caveena Solutions">
	<meta name="description" content="Caveena Solutions, Brunei Darussalam.">

	<style>
	html, body {
		height: 100%;
	}

	.construction {
		margin: 0;
		padding: 1em 0 0 0;
		background-color: #e3dbdb;
		background-image: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
		background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
		background-image: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
		background-image: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 12+ */
		background-image: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
		background-image: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
		color: #631900;
		font-family: Calibri, 'Droid Sans', 'Liberation Sans', Freesans, Arial, Helvetica, sans-serif;
		font-size: 100%; /* 16px */
		line-height: 1.25 /* 20px */
	}

	.construction h1 {
		padding: 0.4em 0;
		background: #631900 none;
		color: #e3dbdb;
		font-weight: bold;
		font-size: 120%;
		text-align: center;
		text-transform: lowercase;
	}

	.construction p {
		font-size: 700%;
		font-weight: bold;
		text-align: center;
	}

	@media (max-width: 767px) {

		.construction p {
			font-size: 400%;
			margin-right: 0.4em;
			margin-left: 0.4em;
		}

	}
	</style>

<body class="construction">
	<h1>caveenasolutions.com</h1>
	<p>Under Construction</p>
</body>
</html>

Text Over Images

As you can see, the code is predominantly text-based. I considered using a simple image but what could it convey that text could not? Plus the whole schtick of using construction signs is far too over-used. Had I decided to use an image I almost certainly would have use an embedded SVG file; browser support for inline SVG is rather good.

CSS

I opted to have page-level CSS instead of linking to an external stylesheet. This isn’t something I normally do but embedding the CSS meant better portability and one less HTTP request (ooh, the gains!)

Most CSS used is very simple but in a moment of indulgence, I threw in a radial gradient. Though I could not find any actual tests, I think it’s fair to say that gradients are more CPU intensive. But one simple gradient isn’t going to hurt anybody (… right?)

I also used one media query for smaller devices. All it does is reduce the font-size for the “Under Construction” text in smaller devices.

@media (max-width: 767px) {

	.construction p {
		font-size: 400%;
		margin-right: 0.4em;
		margin-left: 0.4em;
	}

}

I could have targeted more devices but I was happy with the result.

Font Stack

Fonts were the biggest obstacle. In what is obviously a throwback to the days of early web design I chose to use System Default fonts and did away with all font linking & embedding for the sake of keeping things light and fast. Here is the font stack:

font-family: Calibri, 'Droid Sans', 'Liberation Sans', Freesans, Arial, Helvetica, sans-serif;

Design & Branding

I used the company colors. I also kept it flat because that’s what all the cool kids are doing.

No to robots

You may have noticed I told robots not to index or follow the page.

<meta name="robots" content="noindex,nofollow">

This would depend on the individual project and it is trivial to remove the line if the client wants to be found on search engines. If not, the above line coupled with an appropriate robots.txt should do fine.

To Smush or not to Smush?

Finally, I could have minified the entire code but that would just be silly, don’t you think? ☺