Once again, technology rocked the entire creative industry. Creating, designing, coding and publishing content — without paper media's distribution constraints — was liberating. (Blogging validates this concept today.) However, I was also following the money. Much like the DTP Revolution of the '80s, clients dumped print assignments while throwing money at anyone said they could code.

A freelance client hired me to design some web graphics. When that work got finished, he offered me HTML assignments. Since I didn't know how to code, they snuck me into their introductory HTML class. Within 8 hours, I wrote my "Hello World" page and never looked back.

I blew off print gigs while teaching myself more advanced HTML. My one-bedroom Brighton apartment was covered in tech manuals, sketches and notes that looked like they were written by a madman.

Some people do well in abstract, institutional educational environments. I seem to only learn with a gun to my head. My goal of getting in on the HTML gravy train could only be reached by building my own website. Below is the site's development history, defined by version number:

• Version 1.0: Imagemapped Prime
• Version 2.0: Blue Rough Diamond
• Version 3.0: Blue Brushy Slick
• Version 4.0: Gray White Fade
• Version 5.0: Red No Table
• Version 6.0: Blue Pinup
• Version 7.0: Wide Format

• Marshall Art Studio Website, Version 1.0
• Imagemapped Prime
• July 18, 1997 - November 30, 1998

My first site, written in undeclared HTML. Each page is a giant IMAGE with navigation links in IMAGEMAPs. The minimal text is positioned with BLOCKQUOTEs. There are some UI concepts that can only be described as "odd". Not using HTML element tags or usability testing sure speeded up the development process!

During this 18-months, I was managing an active print media career (mostly illustration, with some page design). As a back-burner project, my HTML skills were strong enough to land interviews. The HTML shortcuts left me unqualified for larger corporate assignments. But living below the radar meant I had lots of time to learn.

• Marshall Art Studio Website, Version 2.0
• Blue Rough Diamond
• December 1, 1998 - December 31, 1999

My first two-column TABLE layout. Based the left-thin navigation column's font treatment on ESPN's, with my own Midnight Oil-inspired, over-rendered background image. IMAGEMAP navigation replaced by linked text. The expandable width wasn't so distracting on 800 x 600 monitors.

I started off by using Adobe PageMill 3.0, tempted by its editable Preview mode, control pallets and drag-and-drop functionality. Working with it for a month proved it an unreliable development tool. The Preview didn't render exactly like real web browsers, causing major positioning discrepancies. The Source mode was equally problematic, destroying any custom line-wraps and interpreting anything it didn't understand as a potential error. Correcting published errors created by working in this buggy application erased any benefit of using the shortcuts.

To avoid these hassles, I went back to coding in SimpleText and previewing with Netscape. As my old HTML teacher explained "that's all a WYSIWYG editor is anyway."

Coding a complex website in pure HTML was very time-consuming. Without color-coded syntax, keeping track of all those embedded FONT tags was a maddening and error-prone process. In the name of "learning experience", my actual working hours easily dwarfed the billable hours. Again.

I was astoundingly ignorant of HTML fundamentals at this time. Take the BODY's background image for example. Instead of stacking a thin 144 x 288 graphic and coloring the BODY white in HTML, the background image is a really wide 1800 x 288 bandwidth hog!

Fortunately, a few factors saved me from paying the price for this markup incompetence. During this version's 14-month shelf life, the internet was still an infant in capabilities and expectations. By the time hiring managers started doing code reviews, I learned enough to correct most of these types of errors. Earning my degree from the School of Hard Knocks, I became a better designer and developer.

Of course, the learning didn't stop there.

• Marshall Art Studio Website, Version 3.0
• Blue Brushy Slick
• January 1, 2000 - July 25, 2002

At this point, the primary marketing purpose was promoting my illustration and graphic design capabilities. Since I had a full time web design job, my freelance web capabilities and training were a back-burner project.

With that in mind, here's another outstanding 2-column TABLE layout. A lot of people said 2.0's navigation column was difficult to read. This version is an overall cleaner, more corporate look. (For some reason the Typewriter font seemed cool), loosely based on v2.0's "Five Step Artist" illustration. The layout TABLE's 532 pixel width looks small now, but was optimized for Y2K's average monitor resolution of 600 x 800 pixels.

This version uses my first Javascript, written for mouseover/preload image effects in the navigation column and index page.

While pushing Javascript through my known limits, I still didn't use the HTML element tags correctly on text. For example, here's an example of correct markup:

<h4>Foo Headline Going Across the Line</h4>
<p>Do FOO sentences go on this long, with no real purpose?</p>
<p>Yup, and another Foo sentence goes like that.</p>

Instead, here's how I would've marked up this same content back then:

<b>Foo Headline Going Across the Line</b><br>
Do FOO sentences go on this long, with no real purpose?<p>
Yup, and another Foo sentence goes like that.<p>

In my defense, I was far from being the sole culprit. This markup was considered standard practice in the work world, and didn't break in Netscape or IE. However, it exposes a lack of fundamentals that would get me laughed out of the business today. Back then? No harm, no foul. In fact, my day job rewarded me with hefty annual bonuses.

• Marshall Art Studio Website, Version 4.0
• Gray White Fade
• July 25, 2002 - June 4, 2004

Possibly my final layout TABLE. Expanded content width to 800 pixels. Introduced CSS and declared my first DOCTYPE. Used element tags without closing them, mostly paragraph tags with "class-itis". Navigation column restored to HTML text, with the current state having a unique class selector.

The visual design was formatted to fade behind the content. The third "striped" column was an attempt to keep the the fixed-width content column looking good on increasingly-wide monitors. Returning to previous interface, the section landing pages have clickable visual elements. It probably would've been a good idea to dump the section descriptions, but they looked so nice under the headline.

Specific examples (illustration, graphic design) got moved to Javascript-dependent popup windows. This misguided attempt at streamlining the interface made sending sample's URLs difficult. In short, a marketing nightmare. The section landing page visual designs were considered a dramatic improvement. The markup of those pages made adding new content a time-draining chore. Content updates with this release were few and far between.

Emulating some of Merrill Lynch workflow practices, I started referring to illdave.com redesigns as "releases".

Since print design and illustration assignments slowed down, each major release was an announcement of my growing capabilities. Gaining expertise through experience, I became known for merging technology with visual design principles to create customized websites.

In a move to market my accomplishments to hiring managers and technicians, I introduced detailed project pages with a "situation/action/results" format. This practice, along with doing better work, gained me the next level of clients and employers.

• Marshall Art Studio Website, Version 5.0
• Red No Table
• June 5, 2004 - October 10, 2006

After testing the waters on developing client websites, this is the site's first TABLE-free, all DIV layout. Applying standards practices, all HTML element tags are open/closed properly. It's even almost WAI-compliant (images have ALT, but links don't have TITLE). By the standards of the time, a technical masterpiece.

The visual design's a bit loud, probably an obnoxious over-reaction to those who felt the previous version was too boring. I sure showed them!

Seeking to correct the popup window UI disaster, I used a Javascript toggle that hid the content in a remote .JS file. This UI works well in standard browsers, long as Javascript is on. Without it, the content is unreachable.

The toggled UI buttons (Illustration, Print + Web) was a bit restrictive as well. The buttons only looked good with complete rows of 3, creating a "tail wagging the dog" dynamic for choosing what content got posted.

On top of an ugly look and questionable UI decisions, adding new content was also a chore. As it turns out, Javascript files aren't the best place to edit text. Remembering to comment-out content single- and double-quotes was torture.

In an effort to create a more "marketing" feeling, I removed the Sketchbook and Personal Stories sections.

Since I had a full time job, the site became my testing ground for developing new XHTML/CSS practices. In two years, I had a better understanding of UI, functional visual design and standards-compliant markup.

Now all I had to do was prove it.

• Marshall Art Studio Website, Version 6.0
• Blue Pinup
• Unpublished

Promotes my web design capabilities more than the print media skills. Shoved current content into a new "skin" based on classic pinup illustrations. While this seems like madness now, others were doing the same thing.

Technically, this version was just as unmaintainable as the last one. The buttons for Illustration, Web and Print were too big. Hiding major content in Javascript was becoming even more of a burden. The round-corner content holder prevented on-the-fly width-expansion.

As the 2-month development process ended, I realized that neither the visual design, UI or coding reflected my current philosophies of good web development. In order to get newer, more lucrative clients, I gotta rebuild from scratch.

• Marshall Art Studio Website, Version 7.0
• Wide Format
• October 11, 2006 - present

Referred to sites that used appropriate UI and visual design. Decided to split the navigation into 2 levels, widen the content area, add a tabbed UI for new features, applied a Javascript toggle that (a) keeps all the content on the page and (b) gives all content a specific URL. For a friendlier feeling, brought back Sketchbook and Personal Stories (as a 'blog). Built 'blogs for non-commercial projects (Illustration Friday, 24-Hour Comics).

So far, this design has been enhanced with rethought elements, new functionality and easily modified content. All without having to touch every page or rebuild overall markup structure.

It's taken a decade, but I think the site's finally decent.

Labels: MAS Website Development

Posted by Dave M! on Saturday, August 02, 2008 at 4:41 PM
Permanent Link |

[Back to top]