The Three Golden Rules of Site Redesigns

Feb 9 2010 by Jon Raasch | 31 Comments

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.

31 Comments

TimHD

February 9th, 2010

Agree with much of the above… I tend to try and keep the structure very much the same to maintain the user experience of a site. Also should I happen to change something 301′s are so so important.

Nice article

Cheers

Tim

Nick Burd

February 9th, 2010

Yea, i’d say these are some great points. Not many people think about the Google rankings before they re-design their website.

Thanks for the read.

App Sheriff

February 9th, 2010

Redesigning can be a very stressful phase in a website’s life period. These were some of the basic rules..But, even then people forget to do so.

Thanks Jon :)

Priyank Sharma

February 9th, 2010

You’re so true when you say that one will end up hating their site again at some point. I can relate to that. Anyway great article! :)

sriganesh

February 9th, 2010

thanks for sharing a good post and informative. i should think about the redesign of my blog in a good way

Matt Hauger

February 9th, 2010

I don’t think you mean the Germans. It was the Americans who lost the Ark in their uber-secret bunker.

Gary

February 9th, 2010

Fourth golden rule: stop and question why you think you need to redesign in the first place.

For example, read:

Good Designers Redesign, Great Designers Realign
http://www.alistapart.com/articles/redesignrealign

Erik Ford

February 9th, 2010

What timing! Though our site is less than 6 months old, I have found all of the little mistakes I’ve made in design, coding and user experience to the point that I know a redesign is necessary soon than anticipated. This time around, I will painstakingly agonize over every minute detail to make sure I’ve gotten it right (fingers crossed).

Thanks for the tips. Beautiful vector work on your redesign.

SM

February 9th, 2010

Nice tips. Thanks

Dave

February 9th, 2010

Hi good article and i agree with what was said.
I had a total redesign of my site it now looks totally different although the same info is displayed. The reason was to have a WordPress site you can see the result here:
http://bee-software.net/
My old site was 100% flash although it looked like a HTML site it was Google friendly too (the words were displayed in the source code when you took out the # sign in the url).
http://bee-software.info/

Arrs

February 9th, 2010

This is why you are doing our redesign. You rock!

Tim Read

February 9th, 2010

Hmm. Thanks… especially about the 301 redirects.

Jon Raasch

February 9th, 2010

It sounds like I’m not the only one who got invested in my redesign…

@TimHD – yeah keeping the site structure as close to the same as possible is always a good idea. Sounds like you had the right idea

@App Sheriff – it can be stressful, but try to focus on all the great improvements you’re making

@Matt Hauger – Hehe well the Germans lost the content, and the Americans lost their backup. That warehouse is a lot like my ‘backup’ directories before I used version control….

@Gary – Great ALA article, and that’s definitely a good point – make sure you have concrete goals that the redesign accomplishes.

@Erik Ford – Just remember what I said about hating it again in six months :P

@Dave – Nice work, I like how you repeated the embossed green text and the panel background color as the site’s “brand”

Zeyar Wai Phyo

February 9th, 2010

Thanks! I am redesigning my site, so very useful!

Eelco

February 10th, 2010

Not as much a tip, but a suggestion, do not let your users know you’re redesigning untill its close to being finished.

I announced a redesign/overhaul a while back and due to lack of time it’s still not finished, yet people (and me) are getting curious if it’s ever being released.

Jordan Walker

February 10th, 2010

Those a all very nice and handy, the only problem one would face or learn to change is trying to 301 redirect with IIS 6. With Apache it is cake walk, but other web servers it may be a little more tricky.

nishant

February 10th, 2010

310 redirect is a savior…

ronald

February 10th, 2010

Nice tips, specially tip 2. Avoid Losing Search Engine Rankings . . .

Sunny Singh

February 11th, 2010

“The job you do now just determines how much you’ll hate it and how soon.”

Couldn’t be any more funny and true. You just have to except the fact that nothing you do will be perfect, especially in the future.

So easy to relate to the coding mess, sometimes you either get lazy or have so much going on that a redesign is just an excuse to clean up your coding. I think that a great reason for a redesign is when you add more content, and your brand has changed meaning.

Also, the .htpasswd is a bit too far (I usually share the link for feedback with a few people) but it’s good to keep it secret until the final release.

Great post, really helped.

Satya Prakash

February 11th, 2010

Whatever be the case, I want my website load as fast as possible.
I am not a designer so I find it very difficult to reach at good design. but I like simple look so I try to avoid too many colors.

sushilshirbhate

February 11th, 2010

thanks for sharing a good post and informative. i should think about the redesign of my blog in a good way

Mike

February 11th, 2010

Another rule: If the redesign isn’t intended to enhance usability, don’t even start.

Jon Raasch

February 11th, 2010

@Eelco – Yeah I stopped “soft-launching” things a while ago…a lot of times your friends are the best first group to launch to, but they’ll be rolling their eyes if you send them there over and over again…

@Jordan Walker – But still important :)

@Sunny Singh – Yeah I definitely agree that you shouldn’t redesign a site for trivial reasons. For me, I wanted to widen my site for better blogging, and fix the logo issue I mentioned. As a bonus, I got to redesign it and clean up the code base, which are things I couldn’t see worth doing by themselves.

As for not protecting the subdomain, be careful. There’s a lot of tracking on the web these days, and your subdomain might show up in someone’s analytics.

@Mike – I couldn’t agree more. Usability should always be the driving force of web design (and front-end development).

Davide Scalzo

February 11th, 2010

thanks for sharing this, i did not know about the redirect 301.

Simon Carr

February 12th, 2010

Good insights in this article. Would thing I would point out is that a redesign doesn’t have to be a total over-haul. Sometimes it may be better for a redesign can be rolled out in phases. This makes it easier to get feedback and adjust the interface as the site continues to grow.

Jon Raasch

February 15th, 2010

@Simon Carr – Yes I would definitely agree, and I struggled with this one on my latest overhaul. In my case, there was a list of things I wanted to accomplish on the site, which all ended up depending on one another.

For instance I wanted to widen my layout and redesign the site shell, which make sense to do at the same time. And then I might as well also change around the portfolio layout, which means I should do the directory restructuring, etc.

This chain of dependencies made illogical to do anything less than 90% of the overhaul at once, which really sucked :). It’s like going to a mechanic who says, “While I’m fixing that I might as well replace the timing belt”.

Amy Fletcher

February 17th, 2010

Question – how do you submit your new site map to Google?

Chase

October 13th, 2010

So, I just started a marketing internship and my main project is to redesign our website. Their reasoning is because I am a photographer and of my marketing degree. I have 2 issues; One: I’m very new to the industry that my company works in; Two: I have never coded or done any web development in my life. Needless to say I’m pretty much at a loss. Now I’m not completely helpless, I have our IT guy who I’m pretty sure wrote a lot of the code for our site and I think through plenty of article reading and messing round on Google Code Playground I might be able to pull this off… So this article has been helpful in getting myself organized to a degree but who would like to give me some pointers?

Sue Warrington

May 27th, 2011

Great tips, redesigning a site with good traffic is always a worry. I have a 4 year old site with excellent traffic that needs redesigning at the minute. One thing I could add, is redesign first, then add the extra functions / pages as stage 2. Hopefully that will reduce any search engine loss…

Abe

June 21st, 2011

Good points, especially regarding ’301 redirect’.
I wish you had covered more specifically the issue of color’s change in The process redesign.
I liked very much your statement:
“…. you’ll end up hating your site again at some point.”
It is true.
I think one of the most important factor behind it in most cases is the fact of applying too many(or not matching)colors in the original version.
My site (http://webcreationtips.com) is a new one.
However, I have changed it so many times.
Now I have become an advocate for ‘Minimalist Design’.
Every time that I decide a redesign, I have this approach in my mind.
Jon, and you other guys contributed to this post,
I am looking forward for your feedback regarding my site’s look.
Thanks.

Leave a Comment

Subscribe to the comments on this article.