A Portfolio of XGB's Web Design Projects

• Financial News & Talk: AM 1450 and AM 1510
• George Lacks: A Remembrance in Pictures
• The SPA Radio: Holiday Edition
• Liesa Walker Graphic Design and Production
• XGB Web and Software Design: Version 2.x
• The SPA: KSPA-AM 1510 and KFSD-AM 1450

• KCEO-AM 1000
• Animals Deserve Absolute Protection Today and Tomorrow
• Kung Food Express Café
• Classical KFSD-AM 1450
• XGB Web and Software Design: Version 1.0

Financial News & Talk: AM 1450 and AM 1510 (in continuous development, February 2012 to the present). Now here's an example of a website that came together under, shall we say, less-than-ideal circumstances. In late 2011 it was reported that the Astor Broadcast Group, which had hired me to put together a number of sites already, sold KCEO-AM 1000 to another radio company. The station's call letters and domain name—"KCEO" and "kceoradio.com," respectively—were included in the sale as assets. In turn, it was decided that the remaining stations in the consortium, KFSD-AM 1450 and KSPA-AM 1510, would drop their music formats and begin offering KCEO's business-talk format. The format redux was set to launch on March 1st, 2012. Yet as late as February 17th, there was still no final logo to work with, no domain name decided upon, and very little in the way of content or direction where development of a website was concerned.

With so little time in which to work, I believe the folks at the Astor Group would have been content if I had merely readied a splash page for the March 1st launch, and developed the website in the continuing weeks. Nevertheless, I wanted to test myself, and see whether I could assemble as complete a site as feasible in just 12 days. Even at that, I had only part of a logo to work with, and a very meager budget. Since the name of the station was to be "Financial News & Talk," I suggested the obvious for a domain name: financialnewsandtalk.com. The suggestion stuck.

Then came the task of laying out a typical page for the site. I estimated what the banner would look like, and made minor adjustments later. To be frank, I was not at all keen on the aesthetic direction the logo was taking: to my mind it was (and still is) too reminiscent of '80s surf radio, not a business/news/talk format. But I found the colors pleasing enough, and built the site around them: a nice azure blue, plus white, black, and numerous shades of gray. With no money and no time, it was imperative that I reuse as much existing code from other sites as possible. This produced the additional benefit of giving the site a familiar look to which users of the former KCEO and The SPA were already accustomed. In particular, the site borrows fairly heavily from KCEO's old site, and by adjusting colors, and recycling numerous elements from The SPA's website, I was able to devise something with an "Astor family" feel, yet which looks fresh nonetheless. To relieve the flat, "old-school" appearance of the logos, I made liberal use of color gradients throughout (an idea borrowed from the George Lacks website), especially at the top, where the gradual blending of black into azure complements the banner colors nicely, and adds a little drama. Even the old Kung Food Express Café website makes its influence felt, in terms of the offset banner on the right, with main navigation pushed up to the top left corner.

This is the first of my Astor Group sites to be built and validated according to the XHTML 1.0 Strict document type declaration (previous sites had used XHTML 1.0 Transitional). Other deviations include the stripping-away of all stationary sponsorships, with a single sponsor rotation embedded in the sidebar of every page of the site. The site also contains two "Listen Live" links, something we hadn't done before. The two program schedule pages (one each for AM 1450 and AM 1510) each bear their own banner, and each brings to mind the Featured Programs page of the defunct KCEO site. However, the program schedule incorporated in each page employs a signficant new wrinkle: rather than display the entire schedule on the page (which would have meant lots of scrolling up and down for the user), I chose to build the schedule in seven divisions, one for each day of the week, and make only the Monday schedule visible. Through JavaScript, the user can select other days to view from the menu bar at the top of the schedule, and also jump to the top of the page from that menu. This technique was lifted straight from the ADAPTT website, as well as the portfolio page you're viewing right now.

And yes, the site was presentable for launch on March 1st, just 12 days after I began work on it (a personal record!). Afterward I filled out the program schedule, gave some of the program badges a badly-needed freshening-up, and performed other tweaks besides. Exactly as for the several Astor Group websites that came before, this one 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.

George Lacks: A Remembrance in Pictures (created and developed June 2010 through February 2011). During the summer of 2009, around the time I was planning a thorough redesign for XGB 2.0, I was inspired by the thought of creating an adjunct to my website that would commemorate my father, George M. Lacks, in the year 2010. During that year the 100th anniversary of his birth took place on December 21st, and the 50th anniversary of his death at age 49 arrived on June 26th. Nearly a year had elapsed from the time of my inspiration to actual committing of code to webpage, and from that starting point in June 2010 it took a full eight months before the site was finished, and officially released in early February 2011. (An unofficial release had taken place at midnight GMT, December 21, 2010. However, the site was still somewhat unfinished at that time.)

Apart from having to build this commemoration around many other projects, paid and unpaid, the most difficult aspect of getting it together was to determine just what I wanted to say about my father, and how I wanted to say it—at the same time working through the emotional turmoil that I knew would result. The next most difficult task was to perform the necessary sleuthing, hypothesizing, and general filling-out of details concerning my father's rather sketchy biography. Compared to these two aspects of its creation, generating code and artwork for the site seemed almost like incidental efforts. All that said, this tribute would have been impossible had it not been for the assistance of Liesa Walker, whose website I was developing just prior to, and concurrently with, this one. I handed Liesa a package containing more an 150 photographs, some of them at least 70 years old. She scanned these photos, and without any prompting on my part, tastefully and judiciously cropped and retouched many of those scans to remove or alleviate damage to the original photos caused by spotting, scratching, creasing, buckling, delamination, emulsion-staining, edge-fading, edge irregularities, and so on. Liesa also created the logos, headers, and special typographical elements used throughout.

In thinking through thematic material, I sought to evoke a feeling of honest nostalgia for the 1940s and '50s without being a parody of that period. The idea was to capture the noir aspect of that time, as well as the grittiness and urban feeling of the press photographer's world in Los Angeles. In short, I wanted the site to look as though it had actually been created during the postwar era, if only web technology had been available back then. To this end, the color palette is largely a monochrome consisting of black, white, and several grays, with various shades of orange-red and mustard-yellow used sparingly as color accents throughout. These colors were chosen not just to emulate the wonderful world of silver-gelatin photography (hence the white borders around all the photos), but also the colors often used in packaging of photographic film during that era. As for fonts, it seemed only fitting to employ Courier for all the text blocks, since it's readily available and mimics so well the look of typewritten inscriptions generated by a journalist's portable typewriter (such as the Swiss-made Hermes Rocket typewriter that my father owned, and which I used to type all my papers in high school and college). For typographical elements such as the logo, main page links at top and bottom, and headers, I drew inspiration from the jacket art of jazz records from the 1950s. The font is called Egyptian Wide Bold, and we frequently lay it atop geometric shapes that have that oddly angular, just-off-parellel look that is typical of jazz recordings of that time. If there is any gentle departure at all from the stylistic elements that characterized 1950s graphic art, it might be the subtle color gradients from black to dark gray at the top and bottom of each page.

Just as for Liesa's website, the photo-viewing apparatus is not a third-party script, but was instead developed by yours truly, writing raw code from scratch and assimilating what I believe are the best features from the phenotypes of other image viewers I've seen. Much of the technology (and special control icons) carried over very straightforwardly from Liesa's site to mine, but with a few important revisions. First, each thumbnail strip displays ten images instead of eight, and the thumbnails are square rather than oblong. Next, rather than having the thumbnails expand slightly as the user hovers over them with the mouse, I chose to have the white border disappear, then change to red when the image is selected. This revision alone saved a lot of coding overhead, and necessitated only one thumbnail for each photo rather than two. Third, I added an extra "spyglass" button—a rightward-pointing one—that would allow users to open the full-size photo in a separate tab or window. Lastly, since I was using the Courier text font throughout, I felt no compulsion to create distinct images for every numeral in the image counter. That too simplified the code dramatically. Overall, the JavaScript code for this image viewer is considerably leaner than that created for Liesa's website. (Sorry, Liesa! Just teasing... (;-}= This is not to say that either script is superior to the other. These scripts were designed to achieve different visual effects for the end user, and Liesa's script happens to be the more expensive in terms of computer resources consumed.)

This website also marks my first deployment (though not my last) of drop-down and pop-up submenus. However, even for my first attempt I would not settle for ordinary submenus—oh, no. I wanted these menus to have background images—specifically, black-and-white photos of vintage camera equipment, flash bulbs, and the like. But I wasn't content to stop even there. I wanted a large array of such images, and I wanted the images to appear randomly on any given webpage. So I began by utilizing the very elegant and effective submenu code presented in the JavaScript Array DHTML library. To this code I added further routines that would shuffle 20 different images, and select them such that no image would appear at both the top and bottom menus of any page. For the linkage itself, I used image-replacement methods throughout. There are no fewer than 12 image slices for each of the 20 base images—hence, a total of 240 images just to implement these submenus! As a finishing flourish, I put a thin white border around each image so that it would mimic a vintage photograph; sharp-eyed observers may also have noticed that each menu image is proportioned exactly as an 8 x 10 photograph in landscape orientation.

The result of all this hard work is by far the largest, if not the most complicated site I have ever built, with more than 170 pages, including a distinct webpage for every photo enlargement (excepting those of my dad's photos posted on Google Images). And there's even music, something that in most circumstances I would never consider when building a website. But I sincerely believe that in this instance the music adds to, rather than detracting from, the presentation overall, thanks to some great jazz recordings from my own collection, and great open-source media-playing software from Premium Beat. (More about the music and its motivation can be found on this page.) Indeed, numerous features conspire to create a site that distinguishes itself from all the rest in the XGB portfolio, yet bears family resemblances to nearly all of them. As my own father, George Lacks, might have said of this website, "I think it is good. I sincerely hope you agree with me."

The SPA Radio: Holiday Edition (created and developed November 2010; lightly revised November 2011). This website had a precedent—and it wasn't very pretty. It all came about shortly after The SPA's website was put into place. Before Christmas 2007, one of my colleagues at the Astor Group, Tom Schuck, put to me the idea of placing a holiday-themed masthead image on the site. No, he went even further: he actually presented me with the image. It was a fine masthead, and I incorporated it, along with changing the site's background color to give it a more "Christmassy" feel, and to accord with the colors prevailing in Tom's masthead.

Nevertheless, I was always dissatisfied with the results. This effort didn't seem to go far enough, and to be frank, the change of colors always clashed with the palette of aquas used in the interior of the site. It seemed to me that if a holiday-themed makeover is called for, it should be more thoroughgoing, with a transformation of color and imagery throughout. At the same time I felt that this transformation should not violate the existing structure of the site. I also knew in my gut that it would be easy to implement, mostly by giving the existing markup a different stylesheet, and making only minor adjustments to the markup.

Finally, in late 2010, a concrete opportunity presented itself for me to implement this vision. Sometime prior to Thanksgiving, I was advised that the The SPA Radio's arm in the Orange County and Inland Empire was to drop its talk-radio format; that on the day after Thanksgiving, the station would air mostly "holiday standards" appropriate for Christmastime, for a full month. "Perfect!", I thought. I put to my supervisor this idea: "As long as we're changing the music thus, why don't we change the look of the website accordingly?" He said, "Go for it!" The SPA Radio: Holiday Edition is the result. Truly, it took only about two days to work up. I devised a brand-new stylesheet, made a Christmassy banner and "Favorites" icon, made minor adjustments to the markup as necessary, and swapped out a few images.

This site is not so much a different website as it is an object lesson in the virtues of separating styling from content, by using CSS—Cascading Style Sheets—together with XHTML. I like to think of it the way I think of nostalgic Christmas decorations sitting in one's closet for an entire year, until it's time to break them out, and celebrate! I hope I can break out the Christmas decorations for one or two more years at the very least.

UPDATE:  As it turns out, this website served for exactly two holiday seasons, in 2010 and 2011. It was lightly refurbished for Christmas 2011; this is the version that you see here. Like the website for The SPA presented below, this one is something of a fiction, because it has been enhanced for display purposes. In particular, there are more artists and sponsors on the home-page rotations than was ever the case at any one time when the site was actually in service.

Liesa Walker Graphic Design and Production (created and developed May through September 2010, with occasional updates). It's no exaggeration to say that, despite its modest, businesslike appearance, Liesa Walker's website is completely unlike anything I've done before, or (almost) since. To begin with, it's my first collaboration with another person in building a site. Moreover, it's my first site to incorporate an image-viewing device that I constructed myself, from scratch. However, Liesa's site possesses another attribute that distinguishes the site not just from the others I've built, but also from nearly every other website on the Internet. You see, Liesa's site contains no textual elements. No paragraphs, no headers, no text links. Everything is either a "div," or an image, or a hyperlinked image (with a lot of JavaScript function calls mixed into the works). Everything that looks like text in this site is not really text; it's an image of text.

While I've known it to be theoretically possible to make a website without text elements, I always doubted whether such sites exist in any numbers on the Web (unless they're entirely Flash-based, which many are). I certainly did not project that I would ever build one. The saga began when I drew up a proposal for Liesa, which she rejected. Over a long afternoon, she sat down at her own computer and, being a graphic artist, she drew a mockup of her preferred layout using Adobe InDesign, and sent me a PDF file of the mockup. Within a day I was able to copy the basic layout exactly, and post it to an HTML page. At that point she specified that, for fonts, she wanted to use Adobe Garamond Pro (the serif font in her header) and Century Gothic Regular throughout her site. Problem is, these are not standard fonts that are readily available in the rendering engines of browsers. (And even if the still-experimental HTML5 web-coding standard makes implementing these fonts possible, most any good web developer will tell you that creating small blocks of text on a site can be a real nightmare. For even when one is careful to fix line-heights and such, different browsers will render even the same font face somewhat differently. Thus there is no way to ensure that text blocks—particularly the smaller ones—will display uniformly across different browsers.) That's when it occurred to me that constructing a site entirely out of images would make perfect sense in this application. I asked Liesa whether she was up to the task of creating all the text elements as graphics, in addition to all the other graphic work she was to produce for her site. Happily, she was.

So over the next four-and-a-half months, we spent innumerable hours sending images back and forth, testing, fitting, tweaking and adjusting. Liesa created all the slides, including those for the Home, About, Resumé, Testimonials, and Contact pages. She also developed the cool-looking slides for her portfolio, with a nice drop-shadow effect beneath the portfolio images. From her original graphics, I cropped out all the thumbnail images for the viewing apparatus. To produce the illusion that the thumbnail enlarges itself when you roll your mouse over it, I had to create two graphics for each thumbnail image.

Proud to say too that the image-viewing apparatus is not a third-party script, but was instead developed by yours truly, writing raw code from scratch and assimilating what I believe are the best features from the phenotypes of other image-viewing apparatus (apparatuses, apparati?) I've seen. You can do a lot with this viewer: in addition to enlarging images, you can reset the slide show to the beginning, and you can jump to the top of the page to access the main links if you need to. You can access images in the slide show either by clicking on one of the thumbnail images, or by using the image counter. (And not to worry: the counter and thumbnail mechanisms communicate perfectly with one another!) Be sure to roll your mouse over each of the control icons: you'll see a tooltip that indicates what that control does. Roll your mouse over each thumbnail, and you'll see the caption of the portfolio image associated with it.

At this point you may be saying to yourself, "Certainly the counter for this apparatus can't be image-based like the rest of the site. That's just too much work!" Well, guess again. I had a text-based counter there at one point, and after a time it was clear that Liesa wasn't happy with it. She had good reason to be unhappy: the counter wasn't consistent in appearance with the rest of the site. She asked whether the counter could also be rendered in Century Gothic Regular. I balked at first, then calmly accepted that this is the only correct way to do it, the only way in keeping with Liesa's high standards, and those of XGB Web and Software Design! Difficult to achieve? In some ways, yes. But not impossible. Every number in the counter is its own distinct image, and the JavaScript was further developed to ensure that these numeric characters would be evenly and proportionally spaced as the numbers change.

Co-creating this website with Liesa was very hard work, but ultimately a rich and rewarding experience. I am pleased with the simplicity, tastefulness, and restraint with which Liesa designed all the graphic elements, and I'm especially pleased that the site reflects Liesa's artistic inclinations rather than my own. To the extent that I've rendered her vision capably and accurately, and augmented it with a few constructive suggestions of my own, the site has been a huge success from a design standpoint. And as I've attested on her Testimonials page, she is an absolute dream to work with. I would gladly work with Liesa again; in fact, I have. (See George Lacks: A Remembrance in Pictures.) I hope to collaborate with her yet again in the not-too-distant future.

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, as well as a laboratory for testing new development ideas and methods. I have built the site 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 palette of dark, nocturnal blues on which this site is based 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. For 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 (now recurring once every four images in a slideshow rotation) 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 deployed to generate the first of the four images, it was just a matter of minutes before the remaining three were also generated.

UPDATE:  After a year and a half, and development of three groundbreaking websites, it was time to turn my attention back to this one. XGB 2.1 is the result. Most of the revision consists of expanding and updating information throughout. The big news for the home page is that it now deploys JavaScript code that renders a really slick fade-in slideshow displaying XGB's portfolio of website creations. (Credit for the slideshow routines goes to the Dynamic Drive DHTML Library.) Most of the images are captioned and hyperlinked. If you roll your mouse over a portfolio image, you'll see a brief description, and a prompt to visit the website or webpage. There are currently 45 images in this rotation (not counting the recursion images described above). That means the number of possible permutations of all these images is 4 x 45! (read: "four times the factorial of 45"). That's 478,488,883,461,920,778,247,852,645,982,630,860,257,534,935,040,000,000,000 permutations! Each cycle of images takes five minutes, 48 seconds to complete; if there was some way to view every permutation without repeating any one of them, it would take you roughly 5,277,000,000,000,000,000,000,000,000,000,000,000,000, 000,000,000,000 years to view them all! How cool is that? (Okay, maybe not so cool... <:-(= )

The XGB Design website has now become a compendium of nine websites rolled into one. Six of these sites were originally created for business entities that are now defunct, and so are housed in an archive. The Programming page is now 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, XGB Design houses a website that commemorates my father. George Lacks was a photojournalist who was born 100 years ago as of December 2010. George Lacks: A Remembrance in Pictures celebrates the thousands of high-quality images captured by my father from the 1930s through the '50s. It is a testament to his legacy, rendered in pictures, words, and music.

The SPA: KSPA-AM 1510 and KFSD-AM 1450 (created and maintained August 2007 through February 2012, now defunct). 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 four 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.

UPDATE:  From the spring of 2010, The SPA has endured considerable upheaval owing to a raft of indecision about the station's format. In April 2010 the website was actually split into two separate sites, the second designed around a format of right-wing political talk radio. (Here is a sample page from that site, with a very snazzy banner that was also the work of Chris Wise of Duke Duel Designs.) This experiment proved a dismal failure (even in arch-conservative Orange County and the Inland Empire, no less), and after seven short months the Astor Group pulled the plug on all the talk. On the day after Thanksgiving, the format changed abruptly back to music—this time, to a pleasing array of "holiday standards" that were set to air through Christmas. That's when the inspiration struck me to create The SPA's "Holiday Edition" website. (A more detailed account of its creation appears above.)

In June of 2011 I did for this site as I had for KCEO, and implemented two fade-in slideshows for the home page: one for the large artist images in the center, the other for a much-belated and badly-needed sponsor rotation at lower right. The sponsor rotation comes with captions that appear when the user rolls her mouse over each image, and the images are all linked to key pages on the site, or to external websites. Three more slideshows were also used for the rotation of images on The SPA's Sports page. The software for these slideshows comes courtesy of the Dynamic Drive DHTML Library.

Just as for KCEO's website, and the now-defunct site for Classical KFSD-AM 1450 that preceded it, this site was 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).

UPDATE:  As of March 1, 2012, the website for The SPA is no longer in service. Late last year, the Astor Broadcast Group sold one of its stations, AM 1000 KCEO, forcing a format change on AM 1450 KFSD and AM 1510 KSPA to KCEO's business-talk format. Meanwhile, in late February 2012 I created a new website for this format, Financial News & Talk. The SPA's website now resides in the archives of XGB Design. This archived version is somewhat of a fiction, as it has been enhanced for display purposes. There are more artists and sponsors on the home-page rotations, and an exaggerated version of the old Announcers page has been reincorporated even though The SPA had no live announcers on its staff after 2009.

KCEO-AM 1000 (created and maintained June 2007 through February 2012, now defunct). 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. Sad to say, the staggered columns on KCEO's Featured Programs page have since been consigned to the scrap heap at the request of a local supervisor.)

UPDATE:  Until June 2011, the graphics of the Featured Programs page had also appeared randomly, one at a time at center top, whenever visitors opened KCEO's home page. The page had incorporated one of the more complicated JavaScript routines created by XGB Design: as the user moused over each link in the main menu at left, the image at center top would change to a new image that expresses in visual terms the meaning of the link being hovered over. (If users looked long enough and closely enough, they would occasionally see a bit of tongue-in-cheek there, for which I accept full responsibility without issuing apologies!) However, over time my lingering dissatisfaction with this trickery grew to real irritation. Flipping images in this way seemed cool back in 2006; but it is decidedly not cool in 2011! That's when I determined to use a pair of fade-in slideshows instead, courtesy of the Dynamic Drive DHTML Library. At the same time I junked every image that did not promote one of KCEO's shows in its lineup. The result isn't randomized, but instead presents the shows in a staggered sequence so that no show appears twice at the same time. Both sequences of images are captioned and hyperlinked: if the user rolls her mouse over each image, she'll see a prompt to visit the website of the client whose image is currently displayed.

While this revision was underway, I also determined that, after four years, many pages needed some streamlining, and lots of attention to make them validate properly. The Business Headlines page was a prime example. For years this page relied on a third-party content-generating script that I hesitated to modify even though it clearly broke many of the constraints established by the W3C. In June 2011 I took the plunge, and rewrote this code. Similarly for every other page that yielded validation errors. The result: every page in KCEO now validates for the first time in its long existence.

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.

UPDATE:  As of March 1, 2012, the website for AM 1000 KCEO is no longer in service. Late last year, the Astor Broadcast Group sold this station, forcing a format change on AM 1450 KFSD and AM 1510 KSPA to KCEO's business-talk format. Meanwhile, in late February 2012 I created a new website for this format, Financial News & Talk. KCEO's website now resides in the archives of XGB Design. DISCLAIMER:  The Featured Programs page is for display purposes only; although all of the programs therein were aired on KCEO at one time or another, this page is not to be taken as an actual program schedule at any point in the life of the station. The idea was to optimize its appearance, by combining the best-looking program badges into this display version. Likewise, the program rotations on the home page were fabricated to accord with the programs listed on the Programs page.

That said, the home page now features a random shuffling of program badges, in a scheme that's even more complex than what I've concocted for my own website—or any other. This scheme shuffles the 38 badges for the top rotation, then offsets this sequence by 19 badges for the second rotation, ensuring that no program badge appears twice in the same instant. As before, the user can jump to the website represented by a particular badge by clicking on that badge as it appears. In a few cases, where no external website is available, the user is directed to the Featured Programs page instead.

It should also be noted that the Business Headlines page no longer functions, because the news feed is no longer available. Nevertheless, the page can be validated using the links at the bottom, once the page has loaded fully (which could take several minutes).

ADAPTT: Animals Deserve Absolute Protection Today and Tomorrow (in continuous development, late 2006 to the present). 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're now well into 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.

0 marine animals
0 chickens
0 ducks
0 pigs
0 rabbits
0 turkeys
0 geese
0 sheep
0 goats
0 cows and calves
0 rodents
0 pigeons and other birds
0 buffaloes
0 dogs
0 cats
0 horses
0 donkeys and mules
0 camels and other camelids

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, revolution- aries, 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, an instance of which you see at right. (The Kill Counter reveals the numbers of animals killed by the meat, egg, and dairy industries worldwide just since you opened this Portfolio 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.

UPDATE:  During the spring of 2011, Gary's expanding reputation around the world necessitated major changes to the Comments and Video pages. That's because Gary was gaining tens of thousands of viewers with his video of a lecture at Georgia Tech in July 2010, posted on YouTube. This video, and several others, were causing the influx of comments and accolades to explode to new levels. Clearly, something had to be done to accommodate this rapid expansion. For the Comments, we decided to add a new page for each year, and break the comments down according to the month in which they are received. But we also needed an easy "upgrade path" for the main linkage at left. The answer: a flyout menu for all the comments! (Thus, ironically, a return to the "submenu" method that we abandoned around 2007—albeit much better-implemented this time around.) That way, new entries for each year could be added very easily. The flyout was styled exactly like the main menu, with gray links on a dark gray background.

At the same time, the lecture video, and the Q & A session that follows it, are also being subtitled in various languages by enthusiasts around the world. As of late March 2012, the lecture video is offered in 26 languages; the Q & A session, in 12! This development has forced major changes to The ADAPTT Video Page, which now features a main menu with three entries, and three drop-down menus to accommodate all the translations (and some miscellaneous videos besides). This page also uses the display/hide method previously incorporated in other pages on the site.

As I write this in late March 2012, 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.

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 at least five other websites that I've built for the group (including at least two variations on The SPA website), the most recent of which which I continue to develop and maintain to this day. Because work on these sites has always been 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.