The Three Golden Rules of Site Redesigns

Last month I made a New Year’s resolution to schedule myself as a client and rebuild my website. Basically, the design and code had become entirely embarrassing to me. Additionally, the chaos caused by three years of feature-creep and band-aids was extremely frustrating.

Rebuilding a site is a great feeling; it means out with the old and in with a new. A clean slate.

The Three Golden Rules of Site Redesigns

But there are also a number of critical questions to ask when you’re thinking about redesigning your website:

  • The redesign might appeal to a new audience, but will it alienate loyal readers?
  • How will restructuring content affect search engine rankings?
  • Will these changes even make the site any better?

Fortunately, if you follow these three golden rules to redesigning a website, you’ll be just fine.

1. Change the Look, Not the Feel

Change the Look, Not the Feel

When a site has an established audience, changing the design too drastically could be suicide for returning traffic.

Simply put: you do not want your established visitors to wonder if they’ve arrived at the wrong site. But other than that, go nuts! The old design shouldn’t limit you creatively, just take a few key elements and make sure the new site is still recognizable.

If the logo is strong enough, it can probably carry the transition by itself. Otherwise, look to the old site for whichever visual elements became the brand of the site. Keep an open mind; the site’s brand could be just about anything: the color scheme, typography, icons or photographs. Repeat these key themes in your new design, preferably in a similar location.

A quick case study

A quick case study

For my portfolio site’s redesign, I decided on a flourish to carry the design transition rather than the logo. Colorful and located in the upper-left corner, this flourish ended up taking on a lot of the logo’s role in the old site.

The actual logo was in the upper-right corner, which I originally thought would be fresh and different. It turns out that upper-left logos are so common that this placement just devalued the logo and made it read as a second-tier item on the page. I’m not saying you can’t put your logo in the upper-right; it’s just that I didn’t have the design skillz or a good enough reason to pull it off.

So my site’s redesign had two goals to accomplish in parallel: reuse the flourish which had become the brand for the old site, as well as fix the logo placement. Taking a portion of the old flourish and some of the color elements from the old site, I was able to make the site feel the same despite drastically changing the layout, typography and various UI elements.

2. Avoid Losing Search Engine Rankings

Avoid Losing Search Engine Rankingss

One of the most important things when overhauling a site is to make sure the new site doesn’t lose any search engine ranking. Sure, any restructuring will probably cause an "awkward adolescence" as Google reindexes your site’s pages, but there are a number of things you can do to make it less painful.

First, make sure you don’t lose any of your old site’s title tags or meta descriptions (or meta keywords if you believe in that sort of thing).

Additionally, keep any of the old URIs the same if at all possible. But if you have a really good reason for changing them, make sure to use 301 redirects. Even Google says so.

A 301 redirect tells Google that a page has moved permanently, meaning that it should take all of the search engine mojo it had given the old link and transfer it to the new one.

So make sure to 301 redirect every page that has moved. I would also 301 redirect any pages that have been removed, and point each to a related page on your site.

The easiest way to set up 301 redirects on an Apache web server is with .htaccess. Here’s a quick tutorial. Alternately, you can set the document header information using PHP or a number of other methods.

Last but not least, make sure to change any rules in your robots.txt and send a new Sitemap off to Google as soon as you launch.

3. Back Up the Old Site and Use a Development Environment

Back Up the Old Site and Use a Development Environment

Nobody likes losing content. You end up feeling like the Germans at the end of Raiders of the Lost Ark. So back up your files and databases often.

When I’m working on a site I like to keep a local repository under version control, but you don’t have to get fancy, just make a backup.

Additionally, it’s a good idea to set up a dev environment for your new site. The advantages are pretty obvious: you won’t break anything or display any debugging information on your live site.

It’s usually best to work locally since you don’t lose time transferring files via FTP and you’re able to work even when you can’t get online. Here’s a tutorial on setting up XAMPP and WordPress on your machine. Here are tutorials for Mac OSX, Ubuntu and Windows. I think it’s a good idea to get your local machine set up to run PHP, MySQL and/or anything else you develop with.

Alternately, if you’d rather work online, just set the site up on a subdomain. However, make sure to use an .htpasswd or something to keep this password-protected, even if you don’t tell anyone about the subdomain.

Final Thoughts

Following these rules ensures that your site’s overhaul goes as smoothly as possible. But keep in mind that—no matter what—you’ll end up hating your site again at some point. The job you do now just determines how much you’ll hate it and how soon.

What rules do you follow when overhauling or redesigning a site? Please post any of your own "golden rules" in the comments below.

Related Content

About the Author

Jon Raasch is a UX nerd and freelance web designer/developer who loves jQuery, JavaScript and CSS. He spends his days building client sites, consulting, and developing a variety of free jQuery, JavaScript and WordPress tools. Check out Jon’s blog or follow him on Twitter: @jonraasch.

Add your comment 1 Comments

Post your opinion


Post your message and we'll contact you immediately.
Thank you for your desire to work with us.

Please, fill out the required fields!

Close
OK