You may notice some changes happening here at Technosailor. On the surface, the changes look simply like a design change. Most of the time in the past, when I have come out with new design changes they are generally live in a period of a day or two. But this is more than a design change and it has taken me two weeks to get to this point. It is a completely new blog concept and is likely the most challenging thing I’ve ever set about to do.
About two weeks ago, I began an email conversation with several people who I hand chose as experts in the area of 1) blog design, 2) blog usability and 3) blog marketing. I asked them for feedback on the concepts I had in my my mind. This is the email I sent in its entirety:
I picked you four to send this email to because of all the people I know, you have the most conceptual grasp on blog architecture and effectiveness.
By now, you are all probably aware that Technosailor is about to undergo some massive changes in architecture. I wrote about one such aspect today in case you missed it.
So the theory is to have multiple views. Initially, the thought was to have the standard view, a conversation view (which I wrote about) and a reddit like view for readers to vote stuff up or down and the most popular stuff would float to the top. However, as radical as the reddit-like view sounds, I’m beginning to question the wisdom.
For one, I have a ton of content already (2.5 years worth) and no one is going to go start rating older stuff now. Theoretically, it would be a “from now on” thing but that makes results very biased. Plus I just don’t know how many people will “get it” in terms of the concept. If I had a Lifehacker type blog, perhaps. I don’t so I’m beginning to question the sanity of building such a system.
Other ideas for a third view is to have a “Popular” view that is based on number of comments but that is inevitably going to pull alot of really sort of irrelevant content up. Another idea was to do as Pearson has suggested somewhere (can’t remember which entry he commented on and where) which is more like a “Best of” view, but that would require going through 2.5 years of content and finding what I think is the best content. That could be a tedious process as well. Both of these other two options aren’t nearly as sexy as a reddit-like view either.
So I’m looking for advice or ideas on a third view that is 1) effective for advertising, 2) effective for exploration, and 3) creates a “wow” in the blogosphere. While the ideas I’m searching for might be intertwined with the actual design, I’m really grasping for more conceptual ideas in terms of architecture.
So, that said… any of you have any advice?
The conversation that ensued highlighted some key philisophical differences between the parties involved but ultimately resulted in some really good feedback.
Brian Clark from Copyblogger made these comments:
Any good blogger, publisher or producer is no doubt listening carefully to the crowd. But the true value of that listener is in what he or she does with the fruits of the observation, not in regurgitating it. If the blogger is not smarter than the crowd on a particular topic, or doesn’t have a fresh perspective, why bother?
So, any Digg or Reddit feature should be just that… a feature. And a tiered rating system would seem to deliver more valuable feedback than a simple “bump it up the page” system. It’s not whether someone likes it or hates it. It’s the shades of grey in between that provide insight.
The real value in information architecture is the placement of what Aaron, or Darren, or Jeremy, or Chris thinks is important. In other words, the most valuable content real estate on a blog should be less automated, not more, because it takes a real live editor to make those decisions based on what he observes and further deduces.
Brian goes on to suggest really highlighting “Best of” stuff as the predominant feature of the new blog experience. Jeremy, however, disagreed:
While I love these thoughts, I’m a bit curious how these get applied in an actual blog setting.
Not that I don’t love the thoughts. It’s no big secret that we’re about to launch v2 of our publishing platform at b5, and that we’re [b5media] already looking for great ideas for v3 (since, really, v2 is what v1 was supposed to have been but never lived up to).
Chris Pearson decided to weigh in on the side of “the more effective sidebar, the better”:
Personally, I have found huge value on my own site in the modules that lie in the right sidebar. I update the links over there on a semi regular basis, and they have done an excellent job of raising (and maintaining) my overall level of page views and site “stickiness.”Despite their initial success, I believe that these modules could still be arranged (or rearranged) in such a way as to bolster page views and drive traffic to different parts of my site. Think of it along the same lines as CPM and Google ad placement - some areas are just more effective than others, plain and simple.
Structure
With the opinion of three crucial guys in my pocket, I set about to brainstorming on how I actually wanted to accomplish this new blog experience. I decided that I wanted to keep a conventional blog view where most recent posts are listed from the top down. Most blogs are like this and to take this view away could possibly disorient readers.
Secondly, I wanted to have a “Best of” view. I decided to nix the concept of Reddit voting in favor of this view. This wil be a subselection of what I view as my best content. through the years. As other entries are written that reflect that feeling on my part, I will continue to add articles for this view. It serves mostly as a high-level view of my writing and a good jumping off place for new readers or search engine readers who would like a snapshot of my content.
Finally, there is the most radical shift away from conventional blog architecture and the bit that took the most time and heartache to create. It is the Conversation mode where democracy is the name ofe game. As readers comment on content, no matter how old, it will rise to the top. The most recent contribution to conversation will be listed first. I think readers will like this mode as sometimes older content gets attention but no one knows that because it is off the front page. This view changes that.
I also decided to make the views cookie based so that readers can return to the site at a later time and have the same view as they left with. Props to Andy Skelton and #wordpress IRC user leftjustified for key bits of help along the way that played into the final product.
Design
The design was the second phase of this overhaul. My stats claim that only 2% of readers use 800×600 resolution. Most accessibility experts think that every site should be viewable at minimum at 800×600 and up until this design, I have followed those guidelines. However, designing for 800×600 is very limiting. I decided instead to support 1024×768 minimum for this overhaul. In fact, I also decided I wanted to move away from fixed-width layouts and to embrace fluid layouts (they adjust with the screen size). I also wanted minimalism to be the key.
I abhor design work but I began working out some concept pieces. Most of them I scrapped after a day or so before I settled on this design. It returns to the roots of “nautical” imagery that I’ve always used in the past up until the last design. I roughed up the concept that includes three columns, a prominent bit of real estate for ads in the upper right corenr, and a functional banner that allows users to switch between the blogs views.
I handed the design over to uber-designer Jonic Linley who dressed the design up, decided to pimp my feed in the banner and worked his CSS magic to make the site leap off the page.
What you see in front of you is the product of lots of hard work, thought and really key contributions from key people. I’m really proud of this concept and I hope that it will spark further discussion in the blogosphere about blog architecture. Overall, we’re in a rut. If my design causes people to think about blog architecture and think outside of the proverbial box, then my job is done.
As a sidenote, all the functionality of the views is in a plugin. I may release it later on for a fee, or possibly free under GPL. I don’t know. Depends on the demand. Let me know.
Please let me know if you run into bugs. It’s been tested on IE6, IE7, Firefox 1.5, Firefox 2.0, Mozilla 1.7, Opera 9, Safari 2.03 and Firefox/Mac.
Update: Bugs already. :) Couldn’t have guessed. Archives are currently broken. Fixing that. Comments template was missing. Fixed that. And my “views” makes alters the order of entries in my admin. Grrrrr. Okay, well that doesn’t affect anyone but me but it means I have to go work out more on that front.
Stumble it!
About the Author: Aaron Brazell is the lead editor of Technosailor.com and a social media expert. His passion is to see companies and individuals use the internet and web technologies wisely and effectively to promote their brands and companies. He served as Director of Technology at b5media from 2005-2008 and is currently an independent consultant.
I love it! Absolutely love the L&F, the different views, everything. Job well done. Looking forward to reading the effectiveness of the new design. Oh, like the “opinions” instead of comments.
Thanks for the shout-out man :) Be sure to pass any bug reports on to me… Although I’m a little embarrassed about being called an uber-designer, I don’t really feel like I did much!
I love this new version of the site, but I’m almost sick of looking at it now!
Oh, btw, the only bit of the site that’s fluid is the nav container with the blue background… Most of it’s glued in place pretty solidly…
A fluid layout on this design would be a pain because of the three nav images, the content column would have to fit under them to give the page it’s grid-like sensibility, but obviously the images won’t stretch as the content would… It would throw out most of the design’s grid and most likely look crap… That’s why I made it fixed, but I forgot to tell you!
Sorry man, didn’t mean to make a liar out of you!
Thanks again! Hope y’all like it!
Stacie: L&F? Forgive me I’m feeling dense right now. :)
Jonic: You made it come alive man. :)
Nice overhaul and some great concepts. It’s hard to tell that the “BEST” section is your handpicking, as currently it seems to be in order of most comments.
I should note four things (not because I’m anal .. because I think you would want to see some feedback!)
1) While my screen is minimum 1152×864 .. I often read in my bloglines, then click on a headline and up pops a window .. not full screen image view. In Here, your top search field and input button right aligns to the size of window. When that happens, despite scroll bar to see the full screen and right columns .. the top “Subscribe to Technosailor” block disappears. I guess that’s because of the fluid width over the two sidebar columns. It wouldn’t work i.m.o. having the fluid width over the text because it’s nice centered below the 3 images - Maybe you don’t need fluid width with a 1024×768 view?
2) Unless “The Current” has great significance to you personally .. just having that as “HOME” would work just as well and maintain some normality!
3) Is it possible to increase the pixel size of the main text column words? It’s too small for me - I normally just go straight to View/Text Size/ from my IEv7 window and just increase the text size for readability - all the other text looks too big with that orange and distracts you from the reading.
4) And finally .. the top “Your Opinion” right-aligned image on the posts cover the text of the second line of words .. perhaps adding some type of “hspace” to your CSS for boxes and images?
Oh - Bonus suggestion .. with the advent of Photoshop .. I would like to see AARON in a “Pretty Little Box” graphic somewhere … maybe you standing in a Pirate’s treasure chest? Hmm. Some box. Maybe. Maybe not.
Look and Feel. It’s very clean and user friendly.
Hart: 1… Hmmm. I’ll have to see if Jonic can do anything with that. 2, The other two items begin with “The” and Current is consistent with the nautical feel. 3, you have high res. The font will be small. I’m catering to 1024×768 and you can override the font with Ctrl-ScrollWheel. 4, will talk to Jonic. Bonus, Heh… Perhaps :)
Stacie: Gotcha :)
Oh.. I didn’t get the nautical “current” reference.. D’oh! But, while you are at it .. why not think of other terms for the other boxes? e.g. The Conversation could be .. the Starboard (almost like two meanings there) .. The Best could be .. The Round Up? The Bridge? The Rudder? .. (my mind is pretty much blank on that one).
and speaking of nautical terms … it would be nice if you “Anchor”ed your name in the header title - so we see the name Technosailer in the tabs/top of page. It currently just says “[post title] - Technology, Blogging and New Media”. It’s nice when you have many windows opened in addition to tabs, and see them stacked up on your task bar - with a name for easy reference.
Ah forgot to do that. Thanks, Hart
[...] After two weeks of labour, Aaron Brazell has completed the redesign of Technosailor - with key restructuring (or rather, re-architecturing) having taken place. Two new “views” have been implemented to supplement the current reverse chronological blog “view”. They are the Conversation view where recently commented posts float to the top, and the Best Of view which Aaron fills with posts that he feels to be the best he’s written. [...]
Aaron,
wanted to say congrats… looks awsome :)
There is however a weird “checkbox” appearing on the right side, in one of the adverts…
Check it out: http://dropbox.aplosmedia.com/techno-checkbox.png
Regards,
Eric
Thanks Eric. That’s part of the ad.
Hahahaha…
Funny, I couldn’t figure out what it’s purpose was, and I kept clicking it wondering when it was going to take me to some site :p
Too bad the ads aren’t pay per click. ;)
Oh check that, Hart. I misunderstood your comment. Sorry, I do the titles that way for SEO.
Any chance I can take a look inside this plugin?
Not a chance at all. :)
Looove it. Great job, guys. :)
[...] Restructured Blog? Very interesting set of links on how the present chronological structure of blogs might be robbing bloggers of valuable (and returning) readers. If you have not read of Chris Pearson yet or are not subscribed to his blog, here is your chance. Has anyone come up with a nuveau structured theme yet? Related Posts from the Past: [...]
Firstly congrats on the new look.
Nice to read your observations on why you went by this look. The idea of having a good sidebar has really got me thinking on getting to work on my blog sidebar to make it better targetted.
Just one thing I would like to ask is why is your feed http://feeds.feedburner.com/technosailor/YXQk
I mean the YXQk at the end? Is it because of the feedburner redirector plugin?
Ajay: Thanks, yes and it is a Feedburner assigned Feed. :)
I have no idea why Steve Smith made people do that… If you’re already burning your feed you can just put the exising feedburner address into the plugin and it will work…
I think the plugin assumes that whoever’s using it doesn’t know what feedburner is…
Your welcome. It’s great to read how people design their sites and why they did it. Good learning process :)
The Notify me of followup comments below doesn’t have a checkbox to uncheck… or is it just me? I noticed the same on Firefox and IE.
Would love it if you can provide me your comments on my blog…
Actually, it does have a checkbox. It’s up in the adspace in the top right though. Something is nudging it over there but I’m not sure what and haven’t had a chance to work on it. Thats the phantom checkbox that Eric referred to above that I thought was part of the ad.
Love the sailor idea, don’t forget to validate…
[...] Worried Less About Design - I know this sounds ironic since I just launched a new theme yesterday, but design is overrated. I watch some blogs who change themes on a weekly basis and I wonder why. I used to do this too, but readers like consistency and changing themes is mildly disorienting. It’s bad behavior, really. Secondly, I have more RSS readers now than I do regular web readers. Which means it doesn’t really matter what my design looks like to them. [...]
Aaron, I love the design, but mostly, I like the “conversation.” I’ve been trying to figure out how to do the same thing, but just can’t seem to make it fly. If there are any hints you’d care to share ….. Thanks!
Nice, Geren. Another MD blogger. :)
I’ll say it’s all in massaging the Loop. Using the posts_* filters provided by WordPress (but undocumented, so you’ll have to play with them) and a lot of patience. Even once you filter the query through filters, the Loop still likes to reorder the posts by ID so I had to to reorder the posts array when it was all done. It was ugly.
I’d add that I am available for paid consulting/WordPress gigs for folks looking to accomplish similar feats. Email me at the contact address in the sidebar. :)
Thats funny, I couldn’t figure out what was it’s purpose and I kept on clicking it wondering when it was going to take me to some othere site or page.
After reading your article I thought of giving a comment about beauty and to share it with other readers. Beauty is an inherent and innate aspect of one’s being which captivates the eyes of the outer world. In general sense, it is a positive reflection to one’s entire nature.
[...] But, it doesn’t act like a blog! Why are blogs ALWAYS structured in reverse-chronological order? Is there a better way to do it? (tags: technology blogging new+media) [...]
I’ve played with it for a couple days, and I like it. Different than I would have envisioned, but good stuff usually is. :)
I like that “Because Akismet Cares..” graphic. Is that publicly available or unique to this blog? I know my PetLvr blog is up to almost 38000 now .. I think that’s neat - but, couldn’t find it on Akismet’s pages.
It’s not publically available. I got the code from Andy Skelton. He had a widget he wrote for his blog and I twisted his arm to let me use it too. I’m hoping Automattic will include it in the Akismet plugin.
Just a quick not to say that in that last night I rewrote all of the CSS for this blog. All of it…
Most of the issues that have been raised in this discussion have been corrected, and it’s not looks exactly like it was supposed to.
Leave a note here if you have a bug report/further suggestion :)
It’s nice. Maybe by the time I upgrade that petlvr blog from v1.5.2 to a version that supports widgets it will be publicly available. // thanks.
Hi Jonic - while I’m here… the top is still a little weird when the window is NOT maximized (IEv7b3). The right box is all blue with no text, the RSS graphic is below it where the large ad box is … and if you put the mouse over it the orange mouseover shows next to it .. and, the sidebar is moved to below the last entry on the page. I took pictures. 1 2.
Hart: Um, yeah. You need to upgrade. ;) 2.0.4 will be out in days. Recommend you upgrade then as there are significant security issues that are resolved in it that affects all previous versions of WP.
I’ve been slowly upgrading all my sites. The ones with the most plugins takes the longest. PS.. can you edit the code for URL #2 on the 12:39 post for Jonic? Needs
This is a cool idea. But it is not immediately obvious from the name what the conversation view is. And, whatever view you’re in, the little bit of explanatory text below the graphics stays stuck on explaining the standard view.
Oops, thanks, Rick. Will get that description text working. Hadn’t realized it wasn’t working…
Rick - Actually, the sticky text is working. What browser are you using?
[...] So, what are the other ways of presenting your blog? Technosailor offers visitors three different blog “views”. One — ‘The Current’ — is the standard style that we’re all used to, with the latest posts appearing at the top. But the other two are much more interesting. [...]
Strange. I tried it in Safari and Firefox, both on Mac OS X 10.4 and got the same problem. But now I’ve tried it in Camino, Safari, and Firefox, and it works fine. I do think it would be nice to have pop-up text (or whatever you call it), where the explanation appears just by hovering rather than having to try it out before getting an explanation of what it is.
Also, in the Conversation view, “receive” is misspelt!
I hate Trebuchet for long passages of text (just a personal thing I guess) but otherwise it looks awesome :)
[...] Like Technosailor, a revamp of blog architecture has also occured - though “revamp” may be too strong a word. Instead of replacing view modes, I’ve merely supplemented the traditional reverse chronological view mode with another three and a half new views. I have no intention of allowing users to set these supplemental views as default modes, at least not in the near future. [...]
[...] Just like Aaron Brazell at Technosailor, one of the first things I wanted to ensure was that this layout would be optimised for 1024×768 users because my stats show that around 73% of my readers have their monitor resolutions set at this value. Yet, I didn’t want to lose support for 800×600 users (15%) either. So, I opted to go with an elastic design (slightly different from fluid-width designs). This means that the layout will scale according to the size of your screen, up to a maximum and minimum width. In implementing the elastic design, I went with Roger Johansson’s technique as described at 456 Berea Street, where no minimum width was set. By the way, the technique is mostly cross-browser compatible, though a hack had to be used for Internet Explorer (IE) users. [...]
[...] Technosailor: Blog architecture [...]
[...] (Overly) Single Blog-centricAs said earlier, WP was meant to power blogs, so a lot of its features are optimised towards it. It’s hard to move away from a reverse chronological order post listing - meaning no alphabetical order, author-based order, etc., unless you use undocumented posts_* filters (and still have to hack around a bit more), or query your database to draw all your posts and sort them via PHP (it’s a pain for you and your server, trust me, especially since a lot of existing template tags, e.g. the_permalink(), may break in the process). [...]
[...] (Soprattutto) Blog-centrico Come ho già detto prima, WP è stato realizzato per i blog e per questo molte delle sue funzioni sono ottimizzate per questo scopo. E’ difficile passare da un ordine cronologico inverso - cioè da un ordine non alfabetico o per autore eccetera, senza usare filtri relativi agli articoli che non sono nemmeno documentati e che spesso necessitano di ulteriori hack. E allo stesso modo, effettuare query al database per ottenere tutti gli articoli e poi ordinarli tramite PHP. Questo è un lavoro pesante sia per te, che per il lavoro del server, credimi, specialmente perché diversi tag di template possono poi non funzionare. [...]
[...] WP è (soprattutto) Blog-centrico Come ho già detto prima, WP è stato realizzato per i blog e per questo molte delle sue funzioni sono ottimizzate per questo scopo. E’ difficile passare da un ordine cronologico inverso - cioè da un ordine non alfabetico o per autore eccetera, senza usare filtri relativi agli articoli che non sono nemmeno documentati e che spesso necessitano di ulteriori hack. E allo stesso modo, effettuare query al database per ottenere tutti gli articoli e poi ordinarli tramite PHP. Questo è un lavoro pesante sia per te, che per il lavoro del server, credimi, specialmente perché diversi tag di template possono poi non funzionare. [...]