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

Stan Busk Stan Busk
January 10, 2019

Recent questions from our users
  Mail rejected as SPAM UPDATED Screenshot
  How do I enter turboSMTP settings into MaxBulk Mailer YouTube Video
  How I can change the old activation key with the new one? YouTube Video
  Why do I get a Delivery Report message after each delivery? YouTube Video
  Setting DKIM on MaxBulk Mailer YouTube Video
  How do I add an Unsubscribe link to my messages
  How to import a Bank statement into iCash YouTube Video
  Is Maxprog software prepared for macOS 11 Big Sur? Screenshot
  How to transfer email lists between MaxBulk Mailer copies Screenshot
  How can I download files with sequential numbers in their name? YouTube Video
  Images are missing in the message preview Screenshot
  How to send an email with a picture in the body YouTube Video
  How can I send to a big list of emails with MaxBulk Mailer YouTube Video
  Mail-merge sender data using tags YouTube Video
  I set up my bulk email message but authentication fails YouTube Video

  [Valid RSS]  Subscribe to Maxprog's Knowledge Base

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

▾ Last customer reviews ▾

Did you like this post?

🔐 Site secured by Comodo SSL
🟢 UptimeRobot - Site Loaded properly