Installing WordPress was a breeze. The five-minute install worked perfectly. Of course, I first installed it on my local environment to start developing a new design and template, and to test importing content from TextPattern, the CMS that I’ve used routinely over the last two years. As it turns out, moving my existing content from TextPattern to WordPress had it’s snags, but I found some great advice, along with a better TextPattern to WordPress import script from Alex Brie.

The next challenge I faced was the way WordPress handles permalinks and category links. In short, even after following all of WPs standard advice for creating ‘pretty permalinks’, I was still left with category links that look like:


www.site.com/category/category-name/post-name/


when what I really want is


www.site.com/category-name/post-name/


The later pattern has benefits for the end user (URL recognition) and search optimization (URL keyword density). In this context, Wps literal use of /category is completely superfluous, and for me has no place in a meaningful URL pattern.

After a little research, it seems that WordPress rewrites the URL this way in order to provide total compatibility with WordPress pages, the URLs of which follow the pattern: www.site.com/page-name. This allows WP pages to have any name and never conflict with the URL of a category. Put another way, adding /category creates an absolutely unique namespace for categories.

I suspect however that many WordPress users employ WordPress pages for only a handful of common ancillary items—about, contact, etc—while using categories to manage the bulk of their content. For these users the potential for confusion and URI collision is very low: it’s an easy and obvious choice to simply eliminate /category and then to avoid creating a category with the same name as a page, i.e., don’t create a category named ‘about’ or ‘contact’.

The WordPress forum is littered with various workarounds, plugins, and hacks, but none are without negative side effects. I’m certainly not above hacking source code, but doing so now can come back to bite you when you upgrade your WordPress installation later. Besides, shouldn’t there be a way to manage it in WordPress’ permalink settings? Or if not there, then perhaps in the .htaccess mod_rewrite rules? Apparently not…at least not yet. There is an “Idea forum” thread dedicated to removal of the wp category base, and I will be following this closely.

The new site gives us a great platform for deploying our own marketing efforts and I think the process has given the entire team a renewed vigor and introspection. It’s time to become known!

So, do I have some provocative new approach to reveal? Well, no. Actually, what happened is that, while my senses were attuned to the tab pattern, I’ve noticed that most tabs tend to be very rectangular with some amount of space between each tab. I know that this configuration simplifies the web designer/developer’s work by dividing the graphical elements of each navigation item into discrete chunks that are a breeze to translate into XHTML markup and to style it with a little CSS and background images. But this limits the designers ability to create subtle layered effects; attempting any kind of visual overlap of elements would greatly increase the complexity of code required to make it so. This was just the case when I began thinking about re-designing the navigation for my own site. I had roughed-out a mock-up that used tabs—not just any tabs, but overlapping, natural-looking folder tabs with cast shadows.

Having recently witnessed my Develisys colleague, Nathan Baker successfully execute a transparent drop-shadow that slips flawlessly over a textured background…I wondered how the technique could be adapted for tabbed navigation to create more natural-looking, overlapping tabs with yummy cast shadows.

Since I have never spent much time working with PNG images, my first test was simple: use clean xhtml markup and minimal css to create the effect of overlapping buttons. Here is the result. It works in browsers that 1) handle PNG images as an element background, and 2) react correctly to the use of the :hover pseudoclass on elements other than <a>. IE is out on both counts. I know there are workarounds for both of these IE shortcomings, but I like to keep these to a minimum.

In my second attempt, I managed to move the :hover onto the <a> without much fuss. While the example isn’t that slick looking, the technique might allow for some very lovely, sublte effects. I shared the idea with Nathan, who quickly set about making it work in IE. His CSS is slightly different, but it is equally compact. One minor drawback with Nathan’s solution is that in IE6, the :hover state for an inactive button is triggered only when the mouse is over the anchor text; but, on an active button the entire area is :hover’d. Hmmm…

One of the coolest aspects of this approach is that is uses a single button image for all buttons. It also retains the time-honored tradition of using an unordered list (the ul element) to mark-up navigation. The transparency effect allows the designer to reposition—or change the overlap—for each button. My original attempt uses absolute positioning, while Nathan’s solution uses margins to handle the spacing and overlap of the buttons. Nice. We’ll keep working on it.

I found this very detailed account of the status of PNG support in general, and among browsers in particular. And here is the fix for MSIE’s incomplete PNG support.

Come to think of it, this site could use a little attention, too.

This website for Porter Education Consulting is the last of my independent web design jobs prior to starting at Develisys. Paula Porter has deep experience in education on both the admissions and the consultant sides of the equation. One of her key strengths is her ability to ‘find the right fit’ for college-bound students by matching interests, abilities, desires and the needs of the family with an appropriate institution. She is also a joy to work with and a consumate professional.

Here’s a quick and dirty, but hopefully very effective XHTML site for Casey Dixon (http://www.dixonlifecoaching.com). She recently started a business providing tutoring and life coaching for children, adolescents and adults who struggle with learning and attention problems. I knocked this site out in just a few days, under the duress of a critical marketing deadline (Casey is my wife!). Our primary goal was to get her content out there, but soon we’ll turn to adding some more significant styling.

The site I recently designed for photographer Coleman Sellers is up and running. I think the site looks great; but what I am most pleased about is the fact that the page markup is valid XHTML 1.0 (Transitional) according to the W3 Validator. This marks an important step in my effort to learn and implement better, cleaner, more accesible, standards-based web development practices.

Now seems an appropriate time to mention a few people/sites who have shaped this transformation, not just in my thinking, but of all of web design practice.

Jeffrey Zeldman, also at A List Apart

Eric Meyer

Jakob Nielsen

Shaun Inman

More to come.

Trichrome is a simple interactive diversion that I made back in 1996, when using HTML frames was still really cool (I thought). While neither a game nor a tool, Trichrome could be useful to a few, entertaining to others, and numbingly dull to the rest. This is an excercise in basic HTML. It requires only a frames-capable browser and a delight in color. There are at least 17,550 possible variations. Instructions should not be necessary.

Special Note, 02/10/05—Color frames are adjustable! Click and drag the frame border between colors in order to change the amount (relative surface area) of color. Thanks to Douglas Campbell for indicating to me that this is a cool feature that is not at all obvious.

Start Trichrome

Things are beginning to shape up. The index template + style sheet actually create more-or-less what I am expecting. I am again drawn to the idea of all black type with few embellishments or extraneous color. How many web pages today look like that? It does provide a clean canvas onto which photos and other graphics can really shine.

And I call myself a “designer”?