A responsive work in progress
I designed this site following @beep’s principles of responsive web design. I’m just not finished yet. So, if you scale your browser down, you’ll notice that the site responds to you, just not very well.
The idea is to have a version that fits well for users on a full-sized monitor, an iPad, and a mobile phone. You’ll notice I said “iPad” and not “tablet.” That’s because I’m brand new to designing for the mobile market and this is my first crack at anything other than “web” and “mobile.” More on that to come.
Removing clutter
It took me a long as a designer time to learn to let go of “features.” They look so shiny and attractive. But most of the time, they’re clutter. This iteration of my website’s design is aimed at minimizing clutter. Colors are sparse, mostly reserved for links. Images are few, giving the existing ones more visual impact. Bells and whistles are all but gone, save for two social sharing buttons and Twitter’s @Anywhere functionality.
I hope this design isn’t boring. I’m trying to strike a balance between simple and empty. I hope that some subtle grays and soft gradients add just enough to the design to make it simple and effective.
Embracing modern technology
With this iteration, I’m upgrading my site from 2008-ish standards to 2011+. I’m using HTML5 & CSS3, Google Web Fonts, and several modern code standards.
HTML5
I’m finally using elements like <header>, <nav>, <section>, <article>, <footer>, etc. I started with Paul Irish’s HTML5 Boilerplate, and customized it to fit my needs.
Kudos to @adarowski and @jayroh for their HTML5 Boilerplate WordPress theme. I’m not actually using it here, but it helped me fine-tune my theme.
Web Fonts
I’m using Google Web Fonts to break out of the world of Georgia. I would have preferred Typekit, but I found their site confusing & unusable. I’m probably just missing something.
The two main fonts I’m using are Merriweather for headlines and Neuton for most other text content.
Object-oriented CSS
Since I attended An Event Apart 2010 and saw Nicole Sullivan speak about OOCSS, I have been writing my CSS with her teaching in mind. The basic principle is, “Write less. Reuse more.” My interpretation of it is very unsemantic. VERY unsemantic. But I’ve accepted that unsemantic-ness in the name of simple, fast, easy-to-use, and easy-to-reuse CSS code.
To see what I mean, check out the CSS that styles my website. Toward the bottom, you’ll see a bunch of “helpers,” things like .float_left{}, .width_100{}, .overflow_visible{}, etc.
A note on semantics
The unsemantic nature of my helper classes is worth diving into. I accept it because I think it helps me design better and write code better. That is, write CSS code better. I’m starting to figure out that I care more about my CSS than my HTML. I’m ok with adding <div class="float_left width_100 green"> to my HTML if it means that I only have to define .float_left { float: left; } once in my CSS.
This is a total 180 for me on the semantics debate. And I still hear a little voice telling me it’s wrong. But writing this way has cut my lines of CSS nearly in half, and it’s forced me to plan and organize better. Therefore, I think it has done more good than harm for me and my development.
What do you think?
All in all, I’m very happy with this design and code. What do you think? Did I reach a good balance between simplicity and style? Did I hit the mark on responsive design and OOCSS? Where do you stand on the semantics debate? Please tell me in the comments below or tweet at me: @tjkelly.