About This Site

I built this site by hand using modern HTML5 and CSS3. It's both mobile-responsive and progressively enhanced. To the former point, I designed for phones first — by using the aesthetic and functional conventions of mobile devices, and by taking care to load only the images and scripts that limited-broadband users would need. For example, rather than loading the Soundcloud audio files directly into the page (which would've slowed the page load to a crawl), I link out to the files by default and then allow Javascript-enabled browsers to load individual files as they like. Much more efficient.

To the latter point, I made sure that the page would look at least readable to browsers viewing plain HTML, then I layered on stylesheets at five screen breakpoints (using the Modernizr library to target specific CSS functionality), then slathered on some additional (though non-essential) jQuery effects for more advanced browsers.

Achieving instant translation was an interesting test of this strategy. I wanted users to be able to translate all the content on the page with just the click of a button — a seemingly simple task. But while that would've been easy to accomplish strictly using jQuery (by storing all the translations as jQuery variables, or writing all of the translations into the HTML and selectively showing and hiding them using jQuery), that would've presented non-Javascript-enabled browsers with no translation at all and non-CSS-able browsers with a confusing mass of multilingual markup. (And in either case, it would've resulted in an unappealing tangle of function and form for me.)

The answer was to rely on PHP. When the index file is first loaded, it calls and includes a PHP file containing all of the English content (stored in variables) and then writes them to the page. When a user without Javascript clicks one of the translation flags, it reloads the page with a GET variable that calls the file containing, say, the French content. Users with Javascript go through the same process, but with the benefit of an AJAX call that fetches the appropriate translation without the woe of having to reload the page.

Questions? Comments? Let me know.