bradandkathy.com

A New Look

Big changes ‘round these parts. For the first time in five years, I’ve updated the look of bradandkathy.com. And for the first time in almost ten years, I’ve changed the way I build the site.

First the design: it’s simpler, cleaner, and more streamlined. It works great with lots of text or lots of photos. And the photos can be big. Really big. Like this:

What’s especially cool, though, is that this works great even if you’re on a tiny screen. It’s what web design people call responsive. It responds to the browser and looks different in different situations, but without requiring you to go so a separate “mobile” version of the site.

On a big computer monitor, it will look like this:

…but on a smaller display, say an iPad, it will look more like this:

…and on a small screen, like a smartphone, it will look like this:

Notice how the entire navigation menu at the top has turned into a pop-up menu to save space. Nifty. It just does the right thing, no matter the screen size.

As I mentioned, though, this isn’t just a redesign. The changes go much deeper. Since I first switched to Greymatter in 2001, this site has been built with software that runs on the web server. To write a new post or add a new page, I would log into this software using a web browser, click the appropriate “new post” button, and type the new stuff into a web form. When I was done, I’d click another button and the software would do whatever it needed to do to create the new page on the server. This approach has some advantages—I could post from any browser anywhere in the world, for example—but also caused problems. The biggest one is that it’s slow. This site runs on an inexpensive shared server. This kind of server does great when it’s just serving up pages, but as soon as you ask it to do a bit more, everything slows down. The software I’ve used most recently, called Movable Type, stores everything related to the site in a database, which introduces another slowdown.

So I’ve taken a different approach with the redesigned site. This site now uses Octopress (which is built upon some other software called Jekyll). Octopress runs on my own computer at home. Individual web pages (and blog posts) are stored in a folder on my disk as simple text files (in a special format called Markdown). When I’m ready to build the site, I ask Octopress to do its magic and it wraps each page in the template I’ve chosen and creates a full version of the site on my computer. I can preview the site locally (Octopress includes a mini-web server for just this purpose), then synchronize the local version with the bradandkathy.com server. At this point, the web server doesn’t need to run any scripts or access a database; it just serves up pages and images as fast as it can. And it is fast.

In a way, this is a return to the way I built the site in the earliest days of the World Wide Web, but with a couple important differences: the tools are much better now and I no longer have to sacrifice having a rich, dynamic site just because I’ve taken this approach. Even my Soundex Converter can do its magic without having to run on the web server. Thanks to JavaScript, it can run right in the web browser (I’ve written a separate post about the changes to new, improved Soundex Converter). Similarly, though I’ve chosen not to allow comments on this site, Octopress has great support for Disqus, which allows for rich, threaded discussions without have to run any special software on my own server.

So that’s the new site. The Genealogy site still has the old look for now. The software that handles my genealogy database (TNG) has its own way of doing things, so it will take a bit more work to convert it over.

Oh, and there are some other new posts here you probably missed. See this post for more details.