Overhauled

zen garden

I finally got around to overhauling this site to be much more in line with what I really wanted it to be. Previously I’d just been using a stock theme (which I still tweaked a bit), but it always felt… bloated. It was a fairly clean theme to begin with, but I’d had to load it up with plugins and custom functions to make it behave how I wanted.

So I started over. From the beginning my goal was to create as streamlined and minimal of a site as I could get away with. Starting from the Boilerplate theme, which combines the HTML5 Boilerplate with the fresh-slate Starkers theme, I tweaked, cut, pasted, cut, developed, rewrote, cut, bastardized, twisted, and bent the code to my whim. The result is pretty close to the original idea: there’s no sidebar, no tag clouds, nothing like that. There’s content. And that was the goal.

There’s obviously still have some development work left to do. There’s still bloated code to clean up, the CSS is kind of a mess and can be streamlined considerably, and I probably need to rethink my content strategy of what to display (and where to display it).

Even so, the idea of “release early, release often” was something I wanted to stick to for this round of development. The biggest driving factor was my discovery that the WPTouch plugin, which was being used to transform the site for touchscreen mobile browsers, was blocking comment submissions. Unacceptable. Thus, the current iteration eliminates any use of a “mobile-specific” plugins for display and instead relies on CSS media queries for responsive design. That portion could be improved somewhat yet, but for phase 1 I’m fairly happy with it.

I’d really like your feedback on this design, though. It’s a constant work in progress, and as any designer/developer will tell you, working on your own projects is a nightmare because you’re never really satisfied with your own work. So please, if you have suggestions for what to improve, what sucks, what’s awesome… tell me in the comments, or reply to me on Twitter. Thanks for your help making this better!

Photo by tanguero. (License: Creative Commons Attribution)

8 Comments

  1. 1) I follow you on twitter and think you’re one of the coolest humans around.

    2) The main text box is too wide to comfortably read, imo.

    3) Like the style of the pull quote just make it bigger. By like 100%.

    4) Something is off in the contrast. I think I get what you’re trying to do. But the contrast has me wondering if you got there or not.

    Reply
  2. Tom Henrich

    1) Now I know you’re just lying. (Thanks!)

    2) What width would look better? Right now it’s set to be 60% of your window, up to 1024px.

    3) Bigger how, like font size? I was sort of thinking I needed to bump that up.

    4) I’m still toying with exact colors, but I agree — it probably needs a little nudge to be just right.

    Thanks for the feedback! It’s definitely a work in progress, but I really do appreciate it.

    Reply
  3. I don’t mind the text width. it’s maybe wider than what a “standard” might be, but I think it’s readable. Slows the vertical progression of reading the page, which is probably why it might feel “wrong.” We’re used to narrow blogs that force people to scroll and scroll and view all sorts of ads and links.

    Color-wise I think it might be missing some extremes. The footer is great but the body headers maybe need a known down to a darker shade. But yeah, finessing the colors is always a long process. I like the simplicity of what you have now.

    Love the Archive page. Simple elegance.

    Overall it’s a nice minimalist site. It’s good encouragement to finish my own project.

    Reply
  4. Barbara Handley

    The quote sidebar should definitely be larger. I think the main problem with it is that it’s aligned with the right margin. Add some thick padding on that side.

    Is the search box at the top supposed to be underneath the gray bar? If so, the input box needs an outline as its background color is nearly indistinguishable from the background of the page.

    Privacy policy!!!!!!! Anytime you want (or require) personal information from users, you need a privacy policy. If I didn’t know you personally, I probably wouldn’t have commented, or would have used a made-up email addy due to lack of privacy policy.

    Reply
  5. Barbara Handley

    Also, it’s kinda weird that your previous and next post links are under the “possibly related” heading. Two totally different kinds of navigation smooshed in there.

    Also, the link is kinda invisible due to blending with the horizontal line.

    You may want to rethink the full width horizontal lines, Mr. ThereIsNoFold…those lines do not encourage scrolling.

    There is not enough whitespace vertically between different element on the page. Because the theme is so minimal in terms of color, icons, and other visual cues, I think dramatic use of white space is required.

    I do like it, btw, but you asked for nitpicking. ;-)

    Reply
  6. Tom Henrich

    No, this is great feedback, thank you! It was sort of a rushed “design” so the little details haven’t quite been worked out, and it’s a work in progress.

    The search box is a little weird, I never really ironed out the display of that nav bar.

    The “related” posts thing is powered by a plugin, and I’m trying to figure out how to force it to position itself lower than where it is now.

    All good things I need to work on. Keep ‘em coming!

    Reply
  7. When the window width exceeds 1024px, the line width hits 614px (or 38em) which gives about 70-75 characters which is fine (Bringhurst recommends the measure be anywhere from 45 to 75 characters, albeit for serifed text). However, if the window width goes beyond that, the measure becomes too long at 1.6rem (it becomes noticeably uncomfortable when the screen width goes beyond 1,200px). I would suggest either setting media queries to increase both leading and font-size or set a max-width of 40em for the content.

    Reply
  8. Better content!

    (Just kidding…)

    I’d like things wider, but if it bugs me enough, I’ll probably just write some Stylish rules for your site.

    (No, it won’t bug me enough.)

    Keep up the good work!

    Reply

Leave a Reply

Your email address will not be published or used in any manner. Play nice.

Connect with Facebook

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>