Will I Lose Emails If I Change Web Hosts?

When you change Web hosts, you will lose emails unless you take steps to retain them. You can keep email addresses when you change Web host as long as you transfer your domain name to your new host. Once you are set up with the new host you can create the same addresses you had at the original host. However, retaining an email address does not retain received and sent email messages at that address. You can take steps to retain this data, as well as other email-related data such as the addresses of your contacts. Preserving your email address ensures that people are still able to contact you even after a Web host change.

Email Address

An email address is associated with a domain name. If your domain name is registered through your existing Web host and you want to keep it, you will need to transfer it to your new host. You can then set up the same email address (or addresses if you have more than one) with your new host. When the domain transfers to your new host, the new version of your email address will continue to receive emails as the old one did. This means that you can continue to use the same email address to send mail and that people can continue to contact you on it. If you do not transfer your domain name and set up the email address again with your new host, you will lose that email address.

Export

Although you can transfer your email address to the new host along with your domain name, this does not mean that the mail associated with your email address will also be transferred. If you do not export emails while you still have a functioning account with your existing host, you will lose those mail messages. When exporting mail, you may need to consider how your mail folders are organized and make sure you export from all relevant mail folders, including any you have in your inbox and sent mail. You may also wish to export email addresses for your contacts if you have an address book.

Import

If you choose to set up your existing email address at your new host, when you access your email account it will not display previously sent and received emails at the address. However, depending on the email client you are using, you may be able to import the mail data you exported from the old host. If you had multiple folders in your mail, for example in the inbox, you may need to manually create these again in the new account before you can import data. Depending on the program you are using, you may be able to import sent mail as well as mail in the inbox folders.

Issues

Although it is possible to retain mail data while transferring a domain and email address from one host to another, you may encounter issues during the process. For example, your new host will become responsible for the details of managing your domain, including domain registration. When a domain changes to a new host or server, it can take some time for the domain to function correctly at its new location. This includes email addresses associated with the domain, so there may be a gap between your email continuing on the old hosting account and becoming available on the new one.

Getting Started with SVG Animation

With HTML5, you can embed SVG images inline in your Web pages. Although the level of support for some of the SVG elements still has a long way to go, there are many advantages to using these graphics. Since you create the SVG code in XML in your pages, you can also implement animation and interaction on the contents of an SVG. SVGs are also scalable at any level, so are ideal for catering to different user environments.

In this tutorial we are going to look at basic animation within SVG elements in HTML5 pages. The results will not work in all modern browsers. Although inline SVG is in itself supported in all current versions of the major browsers, the animation elements are not. You will be able to see some of the effects in both Firefox and Chrome, but the effect in which we animate colour can only be reliably viewed in Chrome at the moment. As is always the case with HTML5 skills, this is more of a preview of what we will be able to do in the near future than a practical guide of techniques you can rely on already, so make sure you include alternatives in your live sites. You can see the demo now for an indicator of what we are working towards.

Create an HTML5 Page

Start by creating a new HTML5 page using the following outline:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>

We won't be using any scripts or CSS in the head section for this tutorial, however, you can use both to apply effects to the elements inside SVGs.

Create the SVG Element

In the body section of your page, add the SVG element as follows:

The remainder of our code will be placed between these opening and closing tags. The main attributes to pay attention to in the opening SVG tag are the dimensions. You can alternatively specify relative percentage values for the width and height if you have CSS dimensions set for the containing page element.

Add the Definitions

The SVG is going to contain shapes, definitions of gradients and animations. Let's start by defining a couple of gradients. The SVG is going to contain a simplistic representation of the sun rising against a blue sky background. In an SVG, you define re-usable items such as gradients in the dedicated defs section, so add it inside the SVG element first:

Inside this section, place a gradient to represent the sky background:

This is a linear gradient, with an ID so that we can apply it to our shapes when we create them. The x1, y1, x2, y2 attributes represent the start and end co-ordinates of the gradient. In this case we want the gradient to unfold vertically so the start point is the top left corner and the end point is the bottom left corner. The stop elements represent points in the gradient - in this case it is going to go from one shade of blue to another, will full opacity throughout.

Now add a radial gradient for the sun:

In this case we define the central points of the start and end circles of the gradient - it will spread from the center of the circle shape to its outer edges. The first colour stop starts 20% into the gradient, so there will be an area of solid colour at the centre.

Add the Shapes

The SVG is going to display a rectangle background and circular sun. First add the rectangle, after the closing defs tag but still inside the SVG element:

You can include a shape using a single self-closing tag, but we are going to include the animation properties inside the rectangle element, so we separate the opening and closing tags. The rectangle properties include the x and y co-ordinates for its top left corder and the width and height, which we set to cover the whole image. We set the gradient we defined in the defs section by referring to it in the fill attribute.

Now add the circle element for the sun:

The circle is defined using the co-ordinates for its central point and the length of the radius. Again, we specify one of the gradients already defined. The circle will be in the center of the image, occupying 80% of the total width (twice the radius).

Animate Movement

If you open your page now you will see a static image of the sun in front of the sky background. Now we can add some animation using the SVG animation elements, which come from SMIL animation. First, to animate the sun, making it move into the image as though rising from the horizon, add the following animate element inside the circle element:

This element specifies an animation that will move the circle element on the y axis, which we specify by referring to the cy attribute of the circle. The attribute type tells us what type of animation this is. The from and to attributes indicate the desired start and end positions for the circle. The begin attribute indicates that the animation should start immediately and the dur attribute that it should last 5 seconds. Setting the fill attribute to freeze stops the circle from going back to its original position when the animation has elapsed.

Animate Opacity

As well as moving the circle, let's fade it in at the same time. Add the following animation, also inside the circle element:

This time the animation is on a CSS property - the opacity. We want the circle to go from zero to full opacity, to last 5 seconds and to execute once.

Animate Colour

Let's also animate the sky to complement what is happening with the sun. This animation has less browser support at the time of writing, so you may need to view the page in Chrome to see it in action. Add it between the opening and closing rectangle tags:

This is an animateColor element, which animates a change in colour over 5 seconds. The animation uses the same colours we specified in the linear gradient for the sky - browsers without support for the colour animation will simply display the gradient instead.

Conclusion

That's our basic animation complete. Open your page in a supporting browser to see the result. You should see the sun shape rise up into the image while fading in, as the background changes colour from one shade of blue to a darker one. Check out the demo to see what it should look like. This is really just the beginning when it comes to SVG animation, as there are other elements for transformational animations such as rotations and translations. With any luck you'll be able to use them for more and more users as time passes, but for the moment these effects must necessarily be used with caution.