Website Facelift

By Ramona Eid | December 20, 2016

When your Website has been on the Web for 23 years, isn't that a mid-life crisis? The cure for that ailment is a Website facelift!. We took our medicine and got the results the doctor ordered.

Yes, but what did it look like before, you ask? Excellent question! The screen-shot below is of the Home Page for the domain, complete with bouncing soccer balls as animated .gif graphics. As you can see, there was a desperate need to bring the site into the twenty-first century. At the same time, we needed to insure that it was Responsive, Maintainable, and Scalable, the three tenants we live by in design and programming.

Example blog post alt

Another Old Page

Doesn't the screen-shot below just scream last century? The Website was using last century technology as well. Active Server Pages (ASP) is more like "spaghetti code" than maintainable content. It didn't look bad on mobile, but I certainly didn't want to push forward this tired, old codebase. Even though I had been on the Web longer than Google, Yahoo, Facebook, Twitter, and many others, I had not actively been updating this Website. Time to change!

Example blog post alt

Website Facelift More Than Just Cosmetic

Okay, it is time to get down in the weeds about what the Facelift really entailed. It was a lot more than just a cosmetic UI change. For various reasons, I chose not to implement WordPress or any of the .NET options like MVC. That gave me an opportunity to be innovative. I never want to waste those types of opportunities because they are also valuable learning opportunities.

I found a fascinating HTML5 Bootstrap 3 template, complete with “46 HTML Pages Full of Features”. The issue is that all the pages were written completely in HTML, no Server-Side code at all. That creates a barrier to maintainability, and therefore is not acceptable.

I refactored all 46 pages into PHP pages, and created templates by using include files for repeated HTML. The include files can include code (pardon the pun!). That way, when an update or change is required, I only need to make that change in one place. It satisfies the DRY (Don’t Repeat Yourself) software principle. That fits my paradigm of “One Point of Failure … One Point of Success”. That’s what I strive for in writing code. I don't want to get too deep into the weeds for fear of boring and losing some of you. If you want to hear more, please contact me.

Since I am also known as the JavaScript Voodoo Priestess, of course I added my own custom JavaScript Library. I can add some of my own special flairs to the awesome template. Hopefully, as I continue to flesh out the Website, I can dazzle you with more JavaScript. On the Home Page, the section Ramona's gone Random is just one example of my custom JavaScript Library. There are many other examples scattered throughout the Website. Stay tuned, and come back often for more. This mid-life crisis is not over yet!

2 comments

Julie Alma

December 27, 2016 at 2:00 pm

This site now looks a hundred times better than it ever looked before. Keep up the good work. I am waiting to see what else you add.

I will keep checking back.

Reply

Louise Armero

January 10, 2017 at 9:23 am

Nice post and nice website. I do like the redesign.

I am especially intrigued by the WordPress site you have linked to, http://mdwsc.com/ That is a beautiful Theme.

Reply

Leave comment

Do you want a cool website like this one?