Great Examples Of Coming Soon Pages And How To Create Yours

Dec

Great Examples Of Coming Soon Pages And How To Create Yours

by Jon Phillips » 60 Comments » Add Your Own » grab the rss feed

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. But 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 ↓

Designatr ↓

Fontdeck ↓

Better Blogger ↓

Love Freelancing ↓

EnStore ↓

Media Loot ↓

Pepsay ↓

Birdboxx ↓

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 ↓

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:

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! :)

About the author:

Jon Phillips is the founder and owner of SpyreStudios and the co-founder of MediaLoot. Jon is a designer, developer, typography lover and musician.

Related Entries:

jump to the comment form ↓

leon
December 29th, 2009

I really love the EnStore coming-soon page. Great idea to provide the visitor with a ‘visit demo site’ button too! Very inspiring round up. The coming-soon pages we make for our clients by the way look like this: http://www.willemvanschendel.com/ , purposely made minimal (based on our visual identity)
Benjamin Alijagić
December 29th, 2009

Nice roundup!
Here is my coming soon page: http://www.benpixel.com
GiN
December 29th, 2009

Nice!
My “coming soon” page http://razors.borodatyh.net/
Simon Sigurdhsson
December 29th, 2009

Although the example page looks good, I seriously doubt you really need XHTML and thus you shouldn’t really use it, IMHO. A very simplified HTML5 version would certainly do the same thing with less markup.
Sujeewa
December 29th, 2009

You’ll should check this site..
Currently its under construction..
http://www.shift.lk
Andy Marshall
December 29th, 2009

Creating some form of dynamic holding page is something we’ve just done for one of our bigger clients too – http://www.wirelessbollinger.com/ – they got their old Drupal site hacked and so needed something they could use in the mean time while they get us to redesign their new site.

Again, the newsletter signup and links to Social Media are there, but they’ve been using their Twitter feed more like the mini-blogging tool its perfect for to keep people up to date with their news.

As the clients are well into their lists and numbers and other such nerdy statistics, for something a little different, we also created a mini-poll for their users to interact with, creating their top 5 albums of 2009 – something very apt for this time of year, and something they can use in their new site.

Whilst they can involve more time and effort than just going ahead and creating the site itself, for a business that is already up and running having a professional web presence is a must have to keep their users interested.
Micheil Smith
December 29th, 2009

I have to ask this one question: Is there a benefit of having a mailing list sign up for the launch (yes, granted it may be good for a product or consumable), but for a standard run of the mill site, eg, a blog, portfolio, etc, do we need the signup form?

When ever I’ve done coming soon pages, they’ve been based around a set visual look that I’m chasing for that site, for instance, the one that I currently have up for my own site is a minimalist design, with text to describe what will be and what was, rather then pretty graphics, it has information.

I’ve noted that a fair few apps that are coming soon just say “Hi! We’re coming soon signup up to our mailing list”, which really doesn’t say much about the company, product or application, it just say they want your email address.

Maybe the key will be to see more people balancing design/aesthetics with information.
SmashingWebs.com
December 29th, 2009

Nice post. Really got some inspiration

http://smashingwebs.com/
creative_blondes
December 29th, 2009

Awesome listing. Very inspiring to see what creative folks can do, even with a coming soon page :). Here is mine: http://www.inveve.com. If you like it, feel free to list it along with the other ones in your post :).
Daniele
December 29th, 2009

My Coming Soon Page:
http://www.readthislink.com/
SmashingWebs.com
December 29th, 2009

Nice collection :)
Dani Kelley
December 29th, 2009

Enjoyed this post muchly and tried to incorporate a few things into my own coming soon page.
Евгений
December 29th, 2009

Very good selection, you not against if I I will publish this selection at myself on a site? Naturally with the return reference to your site.
Webdesign Thailand
December 29th, 2009

I like the medialoot’s and pepsay’s one. Really nice!

Thanks for the example coming soon page’s code. It’s really handy for people who want to learn CSS from example. :)
Aaron Irizarry
December 29th, 2009

Nice round up… I really like the better blogger page.

I just threw this coming soon page up http://www.solv-ux.com

thanks again for another great post.

~ Aaron I
Sara R
December 29th, 2009

Chris Spooner did a similar article about Coming Soon pages on the Line 25 Blog – I like that he emphasizes using social media to engage your visitors until you have content on your site. And there are certainly some cross-over pages on both your posts.

http://line25.com/articles/tip.....-soon-page

But still, this is a nice roundup of some great designs… I need to revise my own coming soon page to add in the newsletter/rss/social media aspect. Thanks for the reminder!
Designely
December 29th, 2009

Excellent collection.

This came right in time. I’m currently searching for inspiration to create “coming soon” page for the new design blog that I’m launching soon…

So these served me well.

Thanks!
Brian
December 29th, 2009

Here’s ours. We added a brief flash overview of the service.

http://www.linkedfa.com
Inside the Webb
December 29th, 2009

These are some pretty awesome coming soon pages! It’s difficult to figure out exactly how to create one for your site, but after spending some time working at it you can usually find something good.
Jacob Ward
December 29th, 2009

This was a great idea for a post. I love to always see what others are doing. I almost feel like I should have added a email contact for when the site launches.
Check out my design http://jacob-ward.com
Any feedback would be great.
Emmanuel Medina Garcia
December 29th, 2009

Hi I like a lot this post specially because I have set a Coming Soon Page at my Site an I would really appreciate if you could make a review of it, my site is minardimedia dot com
denbagus
December 29th, 2009

nice inpiration ..thank you
ajl
December 30th, 2009

Love it! thanks for sharing :-)
Steve Martin
December 30th, 2009

Excellent Collections of coming soon pages.. I liked the medialoot page design.. This post is really inspiring…
Rajib Roy
December 30th, 2009

Excellent collection. This came right in time. I’m currently searching for inspiration to create “coming soon” page for the new design blog that I’m launching soon…

Thanks to author.
Web Designer Chennai
December 30th, 2009

great collection of coming soon web pages…. nice post….
Arslan
December 30th, 2009

thanks you for this article
Lamin Barrow
December 30th, 2009

Nice.. check my own at http://devesigner.com
Andy Marshall
December 30th, 2009

@Micheil Smith I would say that a email newsletter signup on coming soon pages is only of any use if you intend to use the mailing list for a significant part of the main site. For a blog, its unlikely people will be signing up for a newsletter when the proper site is live, so in that case it’s pointless at best and misleading at worse to include one in the coming soon page.

In terms of design, its a perfect way to start getting ideas out there, which often can help the client start to visualise their new site and get the creative juices flowing.

From an Agile point of view too, if you’re rolling through the design > develop > deploy loops lots of time in the whole projects lifecycle, getting a holding page / coming soon page up first thing makes perfect sense, before going back through the process for the main site.
Tonny
December 31st, 2009

indeed nice collection

also like these ones

http://inewsman.com
http://www.minuteglass.com
Denis Hennessy
December 31st, 2009

I recently launched a web service to host a set of customizable coming soon templates and automate email capture – http://comingsoonapp.com
izdelava spletnih strani
January 3rd, 2010

Ok, i agree, great stuff. But why not just build a site, why publish ‘in release’, ‘coming up’, ‘under construction’
suv
January 3rd, 2010

We are coming up with a site for listing amazing apps with amazing discounts. Till the site comes up we have done a cool coming soon page http://www.keepaslice.com.
Any feedback would be great.
Jannis Gerlinger
January 4th, 2010

thanks for the demo !
Chris
January 14th, 2010

Thanks for mentioning Minuteglass in the comments, Tonny!
Smashing Share
January 15th, 2010

This is great roundup. I have registered a new domain and was looking for some coming soon pages inspiration. Thanks for sharing this
Francisco
January 15th, 2010

Thanks but, there is any way to make this without aweber ???

something Free??
Jon Phillips
January 15th, 2010

@All: thanks for all the comments guys :)

@Francisco: Well you could also try with MailChimp, they have a free account. Or you could use pretty much any other newsletter/mailing list solution out there. You could use MailPress if you build this on WordPress. Hope that helps!
Elisa
January 15th, 2010

Really cool post, I don’t think I have ever thought about “coming soon” pages.
Vibhor Chandel
February 5th, 2010

What a collection! Superb !
Zigor
February 23rd, 2010

Good points the ones explained above, I agree the use of social media profile links could do the trick… We have just released a new coming soon web, could you please have a look and give us some feedbacks?

http://www.ask-e.net

Thanks

Z
rbrill
April 12th, 2010

I like the ideas here but I find that the concept of a ‘coming soon’ page really irritates me for some reason, I think its the annoyance of not finding the information you need when clicking a link, bit like a dead link really. Good design and development article anyhow.
comingdesign
April 15th, 2010

Take a look at comingdesign.it , a collection of the best Coming soon web pages.
Still in alpha version.
Jordan Deggar
May 12th, 2010

Lots of great inspirational posts/links here. Thanks for the share!

Another one to note – http://www.siteplanb.com. I like the creativity of this one and how they pulled in an emergency exit plan.
Etnas
June 30th, 2010

Hi!
I want to share my own Coming Soon Page.
I think its clear and clean.

http://www.etnassoft.com

Thanks for the inspiration!
Frank
July 7th, 2010

Personally, I don’t like to put designs as “Coming Soon”, though this will add more trick on your site. And for this, you have great collection of designs.

Thanks.
Juan Moorer
July 17th, 2010

Is it ok to build links to a Coming Soon page – even if its just a GoDaddy simple page?
Lapel
July 20th, 2010

Yes, you can always build links – even to a coming soon page.
Marcus Blankenship
July 21st, 2010

Hey, check out my coming soon page. We’re working on a hosted solution to make an awesome coming soon page in just minutes, and get your name out there!

Thanks,
Marcus
Soonr
Varghese Mathew
July 24th, 2010

See my website coming soon page
http://www.varghesemathew.com/cs