Effective Maintenance Pages: Examples and Best Practices

Advertisement

Every website has to perform maintenance at some point or another. Whether it’s just to upgrade a portion of the site or because of some problem with the site, it’s an inevitable fact of website ownership. And in many cases, maintenance requires taking your site offline for at least a few minutes.

So what should you do if your site is going to be down for maintenance? You don’t want users coming to a 404 or other error page. And hopefully you’d like to encourage them to come back to your site sooner rather than later, right? If that’s the case, you’ll need to build a custom maintenance page. Below we present a list of best practices to building effective maintenance pages that will help keep your visitors, whether new or returning, happy.

You may want to take a look at the following related posts:

1. Keep you maintenance pages simple and useful.

The entire point of a maintenance page is to let visitors know that your site is still around and that the maintenance is only temporary. It doesn’t need to do anything beyond that. Make sure it’s immediately apparent what your page is about and provides your visitors with the information they’re interested in.

Another useful function for simple maintenance pages is to include your maintenance message in multiple languages. The Web is global, and while many of your visitors are likely to speak at least some English, providing multiple languages is helpful. Just be wary of using online translators, as sometimes they’re less-than-accurate. The last thing you want your maintenance page to do is further confuse people, or worse – offend them.

Delicious with a simple and clear message (via).

Maintenance Page Screenshot

This Twitter maintenance page gives the bare minimum of information and keeps a simple design while still being inviting and friendly toward users.

Maintenance Page Screenshot

Google’s Adsense page offers a simple maintenance message in a huge number of languages…

Maintenance Page Screenshot

…and sometimes Google Adsense just explains in plain language what is happening and when the page will be online again. Notice that Google also reassures the users that earnings will continue to be tracked as normal, and ad targeting will not be affected during this downtime.

Maintenance Page Screenshot

This maintenance screen from the Apple Store get to the point while still remaining casual.

Maintenance Page Screenshot

MobileMe with a visually appealing maintenance screen in multiple languages (via).

Maintenance Page Screenshot

2. Realize it’s an inconvenience to your visitors.

When your site is down, your regular visitors are inconvenienced. It’s a simple fact. But don’t let inconvenienced visitors turn into alienated visitors. Simply acknowledging that your site’s downtime is a pain for your visitors is often enough to satisfy them. Apologize for the downtime, give them information that’s useful to them, and make them feel like you realize what this means to them.

Last.fm puts a big apology right at the top of their maintenance page.

Maintenance Page Screenshot

Twitter takes a more light-hearted approach but still acknowledges that users might be getting impatient with the downtime.

Maintenance Page Screenshot

3. Don’t be afraid to use humor.

There’s no need to get all serious just because your site is down. Using a bit of humor or otherwise making your maintenance page entertaining helps to improve your site’s image in the eyes of visitors inconvenienced by the downtime. Think about different angles related to your site’s content that could be portrayed in a humorous light. Whether it’s doing something with your site’s logo or mascot, or even something seemingly unrelated to your site, there’s surely an angle out there for making your maintenance page funny.

Etsy shows Halm working on the current technical problems. Notice that Etsy also communicated what’s happening and the estimated downtime.

Maintenance Page Screenshot

Soundcloud promises to be up soon and uses a pun to make the maintenance page stand out (via).

Maintenance Page Screenshot

Ning uses a cute illustration and claims that its experienced technicians (pictured) are currently hard at work so as to bring Ning back online shortly (via).

Maintenance Page Screenshot

Reddit‘s maintenance page could use more information; Reddits probably shouldn’t have stopped using Lisp…

Maintenance Page Screenshot

…and YouTube seems to be busy pushing out some new concoctions and formulas (via)

Maintenance Page Screenshot

Mozilla: “Repairs in Progress” (via).

Maintenance Page Screenshot

Revver (via).

Maintenance Page Screenshot

Flickr‘s maintenance page is not very informative, but funny. Flickr is having a massage.

Maintenance Page Screenshot

FlashDen claims a 10 second downtime and offers up a cartoonish character doing maintenance on himself to make visitors smile.

Maintenance Page Screenshot

Bloglines uses an image of a plumber to lighten things up when their site is down.

Maintenance Page Screenshot

Apartmentguide.com: another instance of using a maintenance worker on a maintenance page.

Maintenance Page Screenshot

4. Give your maintenance page the same look and feel as your regular site.

You want visitors to immediately realize that they have arrived at the correct place, even if your site doesn’t quite look the same as always. If your maintenance page bears no resemblance to your regular site, many visitors may just assume they’ve gone to the wrong URL without bothering to read what your page says.

Make sure your maintenance page includes your logo and keeps the same general color scheme as your site. Even these two simple things can make visitors feel more at ease when they reach an unexpected page.

Grooveshark keeps their header and basic color scheme in tact.

Maintenance Page Screenshot

StumbleUpon also keeps their header and logo in tact, and even the colors used in the illustration echo their brand colors.

Maintenance Page Screenshot

Naturalinstinct uses the same color scheme and provides users with alternative contact options.

Maintenance Page Screenshot

5. Let visitors know when your site will be back.

Maintenance times can vary greatly. Sometimes a site might be down for only a few minutes. Other times it could be an hour or two, or even longer. Let your visitors know what time you expect to be back up and running. This way they’ll have an idea of when to come back. An open-ended maintenance page encourages them to put a return visit off for hours or even days. Something that says you’ll be back in five minutes encourages them to do the same.

iStockPhoto‘s maintenance page informs its visitors about the estimated time when the site will be back.

Maintenance Page Screenshot

Blogger uses a simple page that includes the time the site is expected to be back up.

Maintenance Page Screenshot

Linkedin lets the users know when the site will return online (via).

Maintenance Page Screenshot

StudiVZ suggests to drink a cup of tea and informs the visitors that the site will be online at 8am (via).

Maintenance Page Screenshot

6. Provide recommended content.

Keeping a few articles from your site on a static page for maintenance downtime is one way to offer your visitors something to look at while you’re performing maintenance. Other sites even recommend content from other websites, generally that they think would be of interest to their visitors. Giving your visitors something else to do while they wait for your site to come back online is a great way to show them that you care, and that you realize it’s inconvenient for them (see number 2 above).

Librarything‘s “downtime” image suggests to read a couple of books while the site is down (via).

Maintenance Page Screenshot

Digg offers a list of other sites they thing their visitors might be interested in.

Maintenance Page Screenshot

Github offers an entertaining YouTube video for visitors to watch while their site is down.

Maintenance Page Screenshot

Mixx provides a few of their favorite “Mixxed” stories for visitors to check out.

Maintenance Page Screenshot

Sears had to be closed for site enhancements during the Black Friday. The maintenance page provides users with further navigation options – such as Lands’ End, Parts Direct and Sears Credit (via).

Maintenance Page Screenshot

7. Invite your visitors to come back when the site is online again

Since your users actually have visited your service during the downtime, they, of course, would like to use the service. Therefore it makes sense to notify them when the site is online again. Obviously, you wouldn’t want to notify all users of the service that the site is back online. So it’s a good idea to make it possible for users to get notified when the service can be used again. The latter can be done either via e-mail, SMS or a tweet.

Soindustry makes offers its users to submit their e-mails to get notified when the site is online again.

Maintenance Page Screenshot

8. Inform your visitors about the progress of the maintenance

Of course, many unexpected problems can occur during the maintenance, and it’s a good idea to keep your users informed about the progress. An instant feedback is important and let the user know that everything is going just fine and someone on the other side is working on the problem and that just a little portion of patience is required.

Habbo, a virtual world where you can meet and make friends, provides a sweet illustration on its maintenance page and also inform the visitors about the maintenance progress.

Maintenance Page Screenshot

37signals also keeps the users updated about the status of maintenance (via).

Maintenance Page Screenshot

Further Resources

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of The Smashing Idea Book: From Inspiration to Application.

  1. 1
  2. 2

    Nice pages for inspiration. Thanks for sharing !!

    It’s very hard to compile this type of showcase coz you don’t find maintenance pages on daily basis.

    DKumar M.
    @instantshift

    2
  3. 3

    Another great article. Good job collecting these, as DKumar said, it must have been hard to catch these sites doing maintenance!

    0
  4. 4

    Hi Cameron, thanks for this post and the inspiration your collection of examples provides.

    I have a question: if one is running a WordPress blog site, will a 404 page created in WP still be displayed if the site is down? I’m totally guessing it would not, and therefore one would need to create a regular .html page for the 404. Is that right?

    0
  5. 5

    I’ll agree with DKumar M. on this – I’vve been looking around for the best ways to do a 404 page – and these are by far some of the best tips I’ve found. My favorite on the list, however, is the one by 37 Signals – I use them on a daily basis and still haven’t stumbled across a 404, but at least they put some humor into theirs.

    Bob Orchard
    @boborchard

    0
  6. 6

    Some nice ideas here. Thanks

    0
  7. 7

    Nice roundup, and cool to see you guys included the Envato maintenance page.

    @contempoinc

    0
  8. 8

    little mistake: studiVZ offers a cup of coffee and no tea. Käffchen is german slang for Kaffee which means coffee.

    -1
  9. 9

    Pretty cool stuff! I would definitely like to use this in the future.

    0
  10. 10

    GREAT IDEAS!!

    0
  11. 11

    Wonderful and really completed post! Thanks for showcasing the best practice.

    0
  12. 12

    Can someone explain why you would ever need a site-down page? I’m not saying you don’t, just that I have never had to use one. I seem to be able to use a testing file/folder/server for all updates before I replace files on my site.

    The only instance I could think of needing one is during a heavy upload and you don’t want users visiting the site with only partially updated files. Can any think of other uses?

    I completely understand and use 404 and error pages.

    0
  13. 13

    Abdurrahman Gemei

    June 12, 2009 1:32 pm

    9. Inform users in advance of scheduled maintenance.

    P.S. Why is Stumbleupon using Comic Sans?

    -2
  14. 14

    I kinda enjoyed this post, thanks!

    0
  15. 15

    “P.S. Why is Stumbleupon using Comic Sans?”

    Cause this is a good place to use it and it looks great on that illustration.

    2
  16. 16

    Nice collection. Check out Index.hu’s 404 errors by reloading for example this: http://index.hu/xxx

    0
  17. 17

    Some of them are funny…

    0
  18. 18

    Regarding implementation – this is how I have it worked out:

    Whenever a subdomain goes down for maintenance, a 307 redirect is put in place to direct visitors to the main domain’s maintenance page where a META noindex,nofollow maintenance page is served (this page includes a timestamp for the beginning of the maintenance window and ending of the maintenance window). The maintenance page automatically issues a 301 redirect to the site if hits are received after the end of the maintenance window.

    Works like a charm and keeps customers in-the-know.

    0
  19. 19

    you should have included crowdspring’s “site down” page.

    0
  20. 20

    clever…haha

    0
  21. 21

    Very useful for web developer. You keep sharing more and more good stuff.
    Link [thisispopup.com]

    0
  22. 22

    Nice and funny examples. Like the Mixx one. Really cute.

    0
  23. 23

    I’ve thought about it yesterday! :). What a surprise! Thanks!

    0
  24. 24

    Excellent advices and examples, thanks a lot!

    0
  25. 25

    I use the PHP framework CodeIgniter for my site, which routes all requests through /index.php. I have some simple PHP inserted into index.php that allows me to turn off the whole site simply by uncommenting. The code actually allows me alone to access the site by specifying that my IP address is the only one allowed to pass through.


    /*
    if($_SERVER['REMOTE_ADDR'] != '123.45.678.999'){
    header('HTTP/1.1 503 Service Unavailable');
    echo "Site down for maintenance";
    die();
    }
    */

    You could actually include a fancy file, or do anything you want with this… if you use php…. and if you route all your requests through index.php like I do. Otherwise, you’d be putting that at the top of each page, or at least modifying your .htaccess file with something like:


    RewriteRule .* sitedown.php [L]

    1
  26. 26

    I’m lilking Brian Temecula’s idea and I think I’ll try that.

    Also: http://hootsuite.com/ , currently down for maintenance. I like this, its pretty interesting to read about owls :P

    0
  27. 27

    Hi Cameron

    Thanks for featuring the SoIndustry maintenance page. Did you notice the email collection was handled by http://Notipal.com ? It’s an error notification and email collection tool I’ve been working on (and using on SoIndustry, among others). Notipal doesn’t just collect emails; if you copy/paste it in to your 404 and 500 templates, it’ll notify you when a error is picked up by a visitor and give them the option of leaving their email address for a follow-up notification (from you, the site owner) once the error has been fixed. You could call it an error-detection plus answer machine / callback service for websites.

    I’m sure notipal could solve a bunch a problems for the commentors here (the idea popped-up after hitting one of those “please come back soon” pages) – so take it for a test drive – there’s a freebie plan for starters.

    0
  28. 28

    All idea’s are cool. We will use in next project. Thanks for great post.

    0
  29. 29

    When Quake Live (www.quakelive.com) gets an update, they put a maintanancepage and you can follow the status on Twitter.

    1
  30. 30

    So … what does the Smashing Magazine maintenance page look like?

    0
  31. 31

    Great collection! It’s nice to see what others out there are doing since you don’t always come across maintenance pages on a regular basis.

    0
  32. 32

    ha ha ha. funny.
    Nice collection. 10+

    0
  33. 33

    It’s cool to see such a nice collection of Maintenance pages. But the question, my question is, how do I implement that on my server. Is there a way to manually put the website in “Maintenance mode” so that visitors do not access any given part of the site or any sub-domain while performing maintenance?
    I’ve contacted my hosting company, and it seems they do not understand the concept of the Maintenance page.
    So if I sum up;
    When my site is down for maintenance, for example if I need to upgrade to a new server, migrate files, databases…I need a “Maintenance Page” which people would land on instead of the regular home page or any other page, and even when accessing the website through bookmarked links or referral links on other websites or Search engines. Wherever they would come from, they would land on that page, period!
    Is there anyone who can tell me how to do this, or where can I get this information. It’s nice to have cool maintenance page if one cannot put it to work efficiently.
    Thanks so much guys for helping out

    0
  34. 34

    I was just looking for the best way to do this. Thanks for the post

    0
  35. 35

    nicely compiled. thanks.

    0
  36. 36

    hey, the habbo page you showed is from a retro (holo hotel) – which is an illegal copy of habbo ?

    1
  37. 37

    Very interesting examples of Miantenance page. It is better to tell the visitors the cause of manitenance and when should he/she come back.

    0
  38. 38

    This is a very enlightening article. I think it’s a must to use this when a page is under maintenance. It will make the site more professional and will give a better image to readers. Thanks for the tip.

    0
  39. 39

    A very inspiring post. Thank you for sharing this beautiful article. Yes absolutely, every site has to undergo maintenance some or the other time. But, if we use this tips to make our maintenance page look better, then we’ll not loose our regular visitors as i’m doing for my favorite site:)
    wolf21.com/

    0
  40. 40

    Cameron Chapman, Thank you very much for the post. Most of the sites uses a very basic plain text message which can be a frustrating experience for the visitors. A humorous and informative “Site unavailable or site temporarily unavailable” message with the emailing option is the best way for the site admins to put site on down mode for maintenance.

    0
  41. 41

    Hi. Thanks for the info.

    When i have a error custom pages like this http://www.etihogares.com/mierror is better have the message in english too, i mean the site is focus in a market in colombia, spanish languaje.

    Thanks.

    0
  42. 42

    I am a leader at a party plan company and the company’s website goes down at midnight every night “for maintenance”. Although, that does not phase me…I have some team members who feel that it is outrageous. They tell me that the website must be using an antiquated system because no website needs to do that anymore. Is that true? Is a nightly maintenance for one hour ridiculous?

    0
  43. 43

    So many great ideas for displaying appropriate messages. Thanks for your VERY useful article.

    0
  44. 44

    Purcul Mitrut

    May 5, 2013 6:12 pm

    Interesting maintenance page ideas. These examples are helpful! Just searched some nice examples of maintenance pages and these are perfect for what I need

    0
  45. 45

    It’s good to have a decent maintenance page up or else people and search engines might think they came to the wrong place. We recently had this issue with a client where they had to switch hosting but the new website wouldn’t be ready for 3-4 days yet. We set up the proper redirects so that their rankings would not fall.

    0
  46. 46

    thanks for the info, ideas, and your article is very interesting to do

    0
  47. 47

    How would you recommend mitigating the consequences of, say, Google trying to crawl your site during its scheduled maintenance?

    0
  48. 48

    Great to see the maintenance page of popular websites on internet. Thanks for your useful article.I would definitely like to implement any one of this in the future.

    0

↑ Back to top