My old site’s design is only a year old, but a lot has changed on the web. I wanted to fully embrace HTML5 , as well as experiment with Ethan Marcott’s now infamous article on responsive web design. So, this is the redesign that I’ve worked on over the past 3 weeks, and and I’d like to explain some of the design choices I made.

The red that I’d used before no longer works for me. It’s too strong as a background color and overwhelms the navigation text. I decided to switch to a light-gold that I’d used on a recent project. It draws attention without being forceful. A nice bonus is that I haven’t seen it used on the web very much, with Weightshift being the gorgeous exception.

I quickly built out a flexible base layout. The max width is 1000px, because calculating the percentages is way easier (200 px is 20%). The maximum and minimum ends of the spectrum, 1000px and 320px, are the two widths I put the greatest emphasis on.

This is the slideshow seen on the homepage. I wasn’t sure if it would work in a flexible layout, so it was the first test. Each element – the size of each image, the width of the viewport, the overall width of the images container – had to resize according to the browser size and in relation to each other. Simple javascript calculates the number of pixels to scroll depending on image widths. I also made sure that the left and right buttons are large enough to allow for tapping on a mobile touchscreen.

Many elements float to the left, snapping neatly to a vertical layout when the browser size is very narrow. This is especially useful for repeated grid elements, such as on my [Work] page.

I make extensive use of media queries in the footer. There are multiple elements and almost all of them change their floating or margins upon resizing (the unordered list used for the footer nav, for example, is inline in wide layouts but vertical in narrow layouts). This is the strength of responsive web design over regular flexible layouts, being able to completely alter the way elements are laid out without touching the HTML markup.

It’s easy to treat media queries as duct tape and redo the layout every time something breaks or gets too narrow in the layout. But if you find yourself doing this every time the layout slightly changes, it’s worth rethinking the flexible layout itself, so things fall into place without requiring spot fixes.

I got stumped on the blog header design for days. The nav is, in terms of layout, the same as the rest of the site. The links are different. They point to aspects of the blog instead. I also wanted to include a short tagline. My first pass had too much whitespace, didn’t set the blog off distinctively, and had awkward proportions. I chewed on this for a few days, trying several changes to the layout. Nothing.

Then I remembered La Salle.

I’d used the typeface La Salle before, on my logo. What if I set the word ‘Journal’ with it and used it to fill the whitespace? It was subtle, drew attention to the different nav, and provided the right anchoring to position the tagline.

Best of all, it acknowledges the lines on the top and bottom. This is important because the blog is the ONLY page of the site that has two lines on the top, the other pages only had one under the navigation. Perfect.

So what’s next? Well, the Tumblr blog and the main site run on two different sets of CSS so I want to unify them soon. I am still tweaking pages of the site, so you may see different layouts over the next few weeks.