SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Great Examples Of Coming Soon Pages And How To Create Yours

December 29, 2009 by Jon 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="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>
[/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.

Filed Under: Business, Design, Showcase, Tutorial

Comments

  1. leon says

    December 29, 2009 at 4:44 am

    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)

  2. Benjamin Alijagić says

    December 29, 2009 at 5:11 am

    Nice roundup!
    Here is my coming soon page: http://www.benpixel.com

  3. GiN says

    December 29, 2009 at 6:13 am

    Nice!
    My “coming soon” page http://razors.borodatyh.net/

  4. Simon Sigurdhsson says

    December 29, 2009 at 6:25 am

    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.

  5. Sujeewa says

    December 29, 2009 at 7:31 am

    You’ll should check this site..
    Currently its under construction..
    http://www.shift.lk

  6. Andy Marshall says

    December 29, 2009 at 7:34 am

    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

    December 29, 2009 at 7:40 am

    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.

  8. SmashingWebs.com says

    December 29, 2009 at 8:21 am

    Nice post. Really got some inspiration

    http://smashingwebs.com/

  9. creative_blondes says

    December 29, 2009 at 8:43 am

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

  10. Daniele says

    December 29, 2009 at 8:45 am

    My Coming Soon Page:
    http://www.readthislink.com/

  11. SmashingWebs.com says

    December 29, 2009 at 10:30 am

    Nice collection :)

  12. Dani Kelley says

    December 29, 2009 at 10:59 am

    Enjoyed this post muchly and tried to incorporate a few things into my own coming soon page.

  13. Евгений says

    December 29, 2009 at 11:05 am

    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.

  14. Webdesign Thailand says

    December 29, 2009 at 11:13 am

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

  15. Aaron Irizarry says

    December 29, 2009 at 11:37 am

    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

  16. Sara R says

    December 29, 2009 at 11:47 am

    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

    December 29, 2009 at 2:10 pm

    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!

  18. Brian says

    December 29, 2009 at 3:25 pm

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

    http://www.linkedfa.com

  19. Inside the Webb says

    December 29, 2009 at 3:45 pm

    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.

  20. Jacob Ward says

    December 29, 2009 at 5:41 pm

    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.

  21. Emmanuel Medina Garcia says

    December 29, 2009 at 10:12 pm

    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

  22. denbagus says

    December 29, 2009 at 11:53 pm

    nice inpiration ..thank you

  23. ajl says

    December 30, 2009 at 1:42 am

    Love it! thanks for sharing :-)

  24. Steve Martin says

    December 30, 2009 at 4:49 am

    Excellent Collections of coming soon pages.. I liked the medialoot page design.. This post is really inspiring…

  25. Rajib Roy says

    December 30, 2009 at 5:05 am

    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.

  26. Web Designer Chennai says

    December 30, 2009 at 5:05 am

    great collection of coming soon web pages…. nice post….

  27. Arslan says

    December 30, 2009 at 10:19 am

    thanks you for this article

  28. Lamin Barrow says

    December 30, 2009 at 11:40 am

    Nice.. check my own at http://devesigner.com

  29. Andy Marshall says

    December 30, 2009 at 2:04 pm

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

  30. Tonny says

    December 31, 2009 at 12:07 am

    indeed nice collection

    also like these ones

    http://inewsman.com
    http://www.minuteglass.com

  31. Denis Hennessy says

    December 31, 2009 at 9:54 am

    I recently launched a web service to host a set of customizable coming soon templates and automate email capture – http://comingsoonapp.com

  32. izdelava spletnih strani says

    January 3, 2010 at 6:17 am

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

  33. suv says

    January 3, 2010 at 11:26 pm

    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.

  34. Jannis Gerlinger says

    January 4, 2010 at 5:14 am

    thanks for the demo !

  35. Chris says

    January 14, 2010 at 11:52 am

    Thanks for mentioning Minuteglass in the comments, Tonny!

  36. Smashing Share says

    January 15, 2010 at 12:11 pm

    This is great roundup. I have registered a new domain and was looking for some coming soon pages inspiration. Thanks for sharing this

  37. Francisco says

    January 15, 2010 at 6:28 pm

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

    something Free??

  38. Jon Phillips says

    January 15, 2010 at 6:58 pm

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

  39. Elisa says

    January 15, 2010 at 7:24 pm

    Really cool post, I don’t think I have ever thought about “coming soon” pages.

  40. Vibhor Chandel says

    February 5, 2010 at 8:51 pm

    What a collection! Superb !

  41. Zigor says

    February 23, 2010 at 4:06 am

    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

    April 12, 2010 at 7:00 am

    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.

  43. comingdesign says

    April 15, 2010 at 3:52 am

    Take a look at comingdesign.it , a collection of the best Coming soon web pages.
    Still in alpha version.

  44. Jordan Deggar says

    May 12, 2010 at 10:12 pm

    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.

  45. Etnas says

    June 30, 2010 at 3:46 am

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

    http://www.etnassoft.com

    Thanks for the inspiration!

  46. Frank says

    July 7, 2010 at 6:42 am

    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.

  47. Juan Moorer says

    July 17, 2010 at 1:28 pm

    Is it ok to build links to a Coming Soon page – even if its just a GoDaddy simple page?

  48. Lapel says

    July 20, 2010 at 9:51 pm

    Yes, you can always build links – even to a coming soon page.

  49. Marcus Blankenship says

    July 21, 2010 at 1:28 am

    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

  50. Varghese Mathew says

    July 24, 2010 at 2:12 pm

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

  51. chullos says

    August 11, 2010 at 12:28 pm

    Always cool examples, thank you

  52. Eduardo says

    October 28, 2010 at 7:35 am

    Great post. I also found this other coming soon pages:

    http://www.peeppol.net

    http://www.squidchef.com

  53. Steve says

    December 31, 2010 at 2:54 am

    Thanks for the example.

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

  54. Kev says

    February 17, 2011 at 8:59 pm

    Thanks for the list! My new site is also coming soon, check it out: http://outweech.com

  55. fran solo says

    February 23, 2011 at 7:06 pm

    Great post ! That’s mine … http://www.fransolo.com, i hope u like it

  56. Zak says

    April 6, 2011 at 6:12 am

    I really liked the Fav Movie coming soon page. Here is the holding page for a social news website I’m working on – http://www.limebloc.com

  57. Sara says

    April 10, 2011 at 8:19 pm

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

  58. Cristian Delgado says

    June 5, 2011 at 8:27 pm

    Hi,how can I design my own logo? I mean,the exact measurements,width and height and nice job!
    Thanks

  59. Janet says

    June 27, 2011 at 7:43 am

    Thank you for making the tutorial so simple :)
    You have saved me some time

    Thanks

  60. Hemanth says

    July 9, 2011 at 8:28 pm

    I recently finished my coming soon page. check it out at http://hemanth.me, its pretty beautiful if i say so myself. and i find the twitter integration very useful

  61. Michael says

    July 23, 2011 at 10:25 pm

    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 *

Recent Posts

  • What Factors Determine the Best Digital Marketing Agency?
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022