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

Topics

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
at www.maxprog.com





Recent questions from our users
  Why the iCash transaction amount column has disappeared Screenshot
  451 Error code Screenshot
  Problem sending email to Gmail recipients Screenshot
  What is the meaning of the recipient panel icons Screenshot
  How to create new projects in iCash Screenshot
  How to add transactions to iCash faster YouTube Video
  What is the best mail server I can use with MaxBulk Mailer Screenshot
  How can I export my lists to a new computer Screenshot
  How to send a HTML email Screenshot
  How to hide text in my message 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

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


🔐 Secured by Sectigo SSL | UptimeRobot - Site Loaded properly