If you’ve ever tried to redesign a website (especially one that was designed by someone other than yourself) you know how frustrating it can be. Even performing routine maintenance can be difficult if you don’t spend a lot of time on the site and you’re not familiar with the structure. There are a few things you can do when you design a new website that will make maintenance and a future redesign a much smoother and less painful process.
1 – Use CSS to style your pages
Web standards dictate that the content of a website should be kept separate from the design. CSS makes this possible. This not only helps you to be standards-compliant, but it also makes the maintenance of the site much easier. Say you decide that you want to change the color of all the headlines throughout your website. Rather than going into each individual page and changing the text color, you can simply make one change to your style sheet and be done.
Also, using a CSS-based layout will make design changes much more feasible. With table-based designs, especially those that use nested tables, sometimes what seems like a simple layout change will require major reconstruction. CSS-based layout allows you to easily experiment and change elements of the layout without the need to recreate your pages.
2 – Use templates
Simply put, templates allow you to change the design of all of your pages at once. You can make a change to the template and that change will be applied to all pages that use the template. Many websites make use of multiple templates for different purposes and different types of pages.
3 – Comment your HTML and CSS
When you need to update or redesign your pages you may have difficulty remembering why you used certain coding, or even what that coding accomplishes. Commenting is especially useful in situations where more than one designer may be working on the project.
If you anticipate these situations you can add comments to you HTML and CSS that will not effect the appearance of the pages. These comments can save a lot of time and energy down the road. However, be careful not to over-comment as it may become even more confusing and cluttered, and the additional space taken up by the comments can start to have an effect on page load time.
4 – Be consistent and logical with URL names
If you’re working on a larger website it can sometimes be a challenge to even find the page that you are looking for. Try to develop consistent habits for naming pages so that you can reduce the time and effort required to find the pages.
5 – Use folders effectively
Along the same lines as point #4, folders can really help to make your pages and files easier to find (and they can even have SEO value if keywords are used in the folder names). If your website has several different major sections, consider grouping the pages inside of appropriate folders. Be careful not to use too many folders that it may become confusing, and avoid very deep levels of folders as this can create very long URLs.
6 – If you work on multiple sites use common div names whenever possible
Coming back to a website to make even minor changes can be difficult if you can’t remember which divs you are looking for. The more websites you work on, the harder it is to keep everything straight. It’s a good practice to use some common div names on all of your projects so that this process can be easier for you.
7 – Get rid of old files and images that are not being used
Eliminating clutter can make maintenance much easier. Old files are often left around, which can make it harder to find what you’re looking for, and can also take up more disk space. If you think you may need these files at a later time and don’t want to completely delete them, at least move them into a separate folder to keep everything more organized.
8 – Use valid code
By using valid code at the time you create a website you will be saving time down the road when changes need to be made. Invalid code may not cause a problem now, but it can be a nightmare for the person who’s trying to do maintenance on the site.
9 – Remove CSS that isn’t being used.
Many times when creating a website portions of CSS code will be created and ultimately never used. Designing is part experimental and this is naturally going to happen. However, CSS that is unused can create problems when you go to make changes to the site. The extra could can be cumbersome to work with, and it can even cause confusion if you think you are changing a portion of the CSS that is actually being used.
Here are two useful tools for working with CSS: