Table of Contents
Website maintenance is often ignored area of web design and development. Today, we will change it. We will discuss 11 tips web designers and developers can use to maintain their websites. And, we will go beyond best practice for the content of the web. We will take a look at HTML, CSS and JavaScript. We will also discuss accessibility and browser testing and speed optimization. I hope that these tips for website maintenance will help you keep your website fresh long after its launch.
Tips no.5-11 are in part 2.
Tip no.1: Fix and upgrade your front-end and back-end
The performance of your website is determined by the technologies running on the background. This means both, front-end and back-end technologies. If you let these moving parts deteriorate, it will soon start to impact the website. We can draw straightforward conclusion from this. We have to take care about both front-end and also back-end of our website. This is one thing we have to do as a part of website maintenance process to make our website work flawlessly.
In case of front-end, there are common website maintenance tasks, you may already know about. One of these tasks is about checking broken links. From time to time, we should reserve some time to go through the whole website and checking for broken links. We should test both internal and external links. Link checking is not about testing the URLs of anchor tags on your website. Whole link checking goes farther. It is about also testing image source paths, backgrounds, external CSS stylesheets and JavaScript files. You have to make sure these external files are properly referenced.
Take care about back-end
In case of back-end, the basic tasks for website maintenance will depend on your website. For example, let’s say that you’re using some popular content management system (CMS) like WordPress. All these CMS are regularly updated. This means that you have to regularly check whether new version has been released. If so, you will need to upgrade your CMS. You may want to wait for a while to make sure the new version is stable. How long will you wait is up to you, just make sure you will upgrade your CMS in the end.
The same practice applies to any plugins you are currently using. You should keep these smaller parts of your CMS up-to-date as well. Although plugins may not look important, ignoring them can cause serious issues. You have to remember one thing. Every plugin either adds new feature or modifies already existing feature of your CMS in some way. In this sense, every plugin changes the CMS. This can be both beneficial and harmful. Meaning, you may think that you are safe because your CMS is up-to-date. The problem is that this may not be truth.
When some plugin in your CMS is outdated, it can be a threat to the system itself. For example, it can cause some features to malfunction. Outdated plugin can also cause layout issues if new version of CMS contains new design. Finally, outdated plugin can also be a security threat. It can expose some parts of your CMS that would be otherwise secured. The takeaway is this: Website maintenance has to include updating your CMS as well as the plugins you’ve installed.
Three types of people and upgrading
When it comes to upgrades, there are three types of people. People in the first group are eager to upgrade when new version is out. Many of these people are willing to test less stable releases such beta or even alpha versions. Then, there are people in the second group. These people don’t like to rush this. They will wait some time to see the reviews and reactions of other people. People in the last group like to stay with the current version of their systems as long as they can.
These people don’t like changes. They may be even afraid of them. These people have to be forced to upgrade. One of the common practices is removing technical support for their version. In other words, you can either update your system or you we will not help you your problems. Why am I mentioning this? I want to warn you about one thing. There will be some people advising you to stick to current version of your CMS. These are the people from the third group, afraid of change.
Before you follow advice of these people, think about this. Every update of your CMS, plugin or whatever has some purpose. In most cases, developers are not releasing new versions just to make it look like it’s still alive. There might be security problems in older version. Or, the older version may contain some inefficient code. Maybe, older version just doesn’t work properly any more. Whatever the case may be, just remember that these updates have some purpose.
Tip no.2: Clean up and optimize HTML
When it comes to website maintenance and HTML, there are two things you can do. First, you can take a closer look at the markup. Are there any components you can reduced or remove? Did you code your website in the early stages of your career? If so, chances are that your markup may contain number of redundant elements. The most common example of this is overdoing it with div tags. I saw a couple of examples where beginners in development were using div as some kind of a default “wrapper” for almost every element.
Remove unnecessary markup
For example, let’s say you use list with couple list items as navigation. Why not to take this code at wrap it in a div? Do you need that div for styling or some function? No, but you may think it will look better. The truth is that it will not look better, rather the opposite. Cluttered code is ugly. Cluttered code is also often a good sign that you lack the experience. Professional developers know how to achieve a lot with lowest amount of code possible. Follow the same philosophy.
This means one thing. If any div doesn’t serve any specific purpose, you should remove it. You can apply this principle to HTML attributes as well. Sure, going over the board with attributes is not as bad as flood of div tags. However, code will look much cleaner and be easier to manage. Give it a try and resist putting classes and IDs on every element. The next time you will want to style some element, try using inheritance principles in CSS. Doing so can help you clean up your code and make it more manageable level.
Make use of validators
The second thing you can do to maintain HTML is to make use of validators. Markup of your website should be not only clean and tidy, it should be also valid. For HTML, there is Markup Validation Service provided by W3C. This online tool will help you find any syntax errors you may accidentally miss. It will also help you establish proper structure for your content. For example, it will notify you if you use wrong type of heading. In case of CSS, you can use similar tool to validate your stylesheets.
Tip no.3: Clean up and optimize CSS
We already touched CSS little bit in the previous section. However, proper website maintenance is about more than just having valid CSS. When you develop a website, CSS can become bloated. As a result it will be much harder to maintain and also unreadable. Another thing is that you, with time, you will gain more experience. As you learn new methods and practice, you will also learn to write better and more effective code. Your stylesheet may start to look like written by two developers.
Schedule time for regular CSS refactoring
The common approach is to often just add new code on the top of the stack. This is that main cause of bloated code. Sure, when you work on some project for a longer time, you have to make some additions. There is a couple of questions you should ask yourself. Is this way of work sustainable? How long can you manage this? What about going back to optimize and refactor older CSS code? Over time, your CSS files will grow in size and that soon start to impact speed.
There are two ways you can deal with this issue. First, once upon a time you can do a hard reset. This means that you will delete all the CSS and style the website from the scratch. There is one problem with this approach. It is not sustainable for long-term projects. If you work on websites that will live only for a short time, then you may get away with this. Otherwise, you are shooting yourself in the foot. This approach to website maintenance is not usable for long-term projects.
You can’t tell your client or employer that you want to erase their website and start all over again. Imagine their faces if you told them this. In the best case scenario, they will take it as a joke. At the worst-case scenario, you will be fired. Therefore, this is not the best option. Second option is making regular refactoring part of website maintenance process. Yes, you will have to regularly invest some time in maintenance of CSS. However, it will be much faster than if you would leave his for undefined moment the future.
There is also the third “solution”. You can ignore this problem and keep adding new layers to your CSS. Sooner or later, this house of cards will fall. You can only hope that at that time, you will be already working for someone else.
Remove styles that are unused and not necessary
Let’s assume you decided to try CSS refactoring. What are the main things you should focus on? Your first goal for refactoring should be removing unused and unnecessary CSS styles. Your second goal is reducing the amount of code by removing duplicate code. Chances are that your CSS code will contain a lot of styles that are either no longer used or duplicated. This will depend on the size of your project and the time you’ve been working on it.
When you achieve these two goals, you are pretty much done with refactoring. The main goals of refactoring are improving readability, maintainability and extensibility of your code. Another goal of refactoring is simplifying code structure. Therefore, when you achieve the two goals above, your work is complete. Good job! You can now consider this part of website maintenance checked.
Remove unnecessary vendor prefixes
There is another thing related to bloated CSS and web designers and developers often neglect. CSS can become bloated by outdated vendor prefixes. We all like to use cutting-edge technologies in web development. There is nothing wrong with that. I think that we should push the limits and experiment as often as we can. This is where vendor prefixes come into the game. These snippets of code allow you to experiment with almost everything you want. In short, prefixes are great.
The problem arises when what was previously experimental becomes a standard. When all major browsers adopt the feature, and the version is used by the majority of user, prefixes are no longer necessary. Yet, how often do you take the time to go through the CSS and remove them? The common answer is, “Never”. The problem with unnecessary prefixes is that they can quickly double or even triple the amount of your CSS code.
Every new and experimental CSS feature usually comes with three or four prefixes. One prefix for each major browser engine. These prefixes are -webkit- (Android, Chrome, iOS, newer versions of Opera), -moz- (Firefox), -ms- (Internet Explorer) and -o- (older versions of Opera). In case of Edge, you don’t have to use any prefixes at all. What’s the current state of web? Some browser vendors (Mozilla and Microsoft) are moving away from prefixes. Browser either supports the feature or not.
The future of the web design and development is clearly prefix-free. Sooner or later, we will be able to say goodbye to prefixes. For now, you can regularly check websites like CanIUse and remove old prefixes manually. Or you can use tools like Gulp, Grunt or PostCSS and plugins like autoprefixer to take care about this. Just make sure to backup your CSS files.
Use style guide
The last thing I would suggest is adopting some style guide for your CSS. The style guide I’m currently using is Code Guide by @mdo. This style guide actually contains standards for both, HTML and CSS. So, if you are looking for something that will help you keep HTML and CSS sustainable, this may help you. What if you don’t find any style guide that is compelling enough? In that case, you can create your own. Seriously. Take a look at couple existing style guides, learn from them and even use them as your template.
There is one key to developing great style guide. It has to fit your needs. You have to be comfortable using it every day. Anyway, why are we talking about style guides in this article about website maintenance? The reason is simple. Style guide will help you establish consistency in code across the project. With that, you don’t have to think how or where to write something. Also, what if someone else started to work on it? First, you can use this style guide to help him understand the code. Second, you can help him adopt your coding methods to keep the code consistent.
If you work in a team, I think that having a strict style guide is crucial for the success of the project. The fact is that the more people are working on the project the harder is the maintenance. When you are the only person, website maintenance is an easy job. You are probably the one who makes decisions. When you work with team, you have to find the way of work to keep the project maintainable. Style guide can help you achieve that.
Tip no.4: Clean up and optimize JavaScript
When you are done with CSS, you should move to JavaScript. In the terms of website maintenance, optimized JavaScript is as important as CSS. Actually, no. I think that the importance of JavaScript optimization is much higher. When your website is bloated with CSS, it may take a little bit longer to load. The difference is quite small. On the other hand, overdo it with JavaScript and website can become literally unusable. It will not take a second or two longer to load. Instead, the website may either not load at all or there will be some visible issues.
Remove unused scripts
This is why you should do the same thing you did with CSS. Meaning, set aside some time to regularly refactor your JavaScript files. Your goals for refactoring JavaScript are basically the same as for CSS. First, remove unused code that is no longer necessary. Second, look for duplicate code and get rid of it. Do you use the same JavaScript code again and again? Then, you can take this code and put it inside one function and use this function instead. Use the same for variables.
Unless I am wrong here, this approach is called functional programming. It is also the way I usually structure my JavaScript code. I will create functions I can repeat again and again through the project. Every function is set of simple and repeatable actions. All these functions are defined in one place. Then, you can use these functions every time you need it by calling them. If you need to use more functions, you can sequence them and build more complex systems. This is a very simple description of functional programming. Here is a great slideshow on this topic.
The idea is that you can use functional programming or some design pattern to make your JavaScript code more maintainable and manageable. You can think about functional programming and design patterns as synonyms for style guide we discussed in CSS. Also, style guide for JavaScript code is also idea worth considering. Anyway, the result is that the whole process of website maintenance will get smoother as well. This is exactly the goal you want to achieve.
Use lints to check your JavaScript code
The last thing I would suggest is to test the quality of your JavaScript code. There are many tools that will do the job. One of the best tools in this area is probably JSLint made by Douglas Crockford. However, you should not think about this and similar tools as a validator. The problem is that what is “valid” in JavaScript may not be always synonym for what is best. The fact is that many JavaScript techniques are known to cause performance issues. Still, it is always good thing to at least test your JavaScript code so you know where you stand.
Closing thoughts on website maintenance
This is all for this first part of mini series focused on website maintenance. Let’s quickly recap what we discussed today. The process of website maintenance has to take care about both, front-end and back-end. Focusing on one part and neglecting the other will not work. In case of back-end, make sure everything you use is up to date. If you use any CMS and plugins, do a regular version check. When new and stable version is available, do upgrade.
The second tip we discussed was to regularly clean up and optimize HTML files. This means removing unused markup that is not necessary. If you have a lot of code that is commented, like me, I would also suggest minifying HTML for production. Then, all these comments will be automatically removed. Validators should be also part of website maintenance process. Clean and neat HTML is not enough. Your code must be also valid. Otherwise, you are wasting your time.
Third topic of website maintenance was cleaning and optimizing CSS files. My suggestion is to set aside some time and do regular CSS refactoring. Refactoring has two main goals. First, you want to remove styles that are unused and, therefore, not necessary. Second, you want to remove duplicate code. If you use some fragments of code often, consider creating special class for it. To keep your CSS in a good shape, consider using atomic design or any other architecture.
Another part of CSS cleanup should also include removing unnecessary vendor prefixes. Prefixes are useful only when some feature is not fully implemented. Otherwise, it’s only garbage that takes space. So, when the feature becomes a standard, removed all these prefixes. Lastly, consider either adopting or creating CSS style guide. This will help you establish consistency and make the whole process of website maintenance faster. It will also make it easier to onboard new team members.
The fourth and last topic was about JavaScript. Keeping JavaScript code clean and optimized is very important. Unlike CSS, bloated JavaScript can cause more serious issues. In some cases, it can make the whole website unusable. You can partially avoid this by removing unused scripts. This will may also help you reduce the code. Anther way to avoid this situation is by refactoring JavaScript code and keeping it efficient. Lastly, use linters to check the quality of your code. However, don’t confuse linters with validators. Linters will show you only best practices.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
