Re-working my website presentation layer

Just like most designers, I rarely get time (make time) to work on my own website. This past Thanksgiving I holed up in my cave and worked on a major revision of my style sheet.

It has been a year since I last made a major effort at redesign and I have been chomping at the bit for months to do it – writing little notes to myself about what I want to do.

I find my inspiration from working on my client’s projects, and from my seemingly endless search for a job. Most of my recent job search has been conducted on LinkedIn.com, and as I go I Google terms and phrases which I don’t know or somehow hook me.

This is an inexpensive way to get an education and I’m learning quite a lot. I know way more than is indicated by my work and credentials.

One example of a “find” occurred when applying for a Presentation Layer Architect position at Avenue A | Razorfish (no they never called). Well, what is a Presentation Layer Architect?

With more Googling I figured out that a Presentation Layer Architect designs websites at the code level, and that this design structure is critical for desirable traits such incorporating flexibility, expandability, Progressive enhancement, usability, graceful degradation, search optimization, semantic design and so forth. The list of programming code that Razorfish required was massive. *I hope they call me anyway*. I want to work for a company that thinks about things like this. I want to BE a company who thinks about things like this.

I heard somewhere that the difference between Google and Microsoft is that the leadership of Google is all engineers, while the leadership of Microsoft is MBAs. I want to be a Creative that is informed. I want to know the code.

What I am doing to my code in this go-round is restructuring the CSS design to direct its energy toward standard HTML elements. In my previous CSS version, I created code that targeted classes. So the intent of this redesign is that if I isolate the HTML page from the CSS, the page will still work. It may be butt-ugly, but it will work.

Theoretically, the flip-side benefit will be that my website will be easier to expand or update or restyle. It will also be simple and user-friendly and handicapped accessible.

There are other considerations that I have in mind as I perform this redesign. Cross-browser compatibility ought also be a benefit of this redesign. Somewhere I stumbled across the phrase “browser reset” while trying to hack code for MicroSuck.

My redesign started by integrating reset style sheets from five or more sources, including the CSS of my Xeiro blog template. My resources are the Base style sheet from RichInStyle.com, the Base style sheet from nealgrosskopf.com, Base style sheet suggestions from tantek.com, and of course the Base style sheet from meyerweb.com/eric/tools/css/reset/ .

This witches-brew of reset was picked through to create my own Swiss-army knife of all things reset – my MO is to use all of the crayons. I will test it out with use and eliminate stuff later. Right now, EVERY element seems to be at least listed in my CSS.

Along my job-search way, I discovered Blueprint Google code. I added bits of their reset and implemented the Blueprint structure, which I have tested and decided to modify. Already, I have been creating bits of classes, which I modify within one tag. CSS code .ml20, .tleft, and .tinytext becomes XHTML

[Note that the p tag element is the focus of the styling].

.tinytext = font structure and color
.ml20 = margin left 20px;
tleft = text-align:left;

Cool, I think. The thing is, old printer that I am, I like to design in twelve’s [divisible by either two or three] and Blueprint’s code is 30px columns +10px margins x number of columns – last 10px – and that does not divide by both two and three – so I’m fudging the column widths and using classes like .w201 instead. Other than that I recommend it OK.

What else? I suppose that I ought to speak of intent. My website started as a portfolio of my graphic design. The portfolio will continue to persist, but it is about to drop into the background of my website.

The entire “I want a job” mentality of the website will be superseded by and new focus on content. I want to be more like ivillage.com (yes I applied there too – call me, OK?) – more like a news magazine. I want to be a PR site. a Brand.

Recruiters are always asking me “what [one single thing] do you really want to be?” I distrust that question. It is a stupid question. I want to use all of the crayons. That is my MO.

This CSS code redesign is preparing the way for integration of all that new programming stuff – Drupal, JQuery, Smarty Php MVC Frameworks, MooTools, Script.aculo.us, ajax CRUD and Google code!

Posted under Presentation Layer Design