SpyreStudios

Web Design and Development Magazine

Great Examples Of Coming Soon Pages And How To Create Yours

by 61 Comments

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:

[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="//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="//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>
[/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.

[html]
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;
}
[/html]

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

  1. leon says

    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)

  4. Simon Sigurdhsson says

    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.

  6. Andy Marshall says

    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.

  7. Micheil Smith says

    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.

  16. Sara R says

    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/tips-for-designing-an-awesome-coming-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!

  17. Designely says

    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!

  19. Inside the Webb says

    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.

  25. Rajib Roy says

    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.

  29. Andy Marshall says

    @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.

  38. Jon Phillips says

    @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!

  41. Zigor says

    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

  42. rbrill says

    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.

  44. Jordan Deggar says

    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.

  46. Frank says

    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.

  49. Marcus Blankenship says

    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

  53. Steve says

    Thanks for the example.

    For those looking for an alternative to aweber, ymlp.com has a free solution, without any advertising!

  57. Sara says

    omg guys you are awesome !!
    please tell me how did you do this :( im just new to this thing :(

  61. Michael says

    I just finished mine, but I’ve been getting a lot of criticism on having ‘Too Much Text’. I don’t know I think it fairly simple with minimal description so, I added a Jquery to blur out the description text but still my partners are complaining. Please take a look and I would like to hear your opinions. Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *