Home Products Downloads News Store Support

Stan's Blog

Updating an old HTML site to HTML5 and CSS3

How to use Maxprog products Maxprog's Blog

Compatible with MS Windows Compatible with MacOS

Updating an old HTML site to HTML5 and CSS3


The maxprog web site was originally created in the late nineties with Adobe PageMill, later replaced by Adobe Golive and finally Dreamweaver. I used to edit code manually with TextWrangler quite often because it was faster and to say the true, the code was quite simple, at least for me. WYSIWYG editors are fine for given tasks but if you know HTML, writing code manually is far better!

In July 2016 I decided to move everything to HTML5 and CSS3. The first step was to take some random pages and pass them thru the Nu Html Checker. Well, the result was devastating. Some pages were returning more than 800 errors. Actually the maxprog web site is made of hundreds of pages. I though it would take ages to achieve the update so I started thinking about alternatives, even rewriting the whole site from scratch.

After weeks of thinking and fiddleling around I finally came up with a brilliant solution by writing a PHP template server engine. I started that same July and worked on that all the year long. The result is a fully customizable output using HTML5 and CSS3 with data placeholders, the template system taking care of everything. The good thing is that the template reproduces the same look and feel of the original site. Look at this sample page. As a result I have been able to process the whole site maintaining old and new files live at the same time. Processing the whole site applying that template system took about 3 months of hard work. I am now finished!

The site processing has been done using BBedit on a Mac. That tool has a Multi-File search feature that allowed me to change things in hundreds of files at once. Lots of things have changed in HTML5 and with CSS3 styles are not applied as before. You have to process all <table>, <tr>, <td>, <img src>, <div>, <span> and <p> tags making sure the styles are applied properly. As an example the line:

<img src="/pictures/mypicture.png" alt="" border="0" />

had to be replaced with:

<img src="/pictures/mypicture.png" style="height: 18px; width: 18px; border: 0px" alt="" />

The files contained dozens of thousands of them but the big problem was the <font> tags, how could I replace so many of them with my CSS3 files? Dozens of thousands of <font> tags actually... Well, I did it and it took less than 5 seconds, again with BBEdit, with the help of this simple regex expression: <font[^><]*>|<.font[^><]*> and finally I just had to modify my CSS file to set the default font face, type and color, that's all!

In the last months I enhanced the PHP template server engine to support pads and mobile phones so all the web site pages look fine everywhere. I had to implement that quite fast because Google gives much better ranking to pages that look fine on mobile devices. Actually my pages started losing positions in Google search result pages starting May 2016. As of mid July 2016 many maxprog pages had disappeared from the google index so I scrambled to catch up!

More information on HTML5 here and CSS3 here.

You may also be interested in using RSYNC to synchronize local and remote directories.

Stan Busk - Software Engineer


Recent questions from our users
  What is the best mail server I can use with MaxBulk Mailer NEW Screenshot
  How can I export my lists to a new computer NEW Screenshot
  How to send a HTML email NEW Screenshot
  How to hide text in my message UPDATED Screenshot
  How to transfer FTP accounts between computers Screenshot
  Google ending support for less secure apps YouTube Video
  How to add social networks icons to my message Screenshot
  How do I set up an unsubscribe link Screenshot
  How to export several lists into to a single file Screenshot
  Why do I get timeouts when testing given addresses Screenshot
  What are the Zoho mail settings for MaxBulk Mailer? Screenshot
  iCash has become slow over time Screenshot
  Emails sent but not received Screenshot
  HTML Email is received empty Screenshot
  How to use an alternative text when a tag value is empty Screenshot

▾ Last videos, Online events and Q&A Sessions ▾

▾ Last customer reviews ▾

Did you like this post?

🔐 Secured by Comodo SSL | UptimeRobot - Site Loaded properly