I just launched my redesign of my personal blog mattwie.be (formerly mattwiebe.com) and I couldn’t be happier to finally have it live. This is a full-circle moment for me, as tweaking my blog (first on Blogger, later on WordPress) was what launched me into web development. After seeing that I could produce better code and design than most of what I was seeing on the web, I thought I’d give it a go. 3 fun and busy years later, my personal blog has sat stagnant in both content and design.
I’m a big fan of design constraints. For this project–just like my WordPress theme The Erudite—the major design constraint was “it’s all about the content.” This meant saying goodbye to all the cruft of today’s blogs: sidebars, social media sharing links, ads, and all the junk that distracts from reading the actual content. I might relegate some typical sidebar-type things to the footer (archive navigation, search) but for now I’m really enjoying the minimalism.
Type & Typography
Web design is 95% typography, and this design pushes that to 99.9%. I’ve made use of Robert Slimbach’s excellent Minion Pro for body text, while headlines are set in Carol Twombly and Slimbach’s Myriad Pro Condensed. Both are served by the fine folks at Typekit. I made extensive use of Tim Brown’s Modular Scale tool for all dimensions, which is why the design (hopefully) feels natural. My scale is 18px/15px, Musical Fifths.
Also worth noting is that advanced web typography is still a landmine of browser inconsistencies and outright bugs. I will be revisiting some (painful) lessons learned in a future post.
Responsive design is fun. Being able to provide a single template that works on a variety of devices and at different screen widths has been the web design holy grail for years, and now we can do it. I targeted the iPad portrait view (768px wide) as the ideal view, as that’s how I enjoy reading the most these days. Browsers that don’t understand media queries will show this style. I adapt the style to varying degrees for widths of < 1024px (wider screens), 431–649px (iPhone landscape), and < 431px (iPhone portrait). I think it turned out pretty well. My focus on content made this process relatively straightforward.
The only non-standard design element I included was a post count. This is an attempt to game myself into posting more often. I’ve set myself the goal of reaching 500 posts by the end of the year, and I now have a constant visual reminder of my progress. We’ll see how successful this self-gamification design element is. Anyone who’d like to integrate this into their own WordPress templates can grab the code.
A Work in Progress
There’s still more to do. Archives and search need to be designed and exposed. I want a better experience for the home page; something to describe myself and the site better to new visitors. If you have any suggestions/critiques, please sound off in the comments below!
Great use of media queries and flexible width.
Love the typography, it’s set like fine art.