Create A Memorable Maintenance Page

Jun
16

12 Comments - LEAVE A COMMENT

Every once in a while we have to take our site down for upgrades, or god forbid something breaks and we have to fix it and we don’t want to leave the broken version for our users to see.

I was inspired to write this after seeing the funny Technorati maintenance page this morning:

Technorati Monster Loose

Maintenance pages are important for many reasons, but one of the most important reasons is to make people remember to come back. If someone is visiting your site for the first time and you are currently working on your site and have placed it in maintenance mode typically you will replace your index with a page explaining the downtime and encouraging users to check back later (giving a specific time frame is good practice).

When designing your maintenance page you must keep in mind that people see dozens, maybe hundreds of websites a day. And if you’ve taken your site down for upgrades you definitely want these people to remember your site and to return later on.

A few tips to a better maintenance page:

1. Keep the general design close to your site’s design. It doesn’t necessarily need to be an exact duplicate of your layout – but it is wise to use the same colors and feeling as the original.
2. Make it simple. No need to go into exact details about WHAT your working on. Just let people know you’re working on it.
3. Give a time frame for people to return. Best is something like “Please try again in 30 minutes!”.
4. Make static content available. Have a few popular articles mirrored statically and link to them through your maintenance page. Give visitors a taste of what you have so they remember to come back for more great content.

WordPress users can download a plugin for when they are making adjustments, upgrades or fixing their blogs called “Maintenance Mod Plugin“. When activated a maintenance page will show for any users NOT logged in. If you are logged in you can view all content on the front and backend and work as needed.

The sample page that comes with the plugin is fully customizable:

Wordpress Maintenance Mode Plugin

Here are some examples of maintenance pages from some popular sites (click to enlarge):

Adsense:
Adsense Down

Blogger:
Blogger Down

Bloglines
bloglines down

Digg
Digg Down

Feedburner – not exactly a maintenance page – but good demonstration of an error page.
Feedburner down

IStockPhoto – my favorite!!
istockphoto down

Mixx
Mixx down

Twitter – has several
Twitter Down
twitter down

As you can see some of the best pages here stay true to the site brand, while making it a little fun. They also offer information about what is happening and when you can return to the site for it’s regular content.

Do you have a favorite/memorable maintenance page? If so leave a comment and I can add it to this post. Want to show off your own personal maintenance page? Leave a comment!

You may also be interested in an article published on 5/23/2011 - Even More Memorable Maintenance & 404 Error Pages.

Jump to Comments

12 Responses to Create A Memorable Maintenance Page

  1. Tyler says:

    Nice Post. Great looking site. I also agree with having a memorable error page.

  2. [...] Maintenance pages are important for many reasons, but one of the most important reasons is to make people remember to come back. If someone is visiting your site for the first time and you are currently working on your site and have placed it in maintenance mode typically you will replace your index with a page explaining the downtime and encouraging users to check back later (giving a specific time frame is good practice). (more…) [...]

  3. Ashfame says:

    Hi
    Your name tempted me to land on your blog. You have got a good archive. I am subscribed to your feeds now. :D

  4. [...] But why stop there? Your site is better than that. Customize the page with your site’s colors and images. Maybe add a video or your latest blog post. CSSgirl wrote some tips and shows some examples on the topic of creating a memorable maintenance page. [...]

  5. [...] But why stop there? Your site is better than that. Customize the page with your site’s colors and images. Maybe add a video or your latest blog post. CSSgirl wrote some tips and shows some examples on the topic of creating a memorable maintenance page. [...]

  6. [...] But why stop there? Your site is better than that. Customize the page with your site’s colors and images. Maybe add a video or your latest blog post. CSSgirl wrote some tips and shows some examples on the topic of creating a memorable maintenance page. [...]

  7. [...] But why stop there? Your site is better than that. Customize the page with your site’s colors and images. Maybe add a video or your latest blog post. CSSgirl wrote some tips and shows some examples on the topic of creating a memorable maintenance page. [...]

  8. [...] Create a Memorable Maintenance Page Offers a brief overview of good maintenance pages as well as examples. [...]

  9. Kathy Pop says:

    Thank you for the samples, it’s given me some new ideas for mine. Customized maintenance pages are a wonderful idea!

  10. [...] But why stop there? Your site is better than that. Customize the page with your site’s colors and images. Maybe add a video or your latest blog post. CSSgirl wrote some tips and shows some examples on the topic of creating a memorable maintenance page. [...]

  11. [...] But why stop there? Your site is better than that. Customize the page with your site’s colors and images. Maybe add a video or your latest blog post. CSSgirl wrote some tips and shows some examples on the topic of creating a memorable maintenance page. [...]

  12. [...] back in 2008, I wrote an article with tips on creating memorable maintenance/error pages and examples of some awesome pages from other websites. The importance of the maintenance/error [...]

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>