Update: Surprise—This post is now outdated & is about a previous version of this site. To learn more about what I’ve got cooking now, click here.

It may not look like it, but this version is a complete code & design overhaul. Tiny annoyances with my style sheet and page structure compounded over the past few months until I happily yielded to the urge to start messin’.

Outside The Box

I love the 960x400 pixel graphic playground that the banner box above provides. In this version I went a step further and built in the ability to define the style for the entire page body whether or not it fits in the banner box. Dave helped me adapt this code that pulls a custom css field from a wordpress post and echo it in the within the head tag.

version 1

Centered Page Layout

The left justified layout (shown right) provided an easy way to frame large & somewhat incomplete banner box photos, but having all that content shoved to one side felt unbalanced and drove me mad... sort of like sitting down with an overstuffed wallet in your back pocket.

Notes Section

This section is for quick posts, links and tips. I felt like it was bad e-karma to come across something valuable online & not share it. Most of us design types have googled “negative margins in ie6″ or spent hours searching for some graphic inspiration. For those of you publishing good online content, I appreciate it.

Threaded Comments

WordPress offers it and I wanted to take advantage. Possibly (but probably not) unique to this site, my replies will be displayed in the right margin.

Shorter Line Length

While there is some debate on the optimal number of characters per line in regards to readability, I wanted to cut the 100+ CPL down quite a bit to suit my own preference. Narrowing the post entry column also defined a standard space to the right for blockquotes, photos, and reference links.

Ads by Fusion

18 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Christopher Meeks

    It looks great Trent. I like how you worked in the ability to use large body photos. That’s going to create some cool layouts int he future!

    • Trent

      Thanks man... I’ve got a few ideas for some big ‘ol pictures I’ve had laying around for a while. I like to scan stuff.

  • Daniel Genser

    Very nice technique, pulling in the CSS into the WordPress Write Post screen.

    Another way to do this: Since WordPress 2.8+ has the excellent body_class template tag, it provides a class for (among other things) single-post-id. One could simply do this in their CSS file:


    body.dynamically-generated-post-id div#container {
    background:blahblah;
    }

    But yours is slick in that you can do your business from one interface without opening up FTP. Nice work!

    • Trent

      Nice tip... Initially, I didn’t want to place any of that post-specific code in my CSS file. Though, it would be pretty nice to have all that style code on a single post.css file. I’d be easier to adapt the posts if the site structure ever changes.

  • Marc

    Hey, looks awesome! Alot of little improvements over the last version, which I thought had a lot of potential as far as bringing the imagery on par with the content of each post.

    I actually just kicked my first attempt at a similar concept out the door too.

    • Trent

      @ Marc: Thanks a lot. Let us know when your project launches.

      @ Eli: Web Creme is great. It has one of the best prettiest RSS feeds on the planet.

    • sebacruz

      Hello! Sorry for this fake comment but I love the way that your show the comments.

  • Eli

    The background image really makes it, but the structure is loverly as well. Found it view web Creme (showcases the best of the best)

  • Elliot Jay Stocks

    Wonderful work, Trent. I love that header.

  • philipp

    the layout is blowing my head out ^-^ damn cool.

    just as a suggestion, you might not need it, but to save some trees, how bout a print stylesheet? the most easy takes 5 minutes ^-^ (http://css-tricks.com/stylesheets-for-printing/ as an example for the quick and clean one)

    • Trent

      D’oh! Totally forgot to attach something. Thanks for the heads up Philipp. Your ink jet shall be spared.

  • philipp

    wonderful! saves hopefully a tree per day ^-^

    Cheers!

    ps: the reply message box (when replying on the right side, makes the overall window around 30px too wide and you get a horizontal scroll bar, which makes it a bit difficult to reach the submit button. this goes at least for safari 4.0 on OS X 10.4.11. same goes for ff 3.5.2 and opera 10, accept opera jumps far enough to click the submit button. but all the same, i love this design!!

    • Trent

      Philipp, these threaded comments would be kicking my ass without help like that... much appreciated. I went ahead and removed the reply option for right-hand margin comments & reposted your comment in the main column. I think this could be a decent long-term solution. Thank You.

  • Jeff Bridgforth

    Good to see someone else taking a stab at art direction. I really like the image you chose for this post. Nice vibrant color really draws you in.

  • philipp

    hey, you’re welcome ^-^ i am happy to help and i believe being able to reply in one level will be enough! i think it would even make it easier to follow the discussion.

    cool!

  • Danny Foo

    Love the recent article display! And segmenting admin comments to the right of comments is definitely something I hadn’t thought of trying.

  • Mike

    Just ran across your site from webcreme.com. It looks great! I subscribed to the rss feed.

Leave a Reply