PhotoDude.com

Wed. Mar 10, 2004

Web Pimpin'

Web Pimpin’ – Much of my time lately has been spent working on a redesign of a client’s site, and now it’s live: Garcia Studio.

I mention it here for a couple of reasons. One, Google loves me (...this I know, for their index tells me so, lots of links to them belong, we are weak but they are strong…), and therefore, loves the things I link (or, at least, indexes them quickly). So, if you need still life or advertising photography or food photography in the Atlanta, Georgia area, Carlos Garcia can help you out.

No extra charge, Carlos (Note, the target audience isn’t expected to be using dialup access, so be forewarned if you visit via modem).

The other reason I mention it is that this is a somewhat unique project for me, given the work I usually do. I’m often the guy brought in to convert an existing design to pixels and electrons so it will render on the web. It’s a collaborative process, and by the time I get involved, there are usually all kinds of restrictions in place. Or I get a PDF template and I make it work. I end up functioning as a Mechanic of HTML Compromise. Though I’m very happy to do that kind of work, I rarely get to define the standards.

In this case, I did. And it is valid XHTML and CSS (well, other than that dang Flash movie). Geekish details follow.

I helped Carlos Garcia get on the web in the summer of 2000. In fact, I recall he sent a new potential client to look at the nearly complete draft version, and made a booking that nearly paid for the cost of the site. In other words, he’s seen the clear payoff of having an online portfolio, from Day One.

We’ve added a few clusters of new images to ”freshen it up” over time. But after four years, it was not only time for a new look and new images, Carlos had recently paid a designer to redo his company’s ”branding.” With a new logo, new materials and textures, and a new portfolio presentation, it was time to redesign his web site to be consistent with this branding.

Of course, this new branding was all print oriented materials; nice logo stickers, paper textures, background patterns, and portfolio materials. But in our first ”meeting,” Carlos gave them to me, along with a CD of about half the images, and a list of a dozen or so photographer’s sites that had caught his eye for one reason or another. And he gave me some of the vague verbal directions you get when you’re talking about visual concepts: ”I want it to look more … design-y, but elegant, with textures, and layers, and … you know” (I can say this about Carlos only because he gets exactly the same thing from his clients … ”make it exciting, but refined, and tasteful, but it’s got to be hard sell … and be sure to use plenty of light!”).

So this wasn’t one of those micro-estimated focus-grouped project-managed approaches you read about elsewhere on the web. This was two guys who’ve known each other (and worked together, off and on) for seventeen years, talking as much about … mutual gripes … as web development.

But when we focused, we mainly talked about his target audience, as that would define my approach as much as anything. Carlos doesn’t do ”retail” photography; no weddings, no passport photos, no children’s portraits. He does high end work primarily for advertising agencies, graphic designers and design firms, and some direct work for mid-size to large corporations.

Based on both logic and his observations of his clients over the years, we came to some loose ”design guidelines.” We decided that this group most likely would not be accessing the site over a dialup modem (agencies, design firms, and corporations mean broadband in some form). They would be using computers less than three years old, and thus would have a version 5.0 browser or better. And in the case of art directors and designers, they would most likely be using a Mac to view the site.

Given these parameters, I went for an XHTML/CSS approach, with a lessened fear of ”interface bloat.” Primarily, this meant I could try using larger background textures, and they would have to be larger to accommodate the expected larger viewing resolutions in the target audience. Now, I’m a guy known to commit graphic excess, but when a page’s total content and graphics exceeds 100kb, I begin to get antsy. My first draft had 200kb of interface elements, before you loaded the first thumbnail. Gulp (it’s now 170kb, all loaded on the home page and cached thereafter). But after a half dozen drafts, and a consult or two from the ”branding designer,” we worked out a design that we could use as a starting point.

We then established a ”baseline” for image presentation. Since we were going to give preference to the rendering on a Mac, we had to deal with the differences in gamma between platforms. An image that looks good on a PC will usually render as too light and washed out on a Mac. If it looks right on the Mac, it will be too dark and muddy on a PC. We had to find a compromise that leaned towards the Mac gamma, but was still acceptable on a PC.

To complicate things (and thus the need for a preset workflow), these images were scanned or shot and then processed with an AdobeRGB color profile on a Mac. He burned those to a CD, and I had to open a ”test suite” of them on my PC, convert them the sRGB (the color profile used by browsers), shift them part of the way back to Mac gamma, and output it as a resized JPG with no color profile at all (browsers currently don’t recongnize them). Luckily, Carlos has a nice PC sitting next to a nice Mac in his office, all connected to DSL, so he could check my efforts. It took some back and forth, but once we’d found that compromise with the test group, I was able to save the corrections as a layer set in Photoshop, and apply it consistently across all 54 images he gave me.

While it might not look like there’s much to a photographer’s site other than a bunch of pages with thumbnails and enlargements, that’s actually part of the problem. Search engines, particularly Google, look at a page of thumbnails (even with proper alt text) and rapidly move along … because there’s so little text to index. Since I went with a full CSS presentation, I decided to see if I could address this in some way.

The truth is, unless your photo is part of an editorial essay, there really is little text to associate with the image (it’s supposed to speak for itself). But I figured there was some bare minimum text info I could put on each page, that would be highly prominent to a search engine robot indexing the site, but invisible to any post-2001 browser. If you go to one of the enlargement pages, and ”View Source” (or disable CSS), you’ll see there’s four header tags on each page. They don’t contain much, just basic information, and if it’s available, the client name for the image. But they give the search engines something to index, yet are rendered invisible to 5.0 or greater browsers by using the {display:none;} property on the header tags.

With all my Template.dwt ducks in a row, I built out the site, leaving one last step (well, two, we still haven’t updated the content of the About page). The Flash movie for the home page. I save it for last because it kills brain cells. Really. It will lower your IQ, especially when exposed for prolonged hours. Which is the only way to make a Flash movie. I figure I lost at least 50 SAT points on this one. How am I supposed to bill for that?

But after one final hour of frustration searching for and cobbling together a simple script to preload a portion of the movie (geez, Flash MX sure complicates the hell out of what Flash 4 merely made maddening difficult), it was all done. And now launched (subject to my incessant tweaking, especially on the Flash movie).

Other than the home page that dang brain-addling Flash movie, it validates as XHTML 1.0 (Transitional), with a side serving of valid CSS. Tested on the PC in Netscape 4.x (no CSS is served, but content is cleanly rendered), Mozilla 1.x, and IE 5.0 (navigation links render with no padding or border, but otherwise solid), IE 5.5, and IE 6.0, and on the Mac in IE 5.2 and Safari.

And now if you’ll excuse me, I have an small celebratory appointment with Samuel Adams.