Redesign of mattwie.be

I just launched my redesign of my per­sonal blog mattwie.be (for­merly mattwiebe.com) and I couldn’t be hap­pier to finally have it live. This is a full-circle moment for me, as tweak­ing my blog (first on Blog­ger, later on Word­Press) was what launched me into web devel­op­ment. After see­ing that I could pro­duce bet­ter code and design than most of what I was see­ing on the web, I thought I’d give it a go. 3 fun and busy years later, my per­sonal blog has sat stag­nant in both con­tent and design.

Design Phi­los­o­phy

I’m a big fan of design con­straints. For this project–just like my Word­Press theme The Eru­dite—the major design con­straint was “it’s all about the con­tent.” This meant say­ing good­bye to all the cruft of today’s blogs: side­bars, social media shar­ing links, ads, and all the junk that dis­tracts from read­ing the actual con­tent. I might rel­e­gate some typ­i­cal sidebar-type things to the footer (archive nav­i­ga­tion, search) but for now I’m really enjoy­ing the minimalism.

Type & Typography

Web design is 95% typog­ra­phy, and this design pushes that to 99.9%. I’ve made use of Robert Slimbach’s excel­lent Min­ion Pro for body text, while head­lines are set in Carol Twombly and Slimbach’s Myr­iad Pro Con­densed. Both are served by the fine folks at Type­kit. I made exten­sive use of Tim Brown’s Mod­u­lar Scale tool for all dimen­sions, which is why the design (hope­fully) feels nat­ural. My scale is 18px/15px, Musi­cal Fifths.

Also worth not­ing is that advanced web typog­ra­phy is still a land­mine of browser incon­sis­ten­cies and out­right bugs. I will be revis­it­ing some (painful) lessons learned in a future post.

Respon­sive Design

Respon­sive design is fun. Being able to pro­vide a sin­gle tem­plate that works on a vari­ety of devices and at dif­fer­ent screen widths has been the web design holy grail for years, and now we can do it. I tar­geted the iPad por­trait view (768px wide) as the ideal view, as that’s how I enjoy read­ing the most these days. Browsers that don’t under­stand media queries will show this style. I adapt the style to vary­ing degrees for widths of < 1024px (wider screens), 431–649px (iPhone land­scape), and < 431px (iPhone por­trait). I think it turned out pretty well. My focus on con­tent made this process rel­a­tively straightforward.

Post Counts

The only non-standard design ele­ment I included was a post count. This is an attempt to game myself into post­ing more often. I’ve set myself the goal of reach­ing 500 posts by the end of the year, and I now have a con­stant visual reminder of my progress. We’ll see how suc­cess­ful this self–gam­i­fi­ca­tion design ele­ment is. Any­one who’d like to inte­grate this into their own Word­Press tem­plates 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 bet­ter expe­ri­ence for the home page; some­thing to describe myself and the site bet­ter to new vis­i­tors. If you have any suggestions/critiques, please sound off in the com­ments below!

One Comment

  1. Posted March 16, 2011 at 10:33 pm | Permalink

    Great use of media queries and flex­i­ble width.

    Love the typog­ra­phy, it’s set like fine art.

3 Trackbacks

  1. By The New mattwie.be – mattwie.be on March 16, 2011 at 6:35 pm
  2. By That 500 Posts Goal – mattwie.be on January 4, 2012 at 7:59 am