So… Hard to believe, but it is here and it is live (those from feed better jump in) !
Long time readers are probably sick of promises about new logo and refresh of looks. Well, here is what over year of promises, development and countless hours gets you.
Right time to change
There are two ways to do theme change wrong:
- Often.
- Ever.
Major design change is pretty much disaster to site’s image, usability and reader impressions. Doing it often on top creates illusion of schizophrenic reasoning behind it.
So why there was design change? Not because it was needed, but because old theme was no longer viable.
Statement theme conquered me over two years ago with clean blocky looks. Over two years later not only those clean looks felt dated, but theme internals were falling apart from countless tweaks and rotten or deprecated code.
Right design to go for
There are three cases of great looking blog:
- Owned by designer.
- Owned by designer’s spouse.
- Owned by someone with money to spend.
Neither really applies to me, so my way was underdog way – doing it myself.
Proper design process includes beautiful Photoshop templates and smart creative process… Well, neither touched this theme.
At first it was black screen. Then red lines spitted it into columns. Columns were filled with blocks of content, fast and loose until there was no more place to fill. Then things were removed until there was nothing more to remove. Leftovers are what you see.
The most important thing in design (as for me) is personality. Content is very important, but it takes time to read and soak in. It only takes a blink for design to make and freeze an impression.
Well, this theme is choke full of my personality – namely gloomy introvert background and occasional bright spots of thoughts and interests.
Right parts to pick
I thought my first year of blogging had too much dabbling in WordPress.
Oh my, it was nothing comparing to what I had go through with this theme. Amount of tutorials, articles and documentation pages consumed alone I estimate at 900-1200.
Behind the scenes ReStatement runs on Hybrid parent theme by Justin Tadlock. I can’t even put in words how much time and effort this saved me. You would probably have to wait another year (or two) if I had to accomplish everything Hybrid does with seemingly little effort.
Most of new functionality is accomplished with custom widgets (and occasional fork of Hybrid’s parts) but there are few notable exceptions – plugins by scribu. They rock. Solid, flexible, object-oriented code that is pure pleasure to make use of.
Grey balloon icons you see throughout theme are from Balloonica icon set. I’ve seen a lot of icons, but this is one of very few sets that completely blows my mind every time. So much style and thought in so few colors and forms. ReStatement draws a lot of its style from that set, over year they grew into each other.
The logo is typed in awesome and free Bitstream Vera Sans Bold font and further modified in Inkscape. There are two doses of hidden meaning in that star by the way, I wonder if someone picks up on both. :)
New layout emphasizes content area, but also spends a lot of effort to deliver clean and interesting navigation options. I hope. I will just say that footer is highly contextual, keep an eye on it and see how it changes throughout blog.
Overall
So… Time to take good fresh look at blog. Wander around. Visit completely rebuilt archives page. Encounter a stupid bug or two. Try out new enhancements to comments.
This is the face this blog was waiting to get for over two years. I hope you are pleased to meet it.
Logitech Performance Mouse MX
SmartSniff – simple packet capture utility
How to integrate Google search into WordPress site
Rarst,
I like your new theme. But I think that the contrast is way too strong, and it is hard for the eye. I would lower the intensity of the black background for a dark grey. Also, I am not sure about center aligning your posts’ titles: flush them left if you can. Other than that, I like the way you use icons, and this theme is very clean, and loads fast. Congrats!
@Patrick
Yep, I know that it is very high contrast. Still I want to run it for a bit and then decide if it should be tweaked. I tried some image/pattern backgrounds but they really ruined the look.
Previous theme had heading left-aligned but it clearly didn’t work for this one. Took some time to decide on this.
Decent loading time is because I am static caching it to death. :) The only way to get somewhat decent performance out of shared hosting.
Rarst,
I know you’ve worked hard, and it looks great. I love the conditional footer, and your archives page is gorgeous. The description is a very creative way to show off your top categories, and the icons really are nice. The custom post meta is very creative, and the style looks great. I find it interesting that you decided on no sidebar, just bucking a trend?
Overall: Great job. << stealing your line.
@BrianK
Thanks!
I spend a looot of time on archives. After several hundred posts it got really hard to provide decent and interesting navigation. I actually have few more things planned, for example I want to make use of Google Analytics data to display most read posts.
There is actually right sidebar column there, just not used at moment. Previous theme had very heavy and complex sidebar and it felt cramped. I plan to use right column for some more contextual stuff and advertisement.
couple of thoughts:
a) the links are very hard to recognize. they are black with red underline. it’s interesting design wise, but very unstandard. I would go for marking links with text color, and leave the underline for :hover only.
To break the black-white, you could incorporate the color in other parts of the design, such as header and sub-header
b) it’s a bit blocky, and the black coming in from all sides makes it look a bit crowded. the eye wants some whitespace but there isn’t. instead the black is perceived as walling in the text.
make the white block inside padding thicker by 150% on the left, and some 300% on the right.
c) subheaders – i would left align, and increase padding on top and bottom. i’d also add a dark grey border on the top only.
d) post stats – their placement on the left and their prominent design (lots of bold stuff and links) make it look like a navigational element.
Put it on the right instead, with smaller text, no bold except for “Post Stats” title. And
Underneath it put the “Related Posts” block which is very nice.
example some of the changes
i made the subheaders shifted to the left a bit
i would also add slightly more spacing between a sub-header and each new paragraph
forgot link:
http://img801.imageshack.us/img801/945/rarst.jpg
@Siro
a) Hm? Underline on links is more common and important than color. Color is inconsistent on different monitors, underline is always clear. Also most of links outside of content would look horrible in read and multiple link styles is not something I wanted to go for.
b) Blocky looks are intended. :) I actually toned it down, was much more so. As much padding on text as I could go for. I can’t make column thinner because of content and I can’t make it wider because it won’t leave place for any kind of usable sidebars.
c) Subheadings might be tweaked (background is last minute change), but I think left-centered headers look horrible in this design.
d) Post meta is navigation element. Otherwise I’d just stuck it somewhere in the bottom. See above about right sidebar – it isn’t used at moment, but will be.
Thanks for suggestions. :) I do not care much about minor stuff (best is enemy of good) but I probably need to do something about background. Tought part.
I like but this is high contrast theme not easy on eye.
@Hitesh
Seems background is bit of an issue indeed.
I have spent some time playing with it on local test stack. Found nice image texture that is still very dark and retains the looks, but kinda breaks up and lowers visual pressure.
Will get it live later today.
WOW! Finally! Looks nice, good job Rarst.
@JeeMan
Thanks! Finally indeed. :)
Background tweak is live, blog should be easier on the eyes now.
I am unable to pass any ‘insightful’ comments but it just looks nice.
@Saurabh
Lack of feedback is also great. My goal was not to provide awesome beautiful experience (not with my crappy design skills), but simply experience that doesn’t suck. :)
So no feedback (or feedback on minor details) is sign that nothing is horribly broken and that is good enough for me.
the theme is nice and clean but the dead space to the right and left on the homepage is a bit distracting to me. If you ever need a hand (not a solicitation, just friendly assistance) shoot me an email.
@Spokane Designer
Heh, we tend to complain so much about widgets polluting sidebars but clean it up and suddenly nothingness is distracting. :)
As above that space is meant to be used more actively. Jump to older post (more than two weeks ago) I’ve started to test batch of AdSense in new layout.
And thanks for the offer!
Nice to get some more insight in the process behind the redesign of a WordPress blog.
The piece I especially like are blog stats. A feature I like to add to my own blog in the feature. Is this a default widget or a custom plugin?
@Inge
As most widgets currently used in new theme stats are custom-coded. I actually need to do some work on them to add caching so they aren’t calculated wastefully often.
I think there are quite a few plugins around that can display various stats as well, just search at http://wordpress.org/extend/plugins/
Instead of splitting end of story and comments with your Previous and Next post buttons, you could put those in the derad space to the rigth at the top of the story. If I’m not interested in this topic, I have to scroll to bottom of it. All the other links at bottom are if I knbow they are there and can go to end.
But in the first screen I have decided if I want to read more of it or not. So option there to go to the next post without scrolling to an unknown point wuold be useful.
@tincanman
Previous/Next links are very specific kind of navigation. They are for readers who prefer to go over multiple posts, reading or skimming them. If you land (somehow) on post and it doesn’t fit then probability that posts only linked by chronological closeness is very low.
Same with related posts – they are stuffed so low on the page because they are intended for people who are highly interested in current post and might want related stuff when they get to the bottom.
Right sidebar is more or less reserved for ads (there is already one block there displayed on older posts).
Lack of navigation on top is very much intentional. “too much stuff” was one of the most common complaints over time with previous theme. With this one I wanted to create above the fold that is very distinctive and very focused on content area plus large and easy to use top navigation.
Anyway I am letting dust settle for a month and will go over analytics to see how values had improved (or worsened) comparing to previous theme.
@Rarst
I figured you’d have thought it all out. I subscribe to your feed and do my ‘browsing’ that way – which works great.
thought you should know – your unsubscribe page consists of black text on black bg.
@tincanman
Yep. As usual when I am doing something it is very iterative. Since this theme was very long term project there isn’t an element on page that hadn’t went through at least five versions.
Navigation block after post took like twenty before I was moderately happy with it. It is very tricky area to get right. To little stuff risks very few users using it. Too much stuff creates major disconnect from comment area – which is really important and valuable here.
Thanks for subscribing, whatever way works for you. :)
@Siro
I have unsubscribe page?.. :) Unsubscribe from what? Feedburner email delivery? Comments?
Upd never mind, found it. Will fix it later today. Thanks for letting me know!
@Rarst
Hi Rarst!
Could you explain, how you did your previous/next link navigation? I guess it´s in “utility after content”, is it custom coded or a widget?
i really enjoy your theme, with tons of ideas which are pretty new to me.
@Michael Cvachovec
Technically that is custom coded widget. :)
Generic way for previous/next link is using previous_post_link() and next_post_link() functions. But main purpose of these is only to spit out link.
For more advanced tricks you go level deeper and use get_adjacent_post(). Instead of link it returns you post object. With such important parts as post ID, which you can use to lookup thumbnail, etc, etc.
Hi Rast,
thanxs for the quick reply and the link.
Can you reveal how you got the archives looking so great? I love the multiple angles you hit it at. Reveal your secrets!
@Bob
Archives are bit of everything:
– page is implemented and managed like special sidebar (so different blocks are actually widgets) – that is actually how every static page can work with this theme;
– two-column styling is part of theme and is used in multiple places, I think I have some function that spits markup needed, given list of items;
– thumbnails for post are handled with Get The Image (comes bundled with Hybrid, but also available as separate plugin) with some custom extensions;
- calendar widget is using Smart Archives Reloaded.
By now I think I got it done overly complex and I was too charmed with widgets back then. I have some ideas brewing to both simplify technical side and make archives even more useful and easy to navigate in next theme.