To continue our discussions of how to make the most of using websites for digital evangelism, I’d like to offer up a suggestion now for how to make your website maintenance easier while simultaneously improving your site’s SEO performance. Once implemented across your site, this innovation will make updating a breeze for your site’s color scheme, default font family, navigational menu, footer content, etc. If you already have accumulated a lot of Web pages to your site, it will require a significant time commitment to make this design change, but it will be well worth the time and effort in the long run. One tool that can help expedite this process, however, is the AceHTML editor (available in both freeware and pro versions) which I have used for several years, but I’ll explain more about that later in this article.
By way of disclaimer, let me say first off that I am not an expert Web designer or programmer by any stretch of the imagination. Nevertheless, I do consider myself an intermediate level programmer, meaning that I am able to borrow and implement code, such as CSS, Java scripts, Perl scripts, et al, alongside my own HTML code to make my sites more appealing and/or functional.
Since I jumped into the fray of HTML programming in the early days (circa 1995), I have been designing and maintaining my own Web sites and helping friends create their own sites for nearly two decades now. Over the years I have learned a thing or two about simplifying the overall site maintenance task. I even wrote an article just over a decade ago describing how best to do this, though I made the mistake of submitting it to an article sharing site from which a bunch of plagiarists have stolen its content and substituted their own names for its authorship (I learned this simply by searching on the article’s title). While that is rather disheartening to me, since I have neither the finances nor the desire to pursue these crooks legally, I have decided to leave it in God’s hands. As my Heavenly Advocate, He will sort it all out in His Own good time.
To read my article in its entirety (updated with some minor modifications for this CCMAG article), you may point your browser to “Optimizing Your Web Site for the Search Engines Using CSS and Javascript” and read it from my Website. You may also be interested in reading some of my other technical articles, which I’ve included on my tutorials page.
To summarize my article on simplifying your website’s maintenance, you must insert a single line of code for your external CSS file and for each external JavaScript file which corresponds to the top, bottom, left, and right segments on each Web page of your site, where you could choose to insert your navigational menu and any other pertinent elements. The only page on your site where using these external JavaScript files would be problematic is on your start page. The reason for this is twofold. First, without a navigational menu on your start page, at least, the search engine spiders would have no links to follow for your site’s other pages (this would include, of course, a link to your sitemap page), and thus they would not index any of the other pages on your site. Secondly, those super-paranoid people who have disabled JavaScript functionality in their browsers would not be able to see your navigational menu at all, because their browser would not be able to display the contents of your external JavaScript files. Either of these problems alone is devastating to your site’s presence on the Web, but both together will negate all but your site’s start page from even being visible or searchable!
If it appeals to you to redesign your site to include these external CSS and JavaScript files for easier site maintenance and more effective SEO, you can use the AceHTML editor’s “Extended Search and Replace” feature on the Edit menu to make relatively short work of this. Other HTML editors may also offer this feature, but AceHTML is the editor I’ve used for many years now, so I’m naturally more familiar with it. Let me now explain how to use the AceHTML editor for this purpose, which includes, of course, shortening the process of changing the design of your site over to this new external JavaScript and CSS file code consolidation.
If you don’t already have AceHTML installed on your computer, you can download the freeware or the Pro version from the Visicom Media site. While you’re at it, you might consider downloading their AceFTP companion software as well. As an affiliate of Visicom Media, I can highly recommend both the AceHTML Pro and the AceFTP Pro versions of this software, since I’ve used both for more than a decade.
Once you have installed AceHTML onto your computer, start the software and open the first file you wish to edit for your new design change. When the “Extended Search and Replace” dialog appears, look at the lower portion of the dialog and, under the “Options” section, check the “Apply first to open files” checkbox. However, make certain you have opened only the files you wish to have AceHTML edit with this process and close all others. You can decide about the remaining checkboxes in that section according to your own preferences.
Next, in the “Where” section of the dialog, choose whether you want AceHTML to search only in specified files, in entire directories, or in all opened documents. I recommend either the “Search in all opened documents” option or the “Specified files” option (in that order). Of course, if you choose the former option, you will first need to open all of the Web files that you want AceHTML to automatically edit for you using this search and replace feature. I believe this is the best way to see the immediate results of your extended search and replace process and to avoid editing of any unintended files, such as could happen if you choose an entire directory. The latter option of choosing “Specified files”, however, is a close second in my mind, because it accomplishes the same thing as using the open documents process, except without the immediate confirmation of viewing the selected open files. Therefore, if you choose this option I recommend opening each file afterward to ensure the edit was made according to your expectations. No matter which method you choose, however, the resulting search and replace dialog remains the same.
If you choose the “Specified files” option, you will next need to click on the “Add” button in the “Apply to files:” section at the bottom right side of the dialog. Once you click on this button, a “File Manager” dialog will open where you can navigate to the directory where you have stored the next Web file you wish to edit. After you select the file name and click on the “Ok” button, you will be returned to the search and replace dialog to repeat the step for the next file you wish to include in this process. After you have selected all of the files you wish to edit, they will appear as a list in the “Apply to files:” space at the bottom right corner of the search and replace dialog.
Next, regardless of the search and replace method you’ve selected, click your mouse pointer in the “Text to find:” area at the upper left corner of the search and replace dialog and type or paste the precise text from the location in your files where you wish to insert your new line of code. Read my aforementioned article for specifics about this. Naturally, this text should be identical in each of your Web files. Now, copy this same text into the “Replace with:” area underneath the “Text to find:” area. The textual content in the “Replace with:” area must be identical to the “Text to find” area in order to retain the original content since it will be replaced with itself plus your additional line of code. Once you have done this, type or paste the new line of code either just before or just after the text you just entered into the “Replace with:” area, according to HTML coding standards and requirements.
For demonstration purposes, let’s say you want to insert the following HTML-encoded text “<p>This is a test.</p>” just after the opening <BODY> tag in each of the files you have already opened in AceHTML or those you have specified using the “Apply to files:” section on the “Extended Search and Replace” dialog. To do this, insert your cursor immediately following the right angle bracket (“>”) of the <BODY> tag in the “Replace with:” space and use your ENTER key to insert a new line. Next, paste or type the text “<p>This is a test.</p>” and press the ENTER key again to insert another new line. Now, click on the Start button on the upper right side of the dialog and a confirmation dialog for the first edit will appear.
After you’ve done this enough times that you can be absolutely certain of what you’re doing, you can check the “Replace without confirmation” checkbox to set AceHTML free to make all of your edits immediately and without further interaction from you. Until you get to that point, however, you may prefer to leave this box unchecked and confirm each edit as it arises in the process. If you happen to notice a typo in your textual or code content, you can click on the “Abort” button to cancel the process and return to the search and replace dialog to correct your error. If you decide that you don’t want to make this change to a particular file you’ve specified after all, you can click on the “Skip file” button to eliminate this file from being subjected to this edit.
Finally, after all of your edits are complete, you will have the option of saving or printing the results. If you don’t wish to do either, simply click on the “Ok” button to return to the search and replace dialog where you can click on the “Close” button to close the dialog. Once you have done this, you can review all your open files to ensure the edits were done as you expected. You can use the Ctrl+Alt+F5 keyboard combo to save all your open files at once. If you used the “Specified files” method, you should open all of your files to check them for accuracy and to review them in the AceHTML internal browser before uploading them to your site. If you’re satisfied that the edits were made according to your expectations and that the Web files now display according to your wishes, you’re all set to upload your files to your site and make them live.
Now, the next time you want to change your site’s overall color scheme (such as background and/or font name), add to or change an item on your navigational menu, update the copyright date notice in your footer, or some other change that affects the look and feel of your entire site, it will be much quicker and easier to make these changes in the pertinent external CSS and Java script files than having to change these code references on every page of your site every time you want to change your site’s overall appearance.
In case you’re unfamiliar with how to write these external CSS and JavaScript files, I’ll cover the basics of that process in next month’s article. I hope you’ll return then to learn how to finish this very significant Website design change. In the meantime, feel free to contact me via the Digital Evangelism Community on the CCMAG Website to discuss this further.
Michael L. White is the founder and Managing Editor of Parson Place Press, an independent Christian publishing house in Mobile, Alabama. His book Digital Evangelism: You Can Do It, Too! (Parson Place Press, 2011) is available wherever books are sold. For a list of his other books and articles, visit his Website at http://books.parsonplace.com.
