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 960×400 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.
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.
18 Responses.
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!
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.
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!
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.
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.
@ 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.
Hello! Sorry for this fake comment but I love the way that your show the comments.
The background image really makes it, but the structure is loverly as well. Found it view web Creme (showcases the best of the best)
Wonderful work, Trent. I love that header.
Glad you like it! Thanks for stopping by.
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)
D’oh! Totally forgot to attach something. Thanks for the heads up Philipp. You’re ink jet shall be spared.
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!!
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.
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.
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!
Love the recent article display! And segmenting admin comments to the right of comments is definitely something I hadn’t thought of trying.
Just ran across your site from webcreme.com. It looks great! I subscribed to the rss feed.