Absynthe Minded Web Smithes

Absynthe Minded Web Smiths is the freelance web design shop of Marc Luzietti. Located South Florida web designer, I've been working in web design since 1995. I've worked for Fortune 500 corporations (Citibank® and Johnson & Johnson), dot-com startups (Guidance Resources® and Redgage) and just about every size company in between.

Absynthe 4.5

This is a transitional design. I'm teaching myself PHP and Ruby on Rails. Absynthe 5.0 will see this site coded a content management system. If I can't install Rails on my current host, I'll have to move to a host that supports it.

It pains me just to look at my old code. All of that inline JavaScript, as well as using non-sementic code like <br clear="all" /> and putting the design attributes in the code, like border="0". Now the code is much easier to read, which means it's simpler to change. Design elements in this smippet are all done with CSS, without any JavaScript, using a modeifed version of the Trifecta technique.

In addition, I've moved from using XHTML 1.0 transitional back to HTML 4.01 strict. Since I'm not serving the website as Mimetype application/XML there's no advantage to coding in XHTML, and even a couple downsides. The stricter coding imposed by XHTML doesn't exist for the transitional doctype. HTML 4.01 strict, however, does impose best practices upon coders. I considered coding in HTML 5, but that project is far from close to being recommended.

Compare the old code with the new.

2004

<div> <p>&nbsp;</p> <p><a href="/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','/images/home2.gif',1)"><img src="/images/home1.gif" alt="Home" name="home" width="130" height="35" vspace="0" border="0" id="home" align="right" /></a><br clear="all" /> <a href="/portfolio/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('portfolio','','/images/portfolio2.gif',1)"><img src="/images/portfolio1.gif" alt="Portfolio" name="portfolio" width="130" height="36" vspace="0" border="0" id="portfolio" align="right" /></a><br clear="all" /> <a href="/philosophy/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Philosophy','','/images/philosophy2.gif',1)"><img src="/images/philosophy1.gif" alt="Philosophy" name="Philosophy" width="130" height="36" vspace="0" border="0" id="Philosophy" align="right" /></a><br clear="all" /> <a href="/services/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services','','/images/services2.gif',1)"><img src="/images/services1.gif" alt="Services" name="services" width="130" height="36" vspace="0" border="0" id="services" align="right" /></a><br clear="all" /> <a href="/contact/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact_us','','/images/contactUs2.gif',1)"><img src="/images/contactUs1.gif" alt="Conctact Us" name="contact_us" width="130" height="37" vspace="0" border="0" id="contact_us" align="right" /></a><br clear="all" /></p></div>

2009

<ul id="navigation"> <li id="home_link"><a href="/">Home</a></li> <li id="portfolio_link"><a href="portfolio/">Portfolio</a></li> <li id="blog_link"><a href="philosophy/">Philosophy</a></li> <li id="services_link"><a href="services/">Services</a></li> <li id="contact_link"><a href="contact/">Contact Us</a></li> </ul>