When it comes to do-it-yourself web design you have to set yourself up for success. You don’t want to break your website by making changes live. All it takes is one small error in your code, like something not closed correctly, and you can leave your visitors looking at a garbled up mess, with a less-than-desired experience and you end up not looking so great in their eyes.
Making live, noticeable changes to your site can be very disruptive if you have any traffic at all on your site, so you want to give yourself the latitude you need to experiment and break stuff without the world knowing.
You will need to copy over your current site to whatever platform you choose. This means getting a copy of all your website files and, if you’re using WordPress, you’ll also need to get a copy of your MySQL database too.
You’ll want to have a fully-functioning copy of your current site up and running in your development environment so when you’re done you can push everything back up to your live site and roll out your new design.
Providing that you’re comfortable working with code, you need to take the next responsible website owner step and set up a development environment.
Here are three simple ways to set up a testing and development environment for your web redesign project.
Set up a subdomain on your hosting account
The first way to do this is by creating a subdomain in your web hosting account and doing your work there. This gives you the ability to work on your site live on the web. You can use a simple FTP connection to move your files back and forth and this way you don’t disturb your live site, or your visitor experience by making changes live on your site, which is never a good idea.
Set up a development domain
Setting up a completely separate domain name that’s not currently being used for something else is another good way to work live on the web. You can use the same FTP tool to move your files back and forth, and test things out on your test domain name and not have to worry about breaking things on your live site.
Set up a local development environment
The easiest way to work on your site without running the risk of breaking things on your live site is to set up a local testing and development environment on your local computer. You can use a tool like WAMP for Windows, or MAMP for Macs, to create a place where you can do your design work on your local computer, then when you’re done, move everything back to your hosting service.
This one is a little trickier than using a setup on your current hosting service because you have to be able to install and configure the tool you use. I’m a Mac guy, so I use MAMP almost exclusively to do my web development work. It’s faster to use because all the additions and subtractions and saved files are all still on your local computer and you eliminate the step of having to move things back and forth via FTP to see your changes. You just save your CSS document, then refresh your browser and your change is right there before your eyes.
The more important factor here is to choose a method that you’re going to be comfortable with, that you can work with, that will save your live site until you’re completely 100% ready to roll out the new design to the world.