Having worked with a lot of front-end developers I can confirm that almost all of them would benefit from this book since most still

• use floats for layout as opposed to position absolute (which is easily misunderstood because it’s positioning relative to the containing block)
• few seem to regularly run their XHTML through a validator (a pet peeve of mine)
• and even fewer seem to know to employ the concept of a CSS reset

It’s hard to convey all of the great stuff in this book but I can almost guarantee that if you work with CSS this book will open your eyes to a better way of doing things.

State landing page (now called Research and Compare)

The school profile overview page:

The city page:

To address this I wrote a simple javascript solution. Here’s how it works:

1. I put my deferredcontent.js code that I wrote in the head tag
<script type=”text/javascript” src=”/js/deferredcontent.js”></script>
2. I added an onload=”relocateDeferredContent();” to the body tag
3. I put an empty div tag where I ultimately wanted the content to end up. E.g <div id=”adleaderboard”></div>
4. I put the deferred content in a display:none div just before the closing body tag at the very end of the page and put each block of code I wanted to relocate in a div with an id of defer-IDFROMSTEP3

<div style=”display:none”>
<div id=”defer-adleaderboard”>
[Ad code goes here]
</div>
</div>

If you want to see it in action you can see it on this San Francisco schools page.

CSS offers us a lot of power to style and decorate our pages with images, however, replacing text with an image is one gap not well addressed by CSS such that you often see sites doing:

<a href=”/”><img alt=”Home” src=”home.gif”/></a>

which is obviously bad for 2 reasons:

1. It violates the separation of content and design by including a design element in your HTML
2. Your SEO will suffer because image alt tags don’t carry as much weight as real text

As a result a number of people have come up with clever image replacement techniques in CSS. It began in 2003 with the Fahrner Image Replacement technique (or Classic FIR), however, the technique I currently favor is the Mike Rundle’s Phark revised method which:

1. Works well cross browser (but be sure to test in IE 5 for possible issues if you’re still supporting it)
2. Works with a screen reader such as JAWS for accessibility
3. Works well for SEO (many techniques style the text with display:none which likely won’t work with the next generation of crawlers such as Google’s new Mozilla based crawler)

Taking the example above, the correct approach would be as follows:

<a id=”home” href=”/”>Home</a>

Then apply the Phark revised method via CSS:

#home {
  display: block;
  text-indent: -9000px;
  background: url(/images/home.gif) no-repeat;
  height: 25px;
  width: 100px;
}

Here’s the result:

About Us

Now we’ve replaced the text with an image yet still kept the separation of content and design clean. I stated that it’s bad design to use image tags in your HTML but I’d like to qualify that, it’s fine if your “content” is an image such as a product photograph in a web catalog, a graph, or a headshot in your user profile. Also I think it’s fine to bail on image replacement if you start wasting a lot of time in CSS layout land, it’s just good to start with the clean text based approach first and use it until it becomes impractical.

I’ve tested extensively in modern browsers across platforms and haven’t found a single browser that doesn’t translate the entity references properly. I suspect most of these are actually email harvesting crawlers just taking the value of the HREF and throwing it into a GET request without properly translating entity references.

I think we may have found one more way to identify crawlers masquerading behind real looking user agents!

1. Convert an href into a modal window just by setting its class=”submodal”. Now you can do
   &lt;a href="foo.html" class="submodal"&gt;foo&lt;/a&gt;

   and when you click the link the contents will show up in a modal window. Previously submodal required specifying onclick functions and duplicating the target URL.

2. You no longer need to put special div containers in each individual page, subModal.js now adds them to the DOM for you.
3. I fixed a bug in Opera where one of the subModal functions that gets triggered on page load was called infintely.
4. Moved all the javascript into subModal.js and removed common.js
5. Safari active scrollbar fix suggested by Thomas Risberg in a comment on this post.

Here is the file with my changes: subModal.zip.

I’m hiring a front-end web developer (contract or FTE) for either on-site or remote work. This is not a web designer or graphics designer job but rather a technical front-end developer, someone with crazy XHTML/CSS/Javascript skills that can work in our JSPX environment. If you or someone you know fits the bill and is looking, leave a link to their portfolio site as a comment here or drop an email to the address in the job posting. GreatSchools is a great place to work and we get a ton of traffic so your work will be seen by several million people per month!

Here’s a tip if you’re considering applying, the first thing I’ll do is go to your portfolio website and do a view source. Save us both time and only apply if your portfolio website W3C validates XHTML and shows proper usage and understanding of CSS. While I’ll eventually look at the work you did for other companies, I generally take it for granted that you did your portfolio site by yourself so it weighs more heavily than anything else! Having a blog is also a good thing, it’ll show me that you have enough enthusiasm for the work you do to take the initiative to write about it!

Of the 40 or so portfolio websites I’ve visited today, only 1 person’s validated and demonstrated proper usage of XHTML and CSS. Please, is the bar really that low? Disprove my pessimism and leave a link to your kick-ass validating XHTML portfolio site (or a friends) as a comment here, even if you’re not looking I’d like to see some better examples than I’ve seen today!

Related reading: Applying for a job HOWTO