A Portfolio of XGB's Web Design Projects

Here's a rundown of the websites created by XGB Web and Software Design since its inception in the spring of 2006. The entries are arranged roughly in descending chronological order. You can access each website either by clicking on its name, or on its associated image.

XGB Web and Software Design (in continuous development, August 2009 to the present). After more than three years of dithering and procrastination, XGB 2.0—the second avatar of XGB Web and Software Design—has finally arrived. Because this is my own website, I have intended it to be a very personal statement revolving around three general objectives: (1) To test the limits imposed by the XHTML 1.0 Strict DTD (Document Type Declaration); (2) To demonstrate what sorts of things are possible when the person responsible for dynamic page-processing is the same person as the one designing and building the website; (3) To break a few rules along the way—rules that are unquestioningly accepted as canonical by too many designers and consumers of the World Wide Web.

The raw materials of this website—the masthead image, and the palette of dark, nocturnal blues built around it—were actually lifted from a prototype of another XGB website, the design of which had been rejected by its clients. Yes, had things worked out differently, these underpinnings could have comprised the basis of The SPA's website. On that occasion I had aimed for a swanky, nocturnal mood appropriate for a resort or casino, presumably where much gambling takes place. Some folks at the Astor Group commented that while they liked the proposal, they felt it was "too dark." (Thus violating one of the "canons" of Web design: Never choose a dark color theme, especially when setting text against a dark background.) But I was personally rather stirred by the proposal, and not being one to let good materials go to waste, I was determined to incorporate them in some other project down the road, most likely my own.

Apart from the dark color palette, the design of this site is, in most respects, straightforward and utterly conventional. All the trickery occurs in the home page, where it can be displayed to greatest advantage. To begin with, I arranged for the home page to exhibit one of four different visual "themes," with the theme selected at random as the page is being loaded. Each theme is constructed around its own secondary navigation schema placed at the far right of the home page. Each navigation schema makes extensive use of image maps. (In fact, of all the sites XGB has created thus far, this one represents my first extended foray into the image-mapping technique of navigation.) However, there are twists in the procedure. First, the images being replaced are the same as the images that are mapped. Second, I figured that if the maps did not exploit the possibilities of translating, reflecting, and rotating images, then what's the use? Hence, a couple of these navigation schemas are quite radical. The rainbow-hued schema utilizes the <area shape="polygon" /> tag and attribute to create "hot regions" set at an angle that is neither horizontal nor vertical. Another schema displays link names that are written backwards, all of which are reflected about a vertical axis when the user hovers over any of the links. (If this schema arouses irritation in some users, then I will only comment that while I understand their irritation, I won't apologize for it! The goal here is to explore relatively uncharted uses of techniques that are otherwise considered to be conventional, and to determine what novelties may result.)

The large image at center-left of the home page illustrates a seemingly eternal recursion of images, in keeping with the recursive nature of the acronym XGB. (See the page About XGB Design for an explanation.) As to how this recursion was developed I won't say very much, although clearly it's not entirely a trade secret. It suffices to say that each of the four recursive images was created by employing algorithmic thinking and processing. Concocting a procedure for developing the recursions was much like concocting an algorithm for use in a computer program and, it is hoped, demonstrates what can be done when a computer programmer develops a website. Once the algorithm was in place, and used to generate the first of the four images, it was just a matter of minutes before the remaining three were also generated.

XGB Design's new website is intended to become a compendium of about six websites rolled into one. The site you see here also contains an archive that houses (at present) three other websites, two of which were originally created for businesses that are now defunct. The Programming page will become a portal to yet another website with its own look and feel. That site will eventually contain many tutorials and "white papers" describing in detail some computer programming projects taken on by XGB Design, along with source code listings for each project. The first of these projects was completed in November 2009; it's a seven-part tutorial demonstrating creation of a C++ program that implements a simple but powerful command-line calculator. (You can also access the project by clicking on the image just above.) Lastly, the page labeled George Lacks will be another portal to a website that commemorates my father. George Lacks was a photojournalist who will have been born 100 years ago in December 2010. This website will be a remembrance of him in terms of the photographs he took; look for completion of this site on or before June 26, 2010, which happens to mark the 50th anniversary of his death.

The SPA: KSPA-AM 1510 and KFSD-AM 1450 (in continuous development, August 2007 to the present). Barely a month after the KCEO website was completed, XGB Web and Software Design was once again commissioned by the Astor Broadcast Group to create a site for two more stations in its consortium, AM 1510 KSPA and AM 1450 KFSD. Both stations operate under the moniker "The SPA," and broadcast the same music format (albeit in different portions of Southern California) consisting of "adult contemporary" standards from the Great American Songbook, performed by a mixture of classic and contemporary performers. Accordingly, the challenge seemed clear enough: Create a site bearing an obvious "family resemblance" to the newly minted KCEO site so as to mark it as an Astor Group website. Yet give to the site its own distinctive style, embodying perhaps a more relaxed, more casual and pretty face to complement the businesslike demeanor of its slightly older sibling.

Meeting the first challenge proved to be much easier than meeting the second; it was just a natural consequence of producing another of XGB's designs. To be frank, the second was considerably more difficult since many people in the Astor group weighed in with their own ideas as to the look of the finished product. It took a lot of prototyping, and much haggling back and forth, before we could settle on a layout, a color palette, and set of themes that were agreeable to all concerned, myself included. Ultimately, the layout of the home page owes to the conception of my colleague and good friend, Rick Roome, who had built the previous sites for KSPA and KCEO. He envisaged a large "TV screen" placed front-and-center to display a rotation of images depicting the major recording stars in The SPA's programming lineup. Around this large screen would be arrayed a number of image links to syndicated programs and various commercial sponsors of the station. Yours truly devised the color palette consisting of a range of aquas and subtle shades of blue to evoke the feeling of water, while another colleague, Chris Wise of Duke Duel Designs, created the deceptively simple yet very elegant masthead that looks like an abstraction of tiling in a swimming pool or spa.

From the very beginning, The SPA's website has relied on a democratically delegated assemblage of imagery created mostly by me, Rick, and Chris, but also by one or two other employees who are handy with image-manipulating software. Somehow it all hangs together surprisingly well (which was at one time contrary to my own expectations), and after more than two years the look never seems to get old. One typical XGB touch is the use of JavaScript to select an array of musicians' images at random from a stock of around 30 such images; assign an image to each of the links arrayed horizontally at the top of the home page; and display each image as the user hovers over the link associated with it. A similar rotation of smaller images representing a handful of commercial sponsors appears on the lower right of the home page. In October 2009 another JavaScript routine was incorporated in The SPA's Sports page. This one implements a pseudo-random progression of images that changes every five seconds. The routine ensures that no team appears more than once in any series of images, and that no image appears twice in successive series.

Just as for KCEO's website, and the now-defunct site for Classical KFSD-AM 1450 that preceded it, this site is maintained and updated regularly, sometimes at a rate of several times per week. All the advantages accruing to those sites apply equally to this one (please see the site descriptions below).

AM 1000 KCEO (in continuous development, June 2007 to the present). When I began work on this website, the KCEO logo was already in place, the cornerstone of a minimal two-page site consisting of a home page and a page displaying business headlines from the New York Times. Until that time the site had been used primarily as a vehicle for KCEO's streaming signal online. The task before XGB Design was to make the site more complete, and to freshen up its appearance. To that end, four new pages were created: an About page, a Featured Programs page, a Community Calendar page, and a Contact page. (A fifth page, showing the KCEO StudioCam, was added much later.) Every page on the new site was either a brand-new draft or a thoroughgoing revision of an existing draft.

On the aesthetic side, I aimed for a look that is crisp and clean, one that conveys a no-nonsense attitude appropriate for business. I won't lie: I opted for a color palette of pale gray-greens to emulate the appearance of money—but also to lend a slight suggestion of business cards set on top of a pale green matte, such as one might find on the desk of a CEO or CFO. I would characterize the look of this site as "handsome" but not "pretty." On the other hand, the most eye-catching page may be the Featured Programs page, because so much colorful graphic input from so many sources makes a splash across the entire page. Each image serves as a "business card" linking to the site in question, and supplements the literal link beneath it. It was also hoped that staggering the left- and right-hand columns would add visual appeal to the page, making it more interesting than simply arraying the entries in a two-by-whatever matrix. (The theme of staggered columns also made its way to the Jazz At The SPA page of KSPA's website several months later.)

The graphics of the Featured Programs page also appear randomly, one at a time at center top, whenever visitors open KCEO's home page. This page incorporates one of the more complicated JavaScript routines created by XGB Design: as the user mouses over each link in the main menu at left, the image at center top changes to a new image that expresses in visual terms the meaning of the link being hovered over. (If you look long enough and closely enough, you might occasionally see a bit of tongue-in-cheek there, for which I accept full responsibility without issuing apologies!) The KCEO website undergoes continual updating every week, sometimes several times per week. Having it all done in-house, as well as the ease of use made possible by fully exploiting XHTML and CSS technologies, ensure that the Astor Broadcast Group enjoys rapid turnaround that may not have been possible otherwise.

ADAPTT: Animals Deserve Absolute Protection Today and Tomorrow (in continuous development, late 2006 through May 2010). Of all the websites in which XGB Design has had a hand, this one distinguishes itself because (1) it has caused me more grief and trepidation than any other; (2) I have invested more hours in it than any other; (3) I have received less financial remuneration for it than any other (the specific amount: absolute zero); (4) this may be the site of which I am most proud.

My friend Gary Yourofsky, who is founder of ADAPTT, fairly pleaded with me to take on maintenance of his new website after its original developers had orphaned it, and practically left it for dead. Our initial objective was for me to simply update the site with new content as necessary. However, as I was still rather new to web design by late 2006, just the prospect of messing around with someone else's work—even if only to the extent of updating content—filled me with terror.

Fortunately, the original developers had given the site a great look, with excellent graphic work especially. Contrariwise, as I probed deeper and deeper into their work, it became clear that the site was extremely hobbled and broken. The major problems had to do almost exclusively with navigation: missing and broken links; image-mapped links that either did not work, or which did not map precisely onto their designated images; and a lot of unfinished business consisting of links that worked, but were unstyled. Hence, a lot of blue and purple links with underscores. (Really, people, as we enter the second decade of this new millennium, have we not yet moved past the blue and purple, the visited/unvisited distinction, and the underscores?) When it was passed on to me, the site did contain a nice JavaScript rubric that implements multiple essays on a single page. As the user selected an essay from a menu, the script would display that essay while hiding all the others. Nevertheless, the underlying code was excessively large and repetitive, and was screaming to be rewritten. The biggest obstacle by far, however, concerned the main menu on the left-hand side of each page. The menu had been cobbled together with CSS to display submenus. Ironically, it worked well enough in "alternative" browsers such as Firefox, but blew up almost completely in Internet Explorer.

Because that menu was rather unattractive compared to the rest of the site, I saw no sense in trying to fix it. So I went for simplicity: instead of using submenus, I decided to color-code the menu entries by category. The red/gray/green main menu is the result. This was one of my first orders of business, right after adding new content and fixing broken links. After that came the matter of styling links to better accord with the visual themes of the site. For the main text areas I chose various shades of turquoise for the link, visited, and active states, and a shade of red for the hover state; these choices mimic the colors of the headlines and the red to be found in the banner. For the All About Veganism and Other Animal Rights Issues pages, I designed a light gray background against which to set very dark-gray links that would turn to red, with underscores, in the hover state.

As I implemented these developments, I pretty much stuck with the code that was passed on to me. However, at some point I was determined to tear it all down and start afresh, with new, leaner, better-organized code. So I carefully rewrote all twenty-odd pages from scratch. With this new, leaner, more readable code in place, I proceeded to incorporate new features at a rapid clip. One was to enhance the Quote of the Day feature at the left of each page. Originally this would display only one quote (the one from Dante Alighieri) that had been hard-coded into the home page. I created a stock of over 70 quotations of animal-rights figures, revolutionaries, and other free-thinking persons whom Gary favors strongly, then wrote a JavaScript routine that selects a quotation at random and displays it on the page that's being opened. The multiple-essay format of the Veganism and Animal Rights pages was carried over for use in all the pages containing student and professor comments, and was also subsequently used in compiling the more than 100 news articles about Gary that were published over the years. In September 2008 I revised and incorporated a script that generates an Animal Kill Counter, which is shown on the lower right of the home page and on its own page, linked from the home page. As recently as November 2009 the site underwent another thoroughgoing review, after which further systemic improvements were put into place—chiefly to correct numerous tiny misalignments of page elements (on the home page especially), make the banner and home-page links more "lively," and to reorganize and streamline both the CSS and JavaScript code throughout.

As I write this in early summer 2010, the ADAPTT site has had its content expanded severalfold and undergone innumerable improvements. Having poured so much of myself into this site, I continue to be most proud of the fact that I have not accepted even one dime in compensation. If I have helped to alleviate the imprisonment, the enslavement, the needless suffering and death of just a few animals, that is compensation enough for me. I have joked with Gary that taking on this website was like finding an old Porsche in someone's barn, with a few scuffs in the paint, some broken windows—and an engine, transmission, and chassis that needed a complete overhaul. "Now the site not only looks like a Porsche; it runs like a Porsche," I would tell Gary. After which he retorted, publicly to his friends, "Gordon is the Porsche of web designers!" It's difficult to think of any higher compliment with which I could be paid.

Update: As of late May 2010 I am no longer contributing to this website, due to certain irreconcilable philosophical differences between Gary and myself over some claims he's made therein. However, I continue to be proud of the work I've done to elevate his site to a high level technically, and I always wish him well in his endeavors as an educator about animal rights. He's simply the best there is, bar none.

Kung Food Express Café (created July and August 2006, now defunct). Hot on the heels of the Classical KFSD project came this one. I was hired by an acquaintance to develop this website for Kung Food Express Café because while their existing site would render well enough on Microsoft's Internet Explorer, it just fell to pieces whenever viewers tried to pull it up on "alternative" browsers such as Firefox. (And why was that the case? Because the site was created with Microsoft Office®.) This inability to render well in Firefox was a legitimate concern for the restaurant, because many of its patrons were youthful, countercultural types who revel in using alternative Web browsers such as Firefox and Opera.

Apart from the severe technical hurdle to be overcome, the original site had a style that might be characterized as charming but funky, and leaning heavily on design elements that were clearly inspired by the Rastafari movement. (Not that that's a bad thing in itself; it's just that the site seemed too highly skewed in that direction to entice a broader range of potential customers who might otherwise be afraid to set foot in a vegetarian restaurant.) In any case I couldn't see trying to retain the look of this site, and when I inspected the source code, and found it to be easily ten times larger than it needs to be, I prevailed upon the restaurant manager to accept a near-total redesign, from scratch—one that would be standards-compliant, and render well on a variety of browsers.

Despite being a brand-new site on the inside, the redesign actually maintains the layout of the original almost exactly, right down to the yummy lasagna image placed front-and-center on the home page. But now the white background of the original becomes awash in an array of vivid greens, with a mustard-yellow and radish-y reds added for contrast. I also aimed to retain the feeling of casual whimsy inspired by the company's anthropomorphic-turnip logo. In spite of the vivid color scheme, the site as a whole actually presents a more conservative, more well-crafted face than the original had. Best of all, it does render well on a variety of browsers without coming completely unglued. Can't say the same for the restaurant, alas; sadly, Kung Food Express Café folded before its time, some 16 months after it opened. The Kung Food site now resides in its own archive at XGB Design, where it occupies a place of distinction since to my mind it represents a true coming-of-age professionally.

Classical KFSD-AM 1450 (created and developed June 2006 through January 2007, now defunct). Before I took on this project, another company had been commissioned by the Astor Broadcast Group to build a website for Classical KFSD-AM, where I worked as an announcer. But the company in question had imposed long delays, usually for several weeks at a time, before producing home-page drafts that all of us at the Astor group deemed unsatisfactory. That's when I foolishly suggested to my colleagues: "Let me take a stab at it, then." This website is the result, and thus XGB Web and Software Design got its professional start.

I chose a very simple layout for this site—so simple that in retrospect it appears a bit naïve from an aesthetic standpoint, but nonetheless well-balanced and effective. (Its design owes much to After Dark Grafx, which created the beautiful header and footer images, and the lovely "French horn" image.) For a first professional effort, the Classical KFSD site does incorporate some pretty cool features. To begin with, it contains not just nine pages but 55 of them, because it also contains an archive where I housed a webpage for each of the Listener Request Friday programs that I had aired from March 10, 2006 through January 26, 2007 (the week before Classical KFSD-AM became The SPA). Because there were so many program pages to be accessed, I built into the Requests page a scrollable menu, and styled it with CSS to accord with the rest of the design. To cope with the European alphabets necessitated by the names of many composers, performers, orchestras, conductors, and compositions, the Listener Request Friday Archive makes extensive use of the Unicode character set, a computing industry standard about which many so-called "webmasters"—particularly the stateside ones—seem utterly ignorant.

Even though the Classical KFSD-AM website is defunct, and now resides in its own archive at XGB Design, the Astor Group's trust in my ability to create a website for them proved to be one of the most cost-effective decisions they ever made. This site laid the foundation for two other websites that I've built for the group, and which I continue to develop and maintain to this day. Because work on the KCEO and KSPA sites is all done in-house, and because I've used XHTML and CSS technologies from the very beginning, the Astor group enjoys extremely rapid turnaround that would have been just about impossible had maintenance of these sites been entrusted to some outside company.

XGB Web and Software Design: The "Legacy" Edition (created April and May 2006). Ah well, one has to begin somewhere! This is the two-page website alluded to in the About XGB Design page of this new site. The "About" page from XGB 1.0 was actually pretty decent for a beginner's effort; the home page, well... not so much. It may be of interest that the styling theme for the site was called "German Sports Car." (If any stylesheet is given a name, you can view that name by selecting View >> Page Style >> from the main menu of the Firefox browser.) That's because the dark, metallic grays, the earthy red, and intense white were inspired by the exterior, interior, and headlamps of a certain very desirable German sports car, the make of which I won't divulge here.