Programming

As you may know, the next version of concrete5 features a stripped-down interface for adding and editing content, labelled "Composer", which we hope will address some concerns about in-context editing and blogging. I wanted to put this feature really through its paces, which meant adding it to my own site. This meant an in-progress upgrade, with all the headaches and concerns that come with it. Before long I wasn't just updating concrete5, I wanted to do some visual cleanup. And then I decided to chuck the whole thing.

New Design

At first, I was simply going to update my layout so that, rather than being faux-grid-based, I was actually using something like the 960 grid system to layout content. This by itself made a pretty difference, but my entire layout was essentially one column – and this wasn't working for me. So I felt a redesign was in order. After looking around for some decent blog templates and contemplating a porting of a Wordpress template, I instead decided to go my own way. I got together a rough version of what you see here in the 960 grid system, and put it through its paces

All that Content, Alone in the Middle

I didn't like what I saw. See, the wonderful people at Dreamhost gave me this nice, 17-inch MacBook Pro, and my site looked silly sitting in 960 pixels in the middle of a massive browser window. No, I seldom browse with a maximized browser window, but it still typically fills a good portion of the screen, and my site looked alone and sad in the middle of it. I thought back to the days of liquid layouts, and wondered why nobody had adapted a grid system to scale to the size of a browser window.

Turns out they had. The Fluid 960 Grid System was what I needed, and has been great to work with. I went with the 16-column option, as 24 columns seemed a bit excessive. It is fluid, though, so perhaps in a couple years that statement will seem as antiquated as "640KB of RAM should be enough for anybody."

Fluid Font Sizes

As a web professional for many years, I know firsthand that you have to keep your approaches and knowledge up to date, even though that means periods of painful retraining. I took this period of personal website redesign to revisit the best practices on font sizes, with interesting and useful results. I must confess: I have been a staunch user of fixed-pixel CSS for years, and have never really understood the purpose before the "em" unit. Whew, it feels good to get that off my chest. However, after reading this article on fluid grids, I'm a believer. See, "em" means that the browser can control the font size, and I can set one base font size on my website. That's what I've done, with this code:

body {font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #333;}

Everything else is just set with em units, making scaling font sizes a snap. Padding and margin works this way as well, and I've found that this site has been a lot less challenging to skin, in terms of making proper, aesthetically pleasing padding, line-height and margin decisions.

As I implemented this, I thought, "Wouldn't it be cool if the base font size increased as browser window size increased?" I assumed that this font scaling would be the next obvious step, but actually I haven't really read of too many people doing this. Odd, though, because it doesn't seem that hard. So I decided to do it. Thankfully, jQuery makes almost anything in JavaScript trivial. Here's my font scaling code, with some unrelated menu JavaScript trimmed:

$(function() {
    $(window).resize(function() {
        checkDimensions();
    });
    checkDimensions();
});

checkDimensions = function() {
    var win = $(window).width();
    if (win > 1600) {
        $('body').css('font-size', '20px');
    } else if (win > 1280) {
        $('body').css('font-size', '18px');
    } else {
        $('body').css('font-size', '16px');
    }
    $('body').show();
}

Not hard. Not hard at all.

Fluid Image Sizes

Alistapart.com has proven invaluable during this redesign, just as it was nine years ago when I first set out to make a CSS-only website. While searching for the perfect, future-proof fluid website approach, another article came to my aid, this one on fluid images. Turns out that browsers do a pretty good job of scaling images this days, and they can intelligently scale them up to their max width, with just one line of CSS:

img.fluid {max-width: 100%; }

Guess what's going in a concrete5 custom image template?

No more Mobile Theme

So, I launched this website, and turned off my custom mobile theme, since I wanted to iron the kinks out of the site before I updated that theme for use with new content areas and new categories. And you know what? I'm going to leave it off. Turns out that this fluid grid approach works great in mobile web browsers, and on tablets as well. There's no need for a special theme to the site any longer – we've built something that looks great in all resolutions. And when that mythical double-resolution iPad comes out, it'll look great on that too.

Don't design for a static web – build for a moving one.