Getting Ready for a Website Redesign: Advice, Resources and More

By Robert Bowen There is a season for all things, and this holds true in the world of web design too. Naturally with the technologies and languages evolving at the rate that they tend to, not to mention the evolution of our own personal skillsets, we find new design doors opening up before us all the time. Given that this is the way of things the time will undoubtedly come, delivered by one of the aforementioned evolutionary paths or be it even some other reason altogether, that we will decide it is time to redesign our website.

Photo by Med Badr Chemmaoui on Unsplash

It is usually never a comment on how we felt about the previous design that we had, it is simply indicative of our desire to keep things fresh and up to date. Now as you climb aboard the redesign bandwagon, there are many helpful resources, articles, and even a few checklists that are already waiting to assist you scattered throughout the internet. We have decided that not only are we going to round-up all of those handy helpers into one post for easy access, but we are also going to go over a few things that you want to keep in the foreground of your mind, so they do not slip through the cracks of forgetfulness. The forgetfulness can be an aggravating roadblock that can easily throw barriers in your way on your path to the redesign. There are so many areas that we have to make sure we cover during this reimagining of the site, that without maintaining a comprehensive redesign checklist you may inadvertently skip one or two of them. Leaving areas of the site unaltered, and given the depth of the redesign, possibly ineffective. Again, this is not necessarily a comment on one’s prowess as a design professional, it simply demonstrates how many cracks there are for these minor elements to fall through. Consider some of our past articles

• Redesign: When To Relaunch The Site and Best Practices - A post from the Smashing archives that talks about timing your redesign just right, and much more.
• Redesigning Craigslist With Focus On Usability - Another great Smashing post that looks at usability focus when redesigning using Craigslist as an example.
• Whitehouse.gov Redesign: The Change Has Come - Another look at redesigning in action from Smashing with a breakdown of the White House’s new design.

So below we have some of the things you will want to take into consideration when you take on this process, also areas to keep in mind. Furthermore, we have a collection of useful posts and resources that you will also want to keep close by when you are beginning to redesign your site. We hope that it helps.

Think of Your Readers

The first and overall most important consideration to keep in mind when redesigning is your readers. Now user interface and experience are always supposed to be a major focus in any design, but here we are more talking about your established readers, not just every user. The main difference is that when you are talking about every user you are talking about the sites intuitive navigability and interfacing. When you are talking about your established readers you are talking about the experience they have come to expect from your site and the way they expect it to be delivered.

Photo by Kevin Woblick on Unsplash

And for the consideration of your readers, you want to be sure that your redesign is not so drastic that it completely breaks from the delivery and interactiveness that they are used to. This could inadvertently alter that comfort zone they have established with your site over time, and could in fact cause them to surf on to more what they feel are more welcoming waters. So always keep your loyal audience in mind when redesigning, and perhaps show your consideration by consulting them through a post on the site before the redesign, or even via social media, to find out what changes they would like to see. As far as the interactiveness of the site goes, pay attention to the areas that draw in your readers, and those areas where they are the most active. Then as you begin redesigning you know that these are areas either need to remain consistently engaging or be beneficially upgraded, but they should not be considered expendable or regarded as unimportant. Any changes made in those areas should be made with care and thoughtful consideration of the readers who help give your site purpose.

Use a CSS Framework

Just in case you were not using one to begin with, you may want to consider a way to make your redesign go a little smoother and perhaps a even a little quicker by creating and using a helpful CSS Framework. As far as solid foundations go for building on top of, frameworks are an extremely useful tools for developers in order to ensure that they get off to a firm start, already aimed and headed off in the right direction. Frameworks are the basic beginnings to styling your design, and in your redesign process, why not go ahead and give yourself a leg up right out of the starting gate.

Photo by Luca Upper on Unsplash

Now everyone who uses a framework, more than likely, either has one of their own that they have developed or tweaked, or they are using a basic framework that has been built and offered to the community. Either way, you have already skipped ahead in getting your styling in order, and now thanks to the framework, your basics are already in place. Now naturally depending on the direction you are going to be taking your redesign, your framework needs may vary from what you have constructed in the past, or what has already been made and given to the community. This does not mean that a framework would not be useful, only that you will have to piece a new one together. Given that, this may or may not be a route that you have available to take in your redesign project, but if you do, there are numerous benefits to using a CSS framework including the time and headache that it can save you. And once again, the redesign process can have enough headaches and also be frustratingly time consuming, so any time we can save ourselves any small bit of that, we need to take it. It keeps us from hitting that breaking point of sorts wherein the redesign loses its fun and appeal, and simply becomes work.

Checklist Theme Changes

Another thing to keep in mind if you are doing a redesign for a client who was previously using a pre-constructed theme, is that you are going to want to take specific note of the areas that were handled by the old theme. Perhaps a further step that you should take to ensure nothing gets overlooked is to create your own checklist of elements and options that the new design will include that the previous theme did not. This can keep these areas in focus so that their alteration will be guaranteed, not taken for granted.

Photo by Glenn Carstens-Peters on Unsplash

For example, if your client’s previous theme included threaded comments and the new design does not, you need to be aware of this. Otherwise, you are going to have to do some special altering to your code to ensure that when the new design launches the past posts with threaded comments suddenly do not have a jumbled, unfollowable mess in the comment section. Since this was already styled and handled by the theme they were using previously, we may not even think about how the new design covers these areas, or more importantly, if it even does cover them. So if you are going to be redesigning for a client who has been using a pre-constructed theme as their base from which you now have to build, then as you redesign you may want to go ahead and begin making a checklist of the differences between the theme and your design so you know where to look for possible needed fixes and minor tweaks to keep things consistent. While in the beginning this may seem like a time waster, it should more be viewed as a potential headache avoidance system, that makes for a smoother user experience in the transition, and not one riddled with bugs to be sorted. Remember consistency of experience matters to your established audience and that should not suffer because of the redesign.

Avoid Unnecessary Bells and Whistles

Since we are tossing old sayings about, another one that we should keep in mind as we redesign is the one that goes, just because we can doesn’t mean that we should. And what we mean by that is with consistency mattering the way it does, you want to try and air on the side of simpler rather than opting for something a bit more unnecessarily complicated. Sure we want to add some razzle and a touch of dazzle to our design as we rework the site, but we do not want to take things so far from away from the original that we lose the feel, and what’s worse, the appeal of the site.

Photo by Arturo Rey on Unsplash

One of the reasons we tend to redesign is because our skills have grown and we want to flex that creative muscle to show off some of what we can do now that we were unable to make happen in the past. However, if this new addition comes at the cost of the user’s experience in any way, then you have to ask yourself just what purpose does it serve? The bells and whistles are great when we can work them subtly into the site without them becoming obtrusive or a hindrance to your readers, but if their inclusion works against you and your readers, then those little extras need not make the final cut. Yes, it is always nice to be on the forefront of the evolving web, but it has to be done with style and grace, and perhaps a dash of humility. If you begin loading your redesign down with a bunch of cumbersome frills just to show how far you have come in honing your skillsets, then you are risking unnecessarily interfering with the purpose of your site and straying farther from that purpose. You are making the site and the design more about ego and less about function and form, wherein the message you are hoping to transfer with your design becomes jumbled and possibly even lost.

Revisit the Mission

Once upon a time when your site first began, it had a mission. The site had a decided purpose and a direction that it was crafted to follow. As you begin the redesign process, you may want to also revisit the intended mission of the site and see if you still intend to pursue that same direction. If you find that you have altered your course along the way, which is quite common given how much we grow and change over time, then you may find that you need to adjust your design accordingly to better reflect this change in course. What better time to make this new direction known and solidify it by saying it boldly with your site’s new look? Use this opportunity to align your site’s voice more with your own, and lock in this revised mission as you move forward and break new ground. Naturally you can undergo this evaluation process and make this sort of mission change whenever you want, but when you redesign your site, people are already going to be taking time to check around the whole site looking for any and all changes that you made so they are more likely to notice this new direction and see where you are planning to take things. You also want to be sure that if you do change your mission, that it does not so drastically turn from what it was originally that it is no longer a recognizable version of itself. If that is the case, then you do not need a redesign for the site, as much as you just need a new site dedicated to that purpose. The redesign should be a new facade for the design and the direction, but they should remain in the same area as their predecessors. If it does not feel like the same site when it is all said and done, then it will not keep the same readers that it once did.

Don’t Break the Brand

Having a brand for your site and business works for you in so many ways that you want to be sure that you do not disrupt or break the brand in any way with your new design. It is rarely a good idea to alter your brand, which iconically becomes linked to you and your site in the minds of the masses (which really is the point of the whole brand in the first place) so changing it on a whim just to suit your redesign could be more costly than expected. Remember, consistency is important, and when dealing with a brand, doubly so. Redesigns are one thing, re-branding is something else entirely, and you need to be keenly aware of which you are attempting to do. Branding goes ever so much deeper than you design does for your site and your business, so be sure that you are not inadvertently altering more than you intended to with the reworking of your site’s appearance. Redesigning can be done on a whim, generally with little to no harm being done, but a brand is so much more involved that it takes a lot of thought and effort to effectively re-brand. So if your redesign is intended as a re-branding or just an initial branding, then you will want to take extra care and time to craft a version fitting of everything that you want the brand to embody. It now has to say much more than it did before, and this should never be undertaken lightly. But if this was never the intent of your redesign, then build around the brand and work it fluidly into the new site, not the other way around.

Don’t Forget the Small Stuff

For years the saying has echoed throughout, don’t sweat the small stuff. And though in the scope of the big picture it is good advice, it may have accidentally created a set of unintentional blinders with regards to the small stuff. Wherein, no matter the situation we find ourselves in, we keep focused on the main goal, and let the little stuff around us be blocked from our sensors. However, when you begin redesigning these blinders need to come off so that our radars pick up on all the minor elements that need to be included, not simply forgotten about until we have uploaded the supposed finished new look and our users have to call our attention to something we missed.

Favicon

When speaking of the small things, it really doesn’t get much smaller than the favicon, so be sure that you do not let its size allow it to be missed as your ever watchful redesign eye searches the site. Depending on how drastic a change your look undergoes in your redesign, it may be necessary to tweak your site’s favicon as well. Having all of these bases covered further helps to cement a professional reputation for your site and you as a designer, so make sure that things like the favicon, the minutiae of your site, stay current and to date with your redesign.

Custom Default Gravatar

If you have a blog attached to your site and in your comment section you use a custom default gravatar for those commenters who do not have their own, then you will also want to tackle that minor element and not let yourself forget it until post-launch. This one is often overlooked because of the fact that it has to be written into your functions, or in this case, re-written. Redesigning can be tedious and tiresome at times, but you cannot let yourself get lazy in your work and not see to as many details as you can before you hang your banner of accomplishment and go live with the new look, so see to your functions and get those gravatars changed over too.

Broken Link Check

Another task that you can tackle when doing a redesign is to scan through your site and make sure that all of your outgoing links are still up and active, not linking to a site that has long since fallen from the landscape. This helps your redesign stay fresh and remain current as well. This may also lead to a little necessary alteration of some of the content on your site to work around these possible link losses, but that can also afford you an opportunity to find new links and content to fill any of these gaps left.

Tools of the Redesign

Below we have gathered up several redesign tools that can help ease the headaches that can commonly be associated with this overhaul process.

• Blueprint : A CSS Framework - A great place to start for your CSS framework. Get ideas for your own starting points shortcut.
• 960 Grid System - While you are redesigning if you need some quick references for your column dimensions, then 960 has got you covered.
• Find the Perfect Colors for Your Website - A fantastic resource collection from Vandelay Design on selecting the right colors for your web project.
• 8 Essential Tools for Website Redesign Efficiency - Visual Swirl collected a handful of helpful tools together for all those walking the redesign walk.
• Website Redesign Kit - is a helpful free download that includes a short booklet and a video about redesigning your website with marketing in mind.
• Freelance Folder’s 7 Fresh and Simple Ways to Test Cross Browser Compatibility - An awesome post from Freelance Folder that provides a collection of sites and services that test for cross browser compatibility for your website.

Further Resources

Let us keep this redesign enthusiasm going with a handful more of extremely helpful resources all geared towards taking on this type of comprehensive re-imagining of a website.

• Preparing and Planning for a Redesign - Web Designer Depot’s take on getting everything in order for your redesign project.
• Redesign Process: Taking Small Steps for a Better Website - 1st Web Designer offers some redesign advice from the everything in moderation school of thought.
• 21 Factors to Consider Before a Redesign - Vandelay Design gives you a pretty comprehensive list of things to think about before you take on the redesign.
• Considering A Site Redesign? 5 Tips To Get You Focused - SitePoint gives you 5 tips that will help you get focused when you are considering a redesign.
• Website redesign checklist - An in-depth checklist from Apt Media Inc to go through whenever you are redesigning.
• How To Redesign Website And Not Screw Up Your SEO - Local SEO Guide tells you in this useful post on how to maintain your SEO through your redesign.
• Know How To Plan Your Website Redesign & Get Inspired - Another post from 1st Web Designer about effectively planning your redesign along with a dose of inspiration to boot.
• 10 Tips to a Successful Website Redesign - University Business has an article that offers some advice on successfully redesigning your website.
• Things to ask before you redo your website - Speaking of advice, Seth Godin thinks it is a good idea to ask yourself this list of questions before you begin your redesign.
• Fresh vs. Familiar: How Aggressively to Redesign - This is another great post that talks about redesigning and just how far to stray from the familiar.
• Redesigning Your Own Site - A List Apart has a fabulous look at redesigning your own website that is definitely worth a read.
• Website Redesign Checklist: SEO 101 - SEO-Scoop offers this checklist for redesigning that you may also want to keep handy during your process.