Navigation Menu

Convert Your Old Web Site to WordPress or Modern CSS

Many old web sites, written using any software before style sheets became widely used, require extra work to maintain. And there are a lot of web sites with those old pages.

There are three main issues you need to correct when converting old sites:

  • The use of multiple levels of nested tables, to control layout. Makes modifying the layout of your site very difficult! The old layout won't display well on mobile browsers.
  • Use of formatting commands throughout the file, to specify font, color, and size, for all the text. Prevents style sheets from having any effect.
  • Repeated elements such as menus, header, page footer in each page. These should be removed into separate files, so changes show on all pages. In WordPress, these should be handled by the WordPress theme.

My WordPress site for less technical users is WordPress and Computer Help, with simple troubleshooting, what you can do to protect your site from hackers, and how to make your WordPress site work well with the main social media sites. I can make your site work like this, or like Central Wine which is actually the same WordPress theme with a little extra CSS styling, although it looks so different.

I'll show you the advantages of converting your site, and some ways to make converting your site easier.

One of the most difficult techniques to convert, very commonly used on old sites, is the use of tables within tables to control the layout of information in the site. On any site where the designer used tables to control layout, you can not change the layout in any substantiall way, without extracting the text from the tables. Your site is very inflexible.

If you were telling someone how you wanted a newsletter to look, you might say you want a header at the top, a list of topics on the left, an article here, with a sidebar. Below all the articles, have the contact information and copyright notice.

There are many layout programs that control exact positioning of elements on the web page. The software converts the design elements from how you think about them into "rectangles within rectangles" that web pages use: for example, the sidebar might be in the 17th through 21st columns. Even the narrow blank spaces between elements would need a column, in many web page design programs.

If you are not working in the original layout software, you will have to keep track of how many columns there are in each row, and what goes in each column (and row) throughout the page. And you need to specify each "next column" command, in the right place. Yikes!

Often it will be easier to convert a complex page to a modern layout, than to keep track of how many columns you need to insert to get some text to display in the right place.

Modern web site design lets you specify layout much the way you think about it. You want a rectangle at top, a rectangle for the list of topics, and next to it a rectangle (for the article) which has inside it a smaller rectangle (the side bar), and below all these rectangles put a rectangle (the contact information and copyright). You can say in a style sheet that you want an automatic border around all articles, or sidebars. You specify in the style sheet that you want a little extra space around all side bars. Similarly, you specify the fonts, text sizes, colors, all in the style sheet.

If you later want to move page elements around, most of the changes can be done in the style sheet, without having to manually edit every page of the site. Even major visual changes, for example having the list of topics on the far right side, and using a completely different set of pictures (for example, the page banner, menus, and background), would not require editing more than the style sheet!

This site has the most important things for your visitors and for the search engines, the main text (what you are reading now) first in the HTML, then the code to display recent Twitter posts, news, and signup form (each pulled in from a separate file). The vertical menu is next-to-last, followed by the copyright notice and bottom menu. Style sheets control the layout and colors, including displaying the columns in the order I want.

If you want your readers to be able to print your site with each article in one piece, or print it much like it looks on screen but without some elements (perhaps the menus or ads), you can easily do that with style sheets. This site has a print style sheet that hides the menus and signup form, puts everything in one column, and makes all text black.

Another big headache to change from old sites is the use of multiple font and color tags: you have to edit the entire site to change the way the site looks. Each paragraph typically has the font, text size, and color specified, requiring tedious and error-prone editing to make the site have a new look.

When you have colors and fonts controlled by a style sheet, you update the style sheet and the colors, fonts, text sizes are instantly shown in the new look throughout the site.

The third headache to change is menu items: multiple images needed to be customer-generated to add a menu item, one for normal links, mouse-hover, and visited links. The menu was embedded in each page, so if you change the menu you have to modify each page and upload it to your web server.

Newer sites have the menu as a separate file, much easier to maintain. Modern CSS even makes "buttons" without any images, but simply text in front of a shaded background. Change the one file and all pages in your site that include the menu have the latest version. No custom images are needed for each menu item (images or shaded colors can be used that apply to all menu elements, and the menu text is positioned on top of the image). Multiple-level drop-down menus are easy. The menu file is included by your web server where you want it. To change the navigation for your site, simply change the menu file.

Just like having the menu in a separate file, all the repeated elements of the page can be in separate files, for example the site menu, menus used on a few pages for section navigation, the copyright notice, social networking buttons, your signup form. This makes them easy to change, and you know they have been changed for all pages that include these items. The amount of administrative work needed with the old way, to make sure you have added, for example, a new social networking icon to all pages on multiple sites, would have kept you from doing it. That is the approach WordPress takes; the theme designer takes care of all of that layout and styling for you.

Modern web browsers will piece things together on a well-designed site in the best way, or at least a decent way, given the font size the user wants to use, and the screen size they have. The site will work decently for someone who is almost blind, using enormous text on a huge monitor, or someone using a web-enabled cell phone or tablet. It may not have the fancy layout that looks great on a high-resolution wide-screen monitor, but it will be easy to read. On a site where the layout is table-based, visitors to your site would have to keep scrolling their view to read the site. (Have you seen people wearing out their fingers to read a web site?)

Most older web sites have little or no information to help search engines know what your pages are about, and so rank lower than they should in search engines. Also, they have nothing to tell social media sites like Facebook and Twitter what text to display when someone mentions your site. Your pages will not be found nearly as much as they could.

Search engines often consider the first text they see on a page as most important, and show that text in their description of your page. On many sites, the page banner and menus (the text shown at the top and along the left side of the page) are at the top of the code for the page, and therefore what search engines see first; with style sheets you can have a page header followed by the main body text, with the repeated elements such as menu and footer listed at the end but displaying where you want them.

How to Convert Your Old Web Site

You can manually re-type all the text of your site, which would take much too long!

You can bring the HTML code of just the portions of each page that are unique. Takes time to find and select the relevant HTML code. Also, the old code probably includes font and color formatting commands that would prevent the style sheet from controlling the look of your pages. You would have to edit out this code, very tedious.

There are special commands in programs like DreamWeaver to make the process easier. Especially nice is the "Paste Special" option, which includes 4 levels of code details, including one that keeps the paragraph structure (<P>, <H1>, <LI>, etc.) but without fonts, colors, or styles. Of course that only works if you purchased DreamWeaver…

I can convert the old version of a page into a new page, including making a page description and keywords for the search engines, in 15 minutes for a simple page, to about 45 minutes for a more complex page.

Each page I make has the main layout and search engine information in one file (or better, in WordPress), and the text unique to this page in another file. This means you don't have to pay attention to putting new text in the right place. (Said another way, if you have the content and layout in one file, and you inadvertently put the content in the wrong part of the layout, it won't display the way you expect). You save time simply by not having to find the proper place to insert your text!

If you need to change the layout in the future (for example you want to show your last five Twitter posts or a relevant YouTube video on each page) make a template with the new layout commands, and for each page simply bring in the search engine description and keywords, and the line of code to include the file with body text, and you're done.

WordPress of course is even better, there are plugins that are available that do a much better job at social media or videos than what you'd put in your non-WordPress site.

If you have a site you want me to convert, contact me and we can arrange it.