Obama Pride logo

I am Matt Thomas.

An enigma, wrapped in a paradox, inside a jelly donut.

I am V3

February 11, 2007

About a year ago, the previous design for iammattthomas.com really lost its appeal to me. It was at that time I began thinking about what I wanted to do with a new site: features, interface, visual style. I had many sparks but nothing ever caught fire—I never managed to come up with that one idea that motivated me to finish the job.

I’ve had a little seed germinating for a while, an idea based around a really simple layout and judicious use of typography. That’s easier said than done on the web, but I finally feel like I’ve gotten to a release-worthy point now. While still a fan of sIFR, I decided this time around to go with the best available fonts for each OS, and I’ll be tweaking that more I’m sure as I become more familiar with Vista and the various permutations of Linux. By keeping things simple I’ve made things easier on both you and me—the single CSS file is only 8 KB (and I think I can go smaller, as I start cutting away some of the chaff), and the layout worked the first time around in all modern browsers without any debugging. That’s my day job—life’s too short to spend a weekend debugging your own personal site in Internet Explorer.

My favorite little feature is a small one—the layout is elastic. For those of you who don’t know, try using your browser’s text resize to see what that does for you. While the default 800×600 friendly size is great on my laptop, when I’m staring at a big desktop display, I like to bump the whole page up a bit, and by specifying everything in ems, the page gets even more beautiful the bigger you go.

As far as influences go, I don’t know where to start. I looked to Richard Rutter’s The Elements of Typographic Style Applied to the Web over and over throughout the process, to the point that the site occupies a prime spot on my browser’s bookmarks bar for easy reference. I found little things that worked well here and there—a comment form layout from Airbag Industries; Matt Mullenweg’s Asides technique. Shaun Inman’s trick for controlling anti-aliasing in Safari. Joe Clark’s simple, single-column presentation. A radiant pattern from a beer bottle. A thousand little things influence the design and will continue to do so, I’m sure, for as long as it’s online.

If you come across a little problem here or there, rest assured that I’m probably already obsessing over it. It’s been a long time since I designed anything for myself, so it will take a while for me to trudge through all the little details I usually get smarter people to help me with.

Up next: Turning this little ditty into a full-fledged WordPress theme. I need to teach myself the process, and a simple theme like this should make for a good sandbox to work in. When I’m done, I’ll be releasing it for free, for the masses—any helpful direction regarding a license (GPL?) is appreciated.

 | Follow any comments here with the RSS feed for this post.

Commentary

  1. Avatar Anton Zuiker February 11, 2007, 8:39 am

    Very nice. Comment form rocks, the sunburst is subtle, and the paragraph indentation is effective. And your writing is similarly clear and convincing. My only suggestion is that the asides links at first seemed like full posts, until I observed the rule and the tiny permalink, and you might set them apart, visually, a bit more. Anyway, great work, Matt. (btw, I had Peace Corps Vanuatu friends over for dinner last night, and was telling them about the mistersugar logo. When they left, I saw this post in my newsreader. Nice coincidence.)

  2. Avatar Silus Grok February 11, 2007, 9:13 am

    Lovely, Matt. Nice execution.

    And now that I’m adding a comment, I have just a couple (very small) critiques: when I design, I try to set the text entry areas of a form a little appart. Might I suggest a blush of blue, or some other soft tone? It would invite clicking. Then, I must say that the light font in the text area is a little too light for my aging eyes, and made reading as I’m typing difficult.

    Oh, and I prefer to hyphenate “email”. : )

    Lovely, though… I think Richard Rutter would be proud to have been an inspiration.

  3. Avatar Amos February 11, 2007, 11:15 am

    It’s a lovely theme. It feels solid. Some themes feel like they’re held together with spit and glue (I’d be guilty of that). This is sturdy like an oak. Love the subtle header burst. The little “beets (?)” above is a very nice touch. I like the red you choose to use.

    Not sure how to explain it because it’s more of a subjective reaction I’m having but the writing seems to carry more import than many themes. Feels like I’m reading the New Yorker instead of a blog. I apologize for not being able to put my feelings into cleaner words.

    My ineffectual mumblings aside, it’s obvious you put a lot of thought and time into this theme. Job very well done. I’ll be sticking around to see when you release this. See if it’s a fit for my content. I also appreciate your decision to share the theme with all takers. Very generous of you.

  4. Avatar Matt February 11, 2007, 12:16 pm

    What an amazing coincidence, all my best designs were heavily influenced by beer as well.

    Wait… that came out wrong.

  5. Avatar Garrett February 11, 2007, 2:52 pm

    Beautiful. (That’s really all there is to say. Great work.)

  6. Avatar Matt Thomas February 11, 2007, 5:33 pm

    What an amazing coincidence, all my best designs were heavily influenced by beer as well.

    See, Matt, if it hadn’t been for La Paz who knows how much longer I’d have gone without a new design. :)

  7. Avatar Matt Heerema February 11, 2007, 10:58 pm

    This is gorgeous. Nice work. I’d look forward to this being a Wordpress theme. I might actually use it…

    This inspiring me to strip my theme down a bit…

    Kudos

  8. Avatar Dave (Spin This!) February 12, 2007, 10:55 am

    Looks great… super clean, good choice of color.

    Axe the starting indents on each paragraph though if you add extra space between paragraphs—you usually do one or the other but not both.

  9. Avatar amanda February 12, 2007, 11:29 pm

    well, i come out of the woodwork again to tell you how much i am really enjoying the look and feel of things. hope you are doing well.

  10. Avatar Matt Thomas February 13, 2007, 1:33 am

    Thanks, all, for the kind words. When I set out to do this, I didn’t have much of a direction other than to do something simple, that made actually reading the content enjoyable (sadly, it seems that’s an afterthought on so many sites), and that felt like “me.” From the responses so far both here and offline, it looks like I’ve done something right.

    I appreciate all the feedback and constructive criticism—as you can see I’ve already made a few changes, and will doubtlessly continue to as I begin turning it into a proper theme!

  11. Avatar Justcuzliz February 14, 2007, 3:49 pm

    I have no idea what most of those comments mean, but I just wanted to let you know that I am happy to see comments again. I like to let you know I’m still checking up on you from time to time.

    Love ya!

  12. Avatar km February 14, 2007, 4:44 pm

    baltimore misses you!

  13. Avatar Ara Pehlivanian February 15, 2007, 11:40 am

    Reminds me of another single column elastic design I know of. :-)

  14. Avatar Rirath February 15, 2007, 10:23 pm

    Very clean and very easy to read, I really like the design. I actually like sites with sidebars rather than menu areas at the bottom, but that’s just a personal preference.

  15. Avatar Richard Rutter February 23, 2007, 2:39 am

    Glad to hear the the Elements of Typographic Style Applied to the Web (bit of a mouthful isn’t) is getting some good use. It’s a beautiful job you’ve done here – nice to see Constantia in action.

Have your say

Don’t be a jerk.