FletcherMartin.com: The tech overview

As I mentioned in a prior post, my employer launched two new self-promotional sites: OurIndustryIsBroken.com and a redesigned FletcherMartin.com.

I developed the CSS, HTML and JavaScript for FletcherMartin.com, along with the PHP script that powers our contact and recruiting forms. (My only role in OurIndustryIsBroken.com was suggesting that lovely cream-colored background.)

None of the code is particularly fancy, but I think some of it is clever.

Navigation

For the navigation, I’m using a technique that’s very similar to the Navigation Matrix as executed by Veerle. But instead of one large image, each link is a separate image.

The advantage of this technique is that text links are still available to text-based browsers, screen readers and search engines. But they retain the visual appeal of images for links. Bonus: lighter HTML.

That lower half of the image also serves as the current section indicator.

One header. Many pages, each with its own `id`

Although the site has 10 sections, there is only one header file. The header file has variables for the document title and page identifier. Those variables are defined within each page, before the header file is called.

I used the identifier variable in the body tag (i.e. <body id="<?=$page;?>">), and to indicate which section is the active section. Using an id for each <body> tag made it easier to create page-specific styles — such as setting a new header image for each page.

I also used the body identifier variable in the form validator JavaScript function PHP script. The value of $page (which also becomes the value of document.body.id) determines which form fields are required, and which queue receives the form results.

Images and CSS

Every image aside from the logo is a background image. Since the header images are purely design elements, I made them a part of the site’s CSS rather than include them inline.