Mike Rundle's Weblog

A New Way Of Doing Archives?

I've been working on Hi, Mike for the past 5 days or so, and it's coming along 10x faster than I thought it would. It looks really tight, and in my opinion, I think lots of people will love it. But anyway, this post is about how to display information on a weblog, because I'm not totally convinced that we're all doing it the correct way.

The Elusive Entry

I'd guess that 99% of my readers who have weblogs have a separate "archives page" or group of pages on their site (Adam's the only one that comes to mind that's opposite ...... got any other examples?) that link to either months, or categories, or some other combination of blog entries grouped by metadata. It's a fact that weblog templates start you off in this mode — the idea that the recent entries are on the homepage and older ones are in a different part of the site is one that's perpetuated by almost all of the main blog applications. Okay, it's a majority thing, but should it really be that way? Have there been usability studies done with bloggers that asked them how they actually use weblogs, or find older entries, etc.? I'm not aware of any, but I could be wrong.

Anyway though, is the separate archives section such a great idea? To me, it's worthless, and I'll tell you why: I don't use archives or search. That's right, I've never liked archives, or the idea of a search, in any weblog that I read. The reason is because if I thought a weblog post was good enough to warrant a second look, then I bookmark it. Or I remember the title, and just Google it. I think Kottke has the right idea in the way he does archives, but it's not absolutely perfect. Either way, if a post is important enough to me it'll stick in my mind. Has this ever happened to you?

"Oh man, there was a blog post on that cool new comment bubble icon like two weeks ago but I have no clue what weblog it was on. Now I need some inspiration for ________ and I wish I could find it, but I don't know where to look!"

It happens to me a lot. Weblogs are becoming very anonymous now because I read them all through Bloglines and all the content mashes together so I don't know who writes what anymore. All I know is that 1) I remember a recent post about something that is now very interesting to me, and 2) finding it would kick ass, but 3) I don't know who wrote it, so I don't even know where to start. In this case, blog archives don't work because I don't know which weblog posted it, and also, blog search boxes are useless because again, I don't know which weblog posted it. By now I usually turn to Google, start piecing together what I remember of the post, and then through backlinks I usually find what I'm looking for. So long story short, I don't use blog archives much because if I'm looking for something I just use Google anyway.

Show Readers What They Want

Weblogs are interesting from an information display point of view because entries are categorized both temporally (when they were posted) and categorically (Design, Cats I Like, Family, etc.) and both are important factors when reading a post. If I'm reading about a new Flickr feature, I want to know if this post is dated 1 hour ago, or 4 months ago, because the older one I probably already know about. Or if I'm at a designer's site, and the past 10 posts are all about their new home, I want to skip ahead and read the cool Photoshop tutorials which are all part of the same category.

So because of this, I think I'm going to get rid of the typical archives section on Hi, Mike.

Weblog posts will have more associated data listed alongside the content. Stuff like "Here are 4 more entries that are also about Mac OS X" or "Here are the latest entries that have the most comments" or "These 5 entries have the most inbound hits from Google queries." It'd be cool if I could read a post, then see 5 more posts that are on similar topics that I might like to read. Think Amazon and their "related books" page sections. Instead of lumping all archives together in one section, I want to make it more organic by distributing relevant archive sections on each page where they are within context. So if you're on an individual entry page, you'll see a listing of posts that are related to this one, or were written in a similar timeframe. To me this seems more logical and user-centric, but I could be wrong. Does this sound like a good idea?

Reader Comments

I've said this before, but I'll continue saying it until the day I retire (like 5 years from now *crosses fingers*): reader comments are the most important thing on a weblog. Someone, somewhere, thought your words were important enough to put his or her life on pause and write something that will appear on your website. They put down their phone, stopped IMing for a second, stopped paying attention to music, put down their book or magazine, paused their lunch, just so they could give you feedback and let you know what they thought. I think that reader comments should be given a lot of visual weight in the design of a weblog, and himike.org will do just that, more-so than my other designs.

Design Inspiration And Sneak Peek

I've been told that some of my sites look similar, and that I have my own personal style, which I definitely agree with. I've also been told (recently by a potential client) that he didn't think I was capable of branching outside of my portfolio and doing something different than my usual work. I'm not totally sure how sites like To-Done, BusinessLogs, or TCB all give off the same design aura, but regardless, my new site looks nothing like anything I've done before. And to prove it, here's a sneak peek :)

Abandon Ship! But Not Yet

I'm not totally sure what the timeline is for this transition, but soon (or not so soon, depends on my time, I'm hoping soon) my web presence will be himike.org. There will be no more phark.net, and there will be no more new posts to this Typepad weblog. But lemme explain!

I'll continue to pay my Typepad subscription as to keep this blog up and ready for the thousands of Google-generated pageviews it receives everyday. I'll be importing all my Typepad posts to the new weblog on himike.org, and I'll be decreasing the number of categories down to about 6. Right now there's about 30 different categories that my posts are jammed under, and that makes it nearly impossible to correctly navigate to a specific post if you're moving through my archives (which suck, I know.) My goal is to take a painstakingly good look at the taxonomy of this weblog, condense categories down and together, and then import the posts over to the himike blog where the categories will be better, more organized, and simpler to navigate through. But how am I going to move traffic from one to the other?

I'm going to ghetto rig the Phark Typepad templates with some crazy Javascript to make sure that (almost) every page will redirect to its associated himike.org page. This will most likely involve lots of experimentation and crying on my end, and might fail, but will probably succeed. The problem with Typepad is that I can't just drop .htaccess files anywhere because it's hosted, so I need to blend Javascript with MovableType template tags to string together some sort of redirect system. Yeah, my fingers are crossed.

Phargin' Iceholes

Phark's just not doing it for me anymore. As the site owner, I can't even find stuff that I'm looking for. Some entries have 50+ comments since their writing, but those aren't featured anywhere special even though users have deemed them as special entries. If I'm looking for a specific post, instead of navigating through my treacherous listing of categories, I go to Google and start typing in what I remember, because fortunately, Google loves Phark like nobody's business and it always delivers. An unworkable archives section is so 2003 ..... look for a usable system on himike.

Hi, Mike. Show me your website.

"Hi, Mike." will be different from what people are used to for Phark, or weblogs in general. Most (if not all) websites are from the "I'm a website and I'm going to show YOU stuff" instead of "I'm the user, hear me roar, show me what I WANT to see." "Hi, Mike." will be different. Much different. My website is here to cater to its users, and that's exactly what my new site will do. Rethink the way you deal with navigation; think now in terms of a site giving you precisely what you want instead of what is typically shown after a series of clicks. This will be my site, but it will be your site as well. I have many ideas about how user interaction should be, and this site will be the prototype of these ideas in the wild.

So what are your thoughts? This site is your site too, don't forget.

I Pull a Kottke (Sort Of)

I have a very large announcement to make:

I'm now blogging, blog consulting, and running a blog network full-time.

I also now live in beautiful Raleigh, North Carolina with my beautiful girlfriend in our beautiful apartment.

Don't Micropatronize Me

Just because I'm pulling a Kottke (sort of) doesn't mean you guys have to support me. The goal is to support myself through these blog-related efforts, so we'll see how it goes. I figure that if I can't turn the 50,000 people that visited 9rules the other day into some sort of rent money, then I'm no good at what I do. And I usually think I'm good at what I do :)

What This Means For Business Logs

This means that there will be more article-length entries (like these two) and some more goodies of which I cannot speak about yet.

What This Means For 9rules

This means I can now work harder than ever to make The 9rules Network more useful for readers and writers of great content sites. The feedback so far has been absolutely incredible, and I'd like to thank everyone who checked out the new 9rules site and gave us any feedback. We're trying very hard to listen to our network members and readers, so keep the feedback flowin'.

What This Means For Phark

Hopefully, this will also mean that I'll be blogging more frequently here, but you never know. I try to make it a point to only write about interesting things so I don't bore my audience, so when more posts start showing up on this blog that only means that more interesting things have been happening to me. We'll see what happens :)

Thanks To All Of You

I would never have been in this position had it not been for my readers. Thanks for everything, y'all.

Wave That Musical Baton

I've been brutally hit over the digital head with the musical baton meme by my buddy Marko so I guess that means I have to do something with it. I think I'll swing it around and see what I can hit...

Total volume of music files on my computer

I just did a Get Info on my Music folder and it's way larger than I thought .... almost 11GB. See, that's the problem with having a massive hard drive (or an iPod) — your new goal in life is to fill it up. Want a good way to get gigabytes of music really, really quickly? Go download StreamRipperX, set it up to some internet radio stations overnight (found easily via iTunes Radio), and then go to sleep. The next morning, you will have gigabytes upon gigabytes of perfectly ID3-tagged MP3s ready to listen to.

The last CD I bought

Hmm, actually I bought a CD the other day. My Dad wanted The Doors Greatest Hits for his birthday so I bought it a little over a week ago. I think the last CDs I bought for my personal collection were at a used record store: Rammstein: Sehnsucht and Chemical Brothers: Surrender.

Song playing right now

"Speed of Sound" off Coldplay's soon-to-be-released album "X & Y." I usually find a song and stick it on repeat for a few hours while I do work ... last night was "All is Full of Love" by Bjork.

Five songs I listen to a lot, or mean a lot to me

Wow, this is a tough one. So many songs directly bring back memories so it's tough to pick a top five, but I'll try. In no order...

• "Forever and For Always" by Shania Twain
• "Clocks" by Coldplay
• "Colorblind" by Counting Crows
• "Two Points for Honesty" by Guster
• "The District Sleeps Alone" by The Postal Service

Five people to whom I'm passing the baton

• Darice
• Nicole
• Matto
• Jakob
• John "Feedburner" Zeratsky

Yeah!

A very Brady moment courtesy of Adium.

The Car Blog: Launch and Design

The Car Blog is a go! TCB (The Car Blog) is a blend between a car forum, a weblog, and an online magazine, and is a place for car people to go and vent or rant about the world of automobiles. I did a better job of explaining the site on the About page, so go check that out if you want more. This blog entry isn't about explaining what TCB is, it's about giving you the nitty-gritty about the design decisions I made, why it looks the way it does, and the CSS ballyhoo and tomfoolery that powers the visuals. So let's get into it!

Beginning Design Thoughts

Successful car site design incorporates heavy imagery and a deep sense of visual amazement, because when it comes down to it, we like to buy and look at cars that we think look good and car websites are the same way. When I started out sketching initial concepts for TCB, I knew that we needed a solid header graphic that incorporated big-time car imagery for some off-the-bat visual punch. I went over to my favorite photo resource, stock.xchng, and found this gorgeous photo of a Ferrari 360 Modena against a blue sky. After some Photoshop color-shifting and slicing, I achieved an effect that I think lures your eyes down the page more because of the slicing's vertical orientation.

The typography choice for the logotype is DIN, even though I was originally considering Interstate. Both typefaces are examples of auto-specific fonts, where in the U.S., Interstate (or an identical twin) is used on all interstate highway signs. Just look up at the green rounded rectangles next time you're driving, and you'll noticed the slanted ascender tops which are its dead giveaway. I ended up choosing DIN because it is the German equivalent of Interstate, and I love German cars. DIN is one of the most recognizable sans-serif typefaces out today, and if you just look around a little bit, it'll pop right out at you. Oh, and the B-Logs font is Myriad Pro, but you already knew that ;)

Advertising Design

I've never been fully in control of a website that has advertising on it before, so I was really excited to make the ads on TCB not as ugly as other ads on the web. Coudal and John Gruber have done a fantastic job deploying text-only advertisements on their pages that are integrated into the design, and I went to school on their examples in order to make the TCB ads work as well.

We have three different ad placements on TCB, and each one has their own design style and physical area on the page. The "Premier Ad" is underneath the Leading Article area on the homepage (as well on top of the content in the individual entry pages) so because of its placement, it needed to be tightly integrated with other elements on the page so I wouldn't throw-up when looking at it over and over. I reused the blue from the header graphic and navigation to get the color scheme for the Premier Advert box, and then kept the rounded-box metaphor going as well. The top part of the div was done using a background image (nothing fancy), and I used a superfluous display: block'd span element underneath it to round the bottom as well.

The advertisement at the top of the Shortlinks box needed to 1) not look like an "ad", and 2) blend into the style of other shortlinks. What I did was simply use the same style as other ones (except not in an unordered list, and no light grey background) and add a background image on the bottom that alerted users that it was an advertisement in the same manner as the Premier Ad on the left. If your gamma is correctly adjusted, the background of the rounded "ADVERTISEMENT" rectangle should match the lighter grey underneath other entries over there.

And then underneath the Shortlinks box we have our third category of ads — the least intrusive, and also the least "styled". I made these simple because once your eyes get to the section of the page where those ads would be, you're most likely reading the main page content and I didn't want to force a visual saccade over there which would throw your reading off. These don't have rounded edges like everything else, or do they? And this brings us to our next section.

CSS Tomfoolery

When we were talking about the design of this site way back in the summer, we decided the baseline browser would be IE6, which makes development a whole lot easier. The cool thing, also, about developing for high-level browsers is that we can do things with the CSS that we normally wouldn't think of. Some of that stuff included Mozilla- and Safari-specific styles to spice it up a bit.

-moz-border-radius — A Mozilla-specific style that rounds the corners of a block-level element. It was used in those instances where I felt multiple divs just to accomplish a rounded corner effect wasn't necessary (like the light-grey shortlinks entries, as well as the advertisements underneath the shortlinks). Also, enough people are out there using Firefox so I thought a nice segment of the population would benefit from such stylings. And if you're like me, and use Safari instead of Firefox...

text-shadow — This effect was implemented in the latest version of Safari (Jaguar users, I think you're out of luck) and it looks wicked cool. I actually use this effect extensively on the homepage: the current navigation tab text, the leading article title, the leading article subtitle and category, the author/comment count div, the sidebar links, and also in the footer. So if you're using Safari, you get an extra treat that others don't :)

The navigation of the site uses an inverted tab style that I've used in the past, and thought it would work well here too. Sliding doors are in effect, however I've been using that technique since before Doug gave it a name :) Some really intricate-looking design effects were achieved quite simply by using background images. For an example, the navigation tabs appear to overlap the underlying color, but that entire unordered list just uses this background image to make it appear complicated. Also, to make the Shortlinks header appear to be offset from the Leading Article header, I just stuck that image in the navigation's background as well. Boom! Effect achieved with no CSS headaches.

Even though in the header you can click on both the TCB and Business Logs logos, the top header graphic is all one image. In an effect similar to the old imagemap idea, there are two divs up there with transparent backgrounds that "cover up" where the clickable areas appear to be. You can see this for yourself if you hover about 20px left of the left edge of the B-Logs logo ..... it's still clickable.

Final Thoughts

This wasn't the most complicated CSS design I've worked on (the gov't work I did was, go figure) but it's the design I'm most proud of. My test for a website is if I get sick of the design before I even launch it, but for this one, I was excited to show off my work and see what people thought and haven't gotten sick of it yet :) This site is also really rewarding for me because our writers are very influential people in the design community (Jason Fried, Carlos Segura, Didier Hilhorst, to name a few) and working with them on a project was really great.

This site wouldn't look like it does now without the help of my usual beta testing and feedback team: Paul, Matto, Nigel, Mike, and Alex. Thanks guys.

And that's it. What do you guys think? What would you change? Any bugs? Let's hear it, good or bad.

For the Windows users in my audience, here is a screenshot of what the site looks like with Safari-rendered text-shadowing. Makes you want to buy a Mac, eh? :)

Eat My Shorts

For those who did not see my comment on an earlier post, the link log is now up, and it's called Shorts.

phark.typepad.com/shorts

Shorts RSS Feed

I'll be incorporating that HTML into the ever-changing main site design at some point, but that URL is good for now.

A Linklog?

I've had some people request that my weblog have a link log — a super-frequently updated space with quick links to fun things I find. I think it would be useful, because then it would save me from writing a real post about killer bunnies, because if I had a linklog, I could have just posted the story to that instead of wasting all of your time :)

What do you think? Would you read it? Would you subscribe to its RSS feed?

Phark: Happy Anniversary

Sorry about the design guys, I caught the redesign bug on Saturday night so I'll be messing with this site until it looks decent again. Which very well may take a long time :)

I really wanted this post to coincide with the very first weblog post I ever wrote for this site, but totally forgot about the actual date :) It was posted last July 7th — when I was working/living in Chicagoland — and it represented the beginning of something truly amazing.

Since that first TypePad post, I have written 169 more (in a year, not too shabby) and am loving the weblog medium more each day. Now that it is 1 year old, I'd like to share with everyone things that have happened in my life this past weblog year, my favorite posts, and what's to come.

Things That Have Happened

Job in Chicago. Got a UI design job at Streams (now part of Dunn Solutions Group) where I worked on UI and UX (user experience) design, and forced CSS down designers' throats. I'm sure they appreciated that :)

Image Replacement. What started it all, the Accessible Image Replacement weblog entry that was mentioned on Zeldman, Stopdesign, SimpleBits, Mezzoblue, and a whole bunch more. That entry hit #5 on Blogdex for a three-day period, landed me a web magazine editorship (on the DL at the moment), and an invitation to the "big boys club" of web designers. Nothing is more rewarding than receiving dozens of email messages a week thanking me for the technique, with commercial website URLs that use the method. The reason you're here right now is because of that, otherwise, you would never have heard of me.

Leaving the Girl. Not too much to say here, I ended a sucky relationship and my entire life turned around for the better.

Cool Roommates. I've blogged about 2 out of the 3 (Adam and Chad), but they were all major factors in how great last year was for me. They play golf, design websites, write PHP, and love cars... what more could I ask for?

USATODAY Interview. I was interviewed for an article in the USATODAY regarding the Eolas lawsuit against Microsoft. I thought it was kinda cool, my parents and entire freakin' extended family thought it was much cooler :)

Virginia + Job + Girl. The only reason that I am working in Virginia this summer is because of my amazing friend Heather. She was interviewed by the same guy from the USATODAY with whom I spoke, and I found her website through his. Her family let me stay with them during the interview process, and I really can't say enough about her. She's the best ;)

The Company. BusinessLogs was launched a little over a month ago, and it's been one big whirlwind since then. Book editing offers, magazine interviews, tons of web publicity, and great clients have made it all very exciting. I can't wait to see how it all turns out. It wouldn't have happened without Matto and Paul, so cheers to them as usual!

The Present and Future

The great thing about this website is that I can contact my readers from anywhere in the world. It doesn't matter if I'm in Virginia, at some random Wifi-enabled Panera in Chicago, chillin' with Paul in Tampa, or at school in Rochester. Besides my family and friends, this website is one of only a few true constants in my life, and it will always remain that way. I start my final year as an undergraduate at RIT in the fall, and may end up staying there for my Masters for the following year. Either way, I'm extremely excited about going back and writing about all the events yet to come.

This website will continue to change (sooner rather than later... and by sooner I mean real soon), the content will still be as varied as ever, and I'll still be writing for only one reason — my readers. The reason I write in my weblog so much is because I get about a thousand people a day here to read what's on my plate at the moment. Nothing excites me more than to see an unfamilar name leave a comment somewhere, because they took the time out of their own schedule to tell me their thoughts about my thoughts. That invisible connection is what draws me back day after day, and this website would not be anything without you. My readers are what makes this website thrive, and I owe it all to you.

Thanks for a great year everyone, and I'm sure that these next 12 months will be even more interesting. Graduating from college. Getting a job — or staying for grad school. Love, college life, usability, design, technology, golf and just plain old random shit.

Mazel Tov! *cling*

Popular Information Retrieval

I know you've said to yourself before: "Self, where in world did Kottke find the link to that weird movie? How come Boing Boing is rockin' the cool links, and I never find anything cool? Why is it that my linklog feels more like a news story regurgitator than a fresh treasure box?" I know how you feel, I've been there, and am usually "still there". So I'm going to give out some hints on how I find interesting websites and where I find them.

Hit the news sites

I visit the Drudge Report and CNN all day long. But in the past few weeks, I've changed my news aggregating ways so that I can breeze through more information, more quickly. In my feed reader of choice, I have a folder that is dedicated solely to news RSS feeds. I have every RSS feed listed on the Reuters syndication page, most of the Bloomberg RSS feeds (you can find them on MyRSS), and some other news sites. But those are just the tip of the iceberg.

Gettin' random wit it

I love to check out del.icio.us to see what other prople find facinating today. For beginners, I recommend the "popular" page which lists the most frequently linked webpages for the past 24 hours. From there, you can find the link to the Popular RSS feed, which is another feather in your fresh content finding cap. If you are addicted to information like me, you can subscribe to del.icio.us RSS feeds straight from the categories you find interesting: like funny, cool, business, design, and many others. These are updated constantly throughout the day, so make sure to keep your aggregator open at all times!

Blog aggregators

Blogdex is an amazing resource to find out what the blog world is into at the moment. I found out about the Weblogs.com meltdown almost a day before everyone else in the blogosphere did because of judicious Blogdex surfing. Once you find something interesting, "Track the Site" to find out who else thinks it's cool as well. Find out what they had to say about it, who else they linked to, who links to them, who commented, and so on. You'll be amazed at the information you can find only a few levels of separation away from the source.

Blogosphere RSS

I can't tell you how many hundreds of RSS feeds from weblogs I subscribe to, but generally it is all the most popular ones. I like subscribing to Comment feeds as well, because then I can find "new people" from which to find information. The feed list is constantly changing, because I delete and subscribe to feeds all the time.

Basically, that is where I find my information. News sites, geek sites, blogs, design sites, aggregators, and bookmark sites — I'm definitely an infoslut. Separating the cream from the crap is a small price to pay to find interesting stories, and once you get linked from a site like Slashdot or MeFi, you'll find that all the pain was worthwhile.

BUSINESS LOGS LAUNCH

My heart is pounding as I write this. I have butterflies fluttering in my stomach worse than I ever have had before. My fingers are shaking as they strike the keys on the keyboard because I can't contain my excitement anymore. And guess what y'all? I don't have to contain anything anymore, because...

BusinessLogs (businesslogs.com) is officially live, public, accessible, and rockin'!

We will be writing a detailed case study of the design process at a later date, but for now, I want to thank each and every single person who linked to us and got the word out. You are the reason we will be successful, and Los Tres Amigos wish to thank you very much.

Comments are off on this entry so we can keep all conversation regarding the company contained on Paul's weblog. I think it'll be easiest that way. Please comment over there, Matthew, Paul and myself will be watching the developments like a hawk for the next few days :)