“Our Site Has Moved” HTML Responsive Template

Updated March 25, 2020     17 Comments
Originally posted April 22, 2015

Web Developer Resources

This is a quick HTML sample for an “Our Site Has Moved” page. It’s responsive and mobile-friendly. Just copy the HTML below and paste it into a new file called “index.html“. (If you prefer to download the template instead, skip to the bottom of the page.)

You do not have to use the same image as in the picture. You can use either your own large image, or no image. See the customization options below.

You have to change the URL http://new_site.com to the URL of your new site. Please note that you have to make that change in 3 places below (line 4, and twice on line 76). Those lines are highlighted. Then, see STEP 2 below.

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Refresh" content="10;URL=http://new_site.com">
	<meta charset="UTF-8">
	<title>PLEASE NOTE NEW ADDRESS</title>
	<meta name="description" content="Our site has moved to a new address. Please note the change of address." >

	<!-- Mobile Specific Meta -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->

	<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>

	<style>

		body{
			font-family: 'Noto Sans', Arial, serif;
			font-weight: 400;
			-webkit-font-smoothing:antialiased;
			-moz-osx-font-smoothing:grayscale;
			line-height: 1.618em;
			background: #464646 url('lake.jpg') center center no-repeat fixed;
			background-size: cover;
		}
		h2{
			font-family: 'Noto Sans', Arial, serif;
			font-weight: 700;
			font-size:40px;
			line-height: 1.618em;
		}
		section{
			max-width:800px;
			margin:8% auto 1em auto;
			background-color:#222;
			opacity: 0.8;
			filter: alpha(opacity=80); /* For IE8 and earlier */
			color:#fff;
			padding:1em 5%;
		}

		a{
			color: #00CC66;
		}
		a:focus{
			outline:none;
			outline-offset:inherit;
		}
		@media (max-device-width: 1027px) {

			body{
				text-align:center;
				font-size:larger;
			}
			section{
				max-width: 90%;
			}

		}

		@media (max-device-width: 640px) {
			section{
				max-width: 97%;
			}

		}


	</style>
</head>
<body>

<section>
	<h2>Our Site has moved!</h2>

	<h3>The new web address for this page is <a href="http://new_site.com">http://new_site.com</a></h3>
	<h3>...You will be transferred to the new site in a moment...</h3>

	<p>If you have waited more than a few seconds and you are still seeing this message, please click on the link above! Thank you.</p>
</section>

</body>
</html>

Step 2

Save this image: (lake.jpg) to your computer. Then, upload the image and the index.html file from above, to your website. This should go in your website’s main folder, which is usually named “public_html” or something similar.

That’s it. You now have a mobile-friendly and responsive “Our Site has moved” page which automatically redirects users to your new site. You are finished, unless you want to make one of the customizations, below.

Customizations

The page will automatically redirect users to your new site. If you don’t want the page to automatically redirect to the new site, then delete lines 4 and 77 in the HTML, above. They will still be able to click the link to go to your new site, if they wish.

You may want to replace “Our Site” in the heading, “Our Site has moved!”, with the actual name of your site. You can change that on line 74.

If you prefer a different background image, you can use any large image that you want. In that case, you’ll have to replace the name of the image (lake.jpg) in the code on line 23 to the name of your own image. So, change lake.jpg to the name of your own image. Be sure to upload your image to your site, to the same main folder as the index.html file.

If you prefer to go without any image at all, you can do that, easily. Change line 23 to background: #464646;. That will make it a dark gray which looks modern and professional. You change #464646 to any HTML color code that you want.

You can also change the colors of the text block. You can change the background color on line 35. To do so, change #222 to your desired HTML color code. The background of the text block is a bit transparent. You can make it solid (fully opaque) by deleting lines 36 and 37. You can change the text color on line 38. To do so, change #fff to your desired text color. Or see this comment below for another style tip.

Download the Template

You can download the template instead of copying and pasting from above.

↓   Download the template

Remember to change the site URL (http://new_site.com) to your own new site on lines 4 and 76 (twice on line 76).

See more:

We've 17 Responses

  1. November 28th, 2015 at 3:48 pm

    Well done, this was all I needed, thanks! 🙂
    I hope you do not mind if I did not change the image, just the text and the url, because for my purposes all has to be in Hungarian.
    Bye,
    Szilvi

    Reply ↓
    Szilvi

  13. June 30th, 2020 at 10:25 pm

    Thank you so much!! I’m in the final stages of moving my site and came across your code. It’s exactly what I need and it worked perfectly.

    Reply ↓
    May

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]