Soma Design

I just launched my redesign of my per­son­al blog mattwie.be (for­mer­ly mattwiebe.com) and I could­n’t be hap­pi­er to final­ly have it live. This is a full-cir­cle moment for me, as tweak­ing my blog (first on Blog­ger, lat­er 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 lat­er, my per­son­al blog has sat stag­nant in both con­tent and design.

Design Philosophy

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 actu­al con­tent. I might rel­e­gate some typ­i­cal side­bar-type things to the foot­er (archive nav­i­ga­tion, search) but for now I’m real­ly enjoy­ing the minimalism.

Type & Typography

Web design is 95% typog­ra­phy, and this design push­es 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 Car­ol Twombly and Slimbach’s Myr­i­ad 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­ful­ly) feels nat­ur­al. 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 brows­er incon­sis­ten­cies and out­right bugs. I will be revis­it­ing some (painful) lessons learned in a future post.

Responsive 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­get­ed the iPad por­trait view (768px wide) as the ide­al 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 pret­ty well. My focus on con­tent made this process rel­a­tive­ly straightforward.

Post Counts

The only non-stan­dard design ele­ment I includ­ed 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 visu­al 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!