Great Examples Of Coming Soon Pages And How To Create Yours




I’m sure the first thing that comes to mind when you hear ‘coming soon page’ is something people used to put together back in 1999 on Geocities that had a big ‘under construction’ sign. Well these days, a coming soon page is much more than that. It actually serves a purpose and is completely different than those under construction pages.

A coming soon page serves one very important purpose: to let people know you’re working on something, but it’s not quite ready yet.

Of course you could simply create your website or web application and never worry about putting a coming soon page up. If you look at the available website builder solutions – almost non of them offers a service for creating a non-generic under construction page. And to ensure your new project is a success, you need to get people interested long before you launch.

Here are some things you might want to consider putting on your coming soon page:

  • Newsletter/mailing list sign-up form
  • Social media profiles – buttons and links
  • Recent tweets or comments about your new project (hype)
  • Testimonials (if you have some – from beta testing for example)
  • Development news
  • Contact, Copyright notice and the usual legal stuff

Of course you don’t need to put all of that on your coming soon page, but I strongly recommend having at least a newsletter sign-up form and buttons/links pointing to your various social media profiles.

Let’s Take A Look At Some Well-Designed Coming Soon Pages

There’s a lot of very well-designed coming soon pages out there (and some bad ones too) but here are 10 of my favorites.

FavMovie ↓

FavMovie

Designatr ↓

Designatr

Fontdeck ↓

Fontdeck

Better Blogger ↓

Better Blogger

Love Freelancing ↓

Love Freelancing

EnStore ↓

EnStore

Media Loot ↓

Media Loot

Pepsay ↓

Pepsay

Birdboxx ↓

Birdboxx

Remindness ↓

Remindness

As you can see, most of them have a newsletter signup form and a description of what the website, service or product will be. My 2 favorites have to be Love Freelancing, because they’re using Twitter instead of a newsletter signup form and the design is beautiful, and Remindness because of the awesome tagline (I am sure to remember it) :)

Premade Solutions For WordPress Users

If you plan on launching a blog and you know you will be using WordPress, you might want to consider using the LaunchPad or Ready2Launch themes.

LaunchPad ↓

LaunchPad

Ready2Launch ↓

Ready2Launch

How To Create Your Own Coming Soon Page

Now let’s see how you can create your own coming soon page with CSS, HTML and a Aweber signup form!

First we’ll need a design! I created a generic design for the purpose of this tutorial:

Coming Soon Page

You can also see the live demo right here.

The Markup

Since this is a very simple page there isn’t a lot of markup or CSS. Let’s start with the HTML:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Coming Soon Page - Demo</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>
<body>
<div class="header">
<h1><a href="http://spyrestudios.com/demos/coming-soon-demo/" title="Sick Company"><img src="images/logo.jpg" alt="Sick Logo" /></a></h1>

Your very convincing tagline should go here
</div>
<div id="content">
	
This new website will completely blow your mind! It will be exactly what you've been looking for and you'll love it so much you'll make it your start page!
	
Now seriously, why not just signup below and we'll let you know once we're up and running.

<div class="form">
		<form method="post" action="http://www.aweber.com/scripts/addlead.pl">
		<input type="hidden" name="meta_web_form_id" value="YOUR_FORM_ID"/>
		<input type="hidden" name="meta_split_id" value=""/>
		<input type="hidden" name="unit" value="CAMPAIGN"/>
		<input type="hidden" name="redirect" value="http://www.aweber.com/form/thankyou_vo.html" id=YOUR_ID_HERE"/>
		<input type="hidden" name="meta_redirect_onlist" value=""/>
		<input type="hidden" name="meta_adtracking" value=""/>
		<input type="hidden" name="meta_message" value="1"/>
		<input type="hidden" name="meta_required" value="name,from"/>
		<input type="hidden" name="meta_forward_vars" value="0"/>
		Name: <input type="text" class="formname" name="name" value="" size="20"/>
		Email: <input type="text" class="formname" name="from" value="" size="20"/>
		<input type="submit" class="sendform" name="submit" value="Go!"/>
		</form></div>
</div>

Copyright Dummy Company 2009 - <a href="#" title="Privacy Policy">Privacy Policy</a>
	
<a href="http://twitter.com/jophillips" title="Follow Jon On Twitter">Follow us on Twitter</a>

<div style="clear:both;"></div>

<a href="http://spyrestudios.com/examples-of-coming-soon-pages-and-how-to-create-yours/" title="Back to the tutorial">Click here to return to the tutorial on SpyreStudios</a>
</body>
</html>

The CSS

There’s isn’t anything fancy here, just some basic CSS to make it look decent – remember that this is only an example, use it as a starting point, tweak it, etc… :)

Please keep in mind that I didn’t check to make sure everything displays fine in IE6. It all works fine in Safari, Firefox, IE8 and Chrome.

body {
	background: #21211f;
	width: 702px;
	font-family: helvetica, arial, sans-serif;
	margin: 0 auto;
	padding: 40px 0 0 0;
}

.header{
	width: 702px;
	float: left;
	clear: both;
	padding: 0;
	margin: 0 0 10px 0;
}

h1 img{
	float: left;
	padding: 0;
	margin: 0;
}

#content{
	width: 612px;
	background: #466287 url(images/corner.jpg) top right no-repeat;
	line-height: 22px;
	font-size: 18px;
	font-family: Georgia, times, serif;
	margin: 0 0 10px 0;
	float: left;
	clear: both;
	color: #ffffff;
	padding: 20px 60px 20px 30px;
}

a, a:visited{
	text-decoration: none;
	color: #666666;
}

a:hover, a:hover:visited{
	text-decoration: none;
	color: #FFFFFF;
}

img {
	border: none;
}

p.copy {
	float: left;
	font-size: 12px;
	color: #444444;
	padding: 5px 0 5px 0;
}

p.social {
	background: url(images/twitter.jpg) center right no-repeat;
	float: right;
	font-size: 12px;
	color: #444444;
	padding: 5px 30px 5px 0;
}

p.tagline {
	font-family: georgia, times, serif;
	font-style: italic;
	float: right;
	font-size: 18px;
	color: #666666;
	padding: 15px 52px 0 0;
}

.form{
	margin: 15px 0;
	padding: 20px 0 20px 0;
	background: url(form1.jpg) no-repeat;
	font-family: helvetica, arial, sans-serif;
}

.formname{
	background: #FFFFFF;
	font-family: helvetica, arial, sans-serif;
	color: #000000;
	padding: 10px;
	border: 1px solid #30435D;
	font-size: 18px;
	margin: 0 15px 0 0;
	width: 170px;
	font-weight: bold;
}

.sendform{
	background: #6288BC;
	font-family: helvetica, arial, sans-serif;
	color: #ffffff;
	cursor: pointer;
	font-size: 18px;
	padding: 10px;
	border: 1px solid #7DAEF0;
	margin: 0 0 0 0;
	font-weight: bold;
}

Your Turn To Talk

I hope you found this post useful! Is there any coming soon page that you’d like to share with us? Please take a minute to chime in and leave a comment below! :)

Using our up to date 350-030 dumps and 70-642 mock test, you will pass your N10-004 exam on first try guaranteed.





Comments:

Scroll back to the top