AndrewEmbler.com Visual Refresh - Summer 2011
I've revamped my web presence yet again. I really need to get together an archive of all of them over the years. This design is pretty cool for a number of reasons. I think anyone with a concrete5-powered blog might find some of these approaches useful, especially if it has a technical focus.
This new website has a number of features.
I'm using an official Grid layout
I'm using the Fluid 960 Grid found here. If you haven't done grid-based web development, I recommend it.
I'm using a FLUID Grid Layout
Yes, that's right. Instead of being fixed to 960, we start at 960 and move from there. This makes the reading experience much nicer on larger machines.
I'm using fluid font sizes
After reading this article at A List Apart, I decided to redesign the site using fluid font sizes. That is, specify one base font for your body tag, and specify everything else in em's. That let's fonts, spacing, and even image sizes stay in nice proportion.
(And those font sizes are dynamic!)
That's right. A custom bit of jQuery wizardry is responsible for increasing that base font size if a larger screen resolution is detected. Larger browser windows get bigger fonts.
Google Web Fonts are Your Friend
I've picked some nice fonts from Google at Google Web Fonts. Incredibly hassle-free font face embedding.
Highlight.js takes the pain out of highlighting my markdown code
I've ditched the dedicated concrete5 syntax highlighter block, and have instead integrated Highlight.js. It is highly recommended.
There are some concrete5 improvements that I'm going to talk about in a separate post that should keep this site running nicely, and allow easy updating much more frequently than before.
Get griddin', everybody!