Presto Chango
After almost five years of running Mike Industries, it’s time for a change! The fact that I made it this long without redesigning is either a testament to the majestic timelessness of the original design or my general uncomfortableness in doing “self identity” work. Since we know there is no such thing as timelessness on the web, we can therefore assume it’s the latter.
This redesign had five objectives, in order of importance:
- Make shared items such as found links, video, and photography more a part of the overall content presentation. I still write original posts 1-3 times a month, but it’s nice to keep things fresh in-between as well.
- Refresh things visually with a wider layout, new typography, and a fuller footer, among other elements.
- Modernize and completely rewrite the code that was brought over when I switched from Movable Type to WordPress a year ago.
- Offer more feed customization, including full-text RSS.
- Don’t break old pages with the new design.
… and away we go:
Bringing multi-source aggregation into the fold
It’s easy to take posts from other places like Delicious, Tumblr, and Twitter and display them in various places around your blog. It’s a bit harder to ingest those same posts into your blog’s publishing system and then output them as actual native blog posts that people can comment on. And finally, it’s incredibly hard to do the second thing in a way that’s flexible enough to display many different types of content in many different contexts.
Getting to the first stage would have been easy via a few lines of javascript, and in fact, I already got there with the previous design, embedding my Delicious links in the Mike Industries sidebar.
In trying to make it to the second stage, I tried several different “aggregation” plug-ins for WordPress, but eventually settled on a wonderful little creation called FeedWordPress, by the one they call “Rad Geek”. After installing the FeedWordPress plug-in, you simply give it some feeds to suck in, tell it how to categorize and tag items from each feed, and then let WordPress templates do the rest.
I was originally going to move over all of my link-saving from Delicious to Tumblr because I love Tumblr’s posting interface, but since my Tumblr account got hacked within a couple weeks of opening it, I decided to only use the Tumblr account to post fun stuff like videos. My initial reflex was to move all “collecting” to one platform, but since everything is getting pulled directly into the main blog anyway, I’ve convinced myself that the use of multiple platforms is actually a strength. I’m essentially pulling my Tumblr and Delicious feeds into the “Shared” column and my Twitter feed into the “Overshared” column.
I am unconvinced that Twitter will be a permanent part of this blog, since I still don’t enjoy either publishing or reading many tweets, but I’m giving it a try to see if it sticks. Twitter’s rising popularity continues to amaze me to the point where I’m almost ready to officially consider myself “too old”. On the one hand, I totally understand it because it’s so easy. But on the other hand, I totally despise it because it enables such laziness and extravagance of expression. Anyway, that’s a conversation for another blog post.
The single hardest part of the entire redesign was writing a script that ensured no items in the Shared column would render wider than the column itself. Since there will be plenty of YouTube video tags in there, it was essential to resize them all as the column renders, but not permanently in the database, so that they can render at full size when viewed from the permalink pages. I am no Wolf with regular expressions, but after hours and hours of hackerations, I came up with this:
I cribbed part of the short scale_image_240 function, but the rest was from scratch. Beforehand, I searched for quite some time on Google for a function to do exactly this and couldn’t find it, so hopefully this post will help some future searchers in their own quests to resize content.
Even though running these computations when the sidebars render isn’t too computationally ferocious, I went ahead and “widgetized” my sidebar in WordPress as well, so I could make use of the excellent WP Widget Cache plug-in. WP Widget Cache writes your entire sidebar out to disk so that it can be served up quickly and statically.
Ok, now that the geekiest part of the redesign has been explained, on to hopefully more interesting matters…
Separation of different content types
As much as I love what Doug and Dave have done with their superb redesigns, I just don’t like displaying original posts and peripheral content in the same column. I may not be the most prolific original post writer, but when I write an article, I want it front and center, and not pushed down by links or other distractions. With this redesign, the flow is simple: the most important stuff is on the left, the semi-interesting stuff is to the right of that, and the barely-interesting stuff is to the right of that. Size also flows according. The wide column is important, the medium column is semi-interesting, and the narrow column is barely-interesting.
Typography
sIFR lives on in the new Mike Industries — of course — in the form of Trade Gothic Condensed. While I don’t think sIFR should be used in every project (we don’t use it on Newsvine), I still find it an invaluable method to really shine up blog design. The first version of Mike Industries used Agency Condensed rendered with sIFR 2, while the new version uses the aforementioned Trade Gothic (a Stan favorite) and sIFR 3.
By the way, I don’t usually like to call fellow developers out, but I will say this about sIFR 3: it’s beautiful and it’s been ready for at least a year, in my opinion, and yet it’s not officially “released” yet. I find this highly unfortunate. When you’re developing software for the web, it’s never going to be perfect. As long as your software generally works and isn’t causing any damage, release it. The entire web is a beta. The entire web is a hack. It always will be. Don’t fight it. If you’re on Release Candidate 436, that’s a sign you may need to let go a little.
Aside from the Trade Gothic, Mike Industries now uses Helvetica Neue for body copy and downwind headers. I am certainly no devotee of Helvetica, like 90% of the people in the film are, but with anti-aliasing so much improved in the last decade, it does make for some good readability these days. Plus, I just needed to get off the Lucida Grande/Verdana bandwagon for awhile at least.
Grids, shmids
I feel like grids are the new web standards. What I mean is that they are a potentially useful tool to achieve a noble means, but they aren’t the second coming of the messiah. If grids help you do great work, then by all means learn them, love them, and live them. But if you’re perfectly happy eyeing layouts as a drunken painter eyes a canvas, then eye away. I’m no painter, but I’m plenty happy creating layouts without the use of grids or any sort of sizing heuristics. I don’t make sure my main column is sized according to a golden-ratio and I don’t make sure every line of type lines up vertically with every other.
I just do what feels right… and that’s plenty good enough for me. You should do the same, whether or not that involves the use of grids.
Feeds revisited and reloaded
Due to popular demand, I am now pushing out full text RSS feeds. I would still rather not publish these because of content theft and other reasons, but in the end, my reticence should not trump the will of my subscribers. I’ll try it out and unless I notice widespread plagiarism on spam blogs, full-text feeds will probably continue.
Also, after running this poll about a month ago, I’ve decided to include original and shared items in the default RSS feed (the one you’re probably already subscribed to). According to the poll results, most people want to see interesting links and other stuff in the main feed, so that was the justification. If, however, you find the shared items superfluous, please switch over to the Articles Only feed. I hate the idea of anyone unsubscribing entirely because the main feed is now updated too often.
One thing I can’t seem to figure out is how to correctly enable the “all” feed in WordPress. For all of you WordPress gurus out there, I basically applied a filter to my existing “/blog/feed” feed to remove the Overshared/Twitter categories. It is as follows:
function exclude_category($query) {
if ( $query->is_feed ) {
$query->set('cat', '-473,-281');
}
return $query;
}
add_filter('pre_get_posts', 'exclude_category');
That correctly takes the stuff out of the “main” feed, but I need to provide another feed with everything in it. Something like maybe “/blog/feed?all”. I figured I should be able to just modify the line above to:
if ( $query->is_feed &! $query->query_vars['all'] ) {
… and it should work. It doesn’t. If anyone has any ideas, I’d love some help on that one (or another way to do it entirely).
Big footers are in
My footer now contains a lot of what was previously in my sidebar and more. I’m not sure how I feel about this yet. On the one hand, I like big, informative footers. But on the other hand, I don’t like burying such potentially important stuff so low on the page. If I end up getting rid of the Overshared column, some of the footer content may end up replacing it.
Backwards compatibility
Originally, I wanted to find a way to keep old blog posts in the old theme and style new blog posts with the new theme. I like this idea because it preserves the context in which posts were originally written and it also doesn’t break heavily designed posts like this one. In the end though, I was able to keep my main content area the same size as my old one, so the new theme really didn’t break any entries, so I have — for now — decided to move everything to the new theme. This decision is definitely subject to change though as I really don’t want to be tied to a 450 pixel wide white column for the rest of my life.
So anyway…
So anyway, that’s it. I’m pretty excited to get this rolled out, but at the same time there are still details that need some shining and bugs that need squashing. If you see any, give me a holler in the comments. Thanks!
Mike, nice re-design. =) Like you (and nearly everyone these days), I pull in my Tumblr, Twitter, and even my shared item from Google Reader into my web site, alongside my blog. Although I caught a quick glimpse of your Twitter content getting into the feed, its nice to see you’ve cleverly created multiple feed types for this content.
Any particular reason for linking your tweets into their own in-site pages instead of liking directly to the tweet’s page on Twitter?
I think the new design looks great. I love the shared and overshared columns and I think you’ve carried the same feel over from the old site (in a good way).
Kudos on the redesign. I really like that when I first visited this page I wasn’t blown away by how different it was. Now you’ve certainly done more than just tweaked your old design, but it still does feel comfortable and a tad familiar. Definitely feels a lot “cleaner” than the old design.
I also really like the shared and overshared columns. I’m always trying to figure out what to do with non-“article” posts. I agree with your preference to keep the main posts front and center, and this is as good an idea to actually do that as any I’ve seen.
I feel like there are some subtle visual design connections to your House by the Park site; was that a deliberate choice or does that just illustrate your tastes at the moment? Or am I just imagining that?
I’m a little surprised that your resume and portfolio still get slots in the top nav. You’re founder and CEO of a company you’ve already sold to MSNBC, and you’re hoping someone will see those and offer you some other sweet gig?!?
Kidding aside, this is a killer redesign.
Greg: Thanks. Yeah, the Twitter stuff should be out of there now. The reason I am linking to the internal permalinks is that I just don’t like the way “conversations” happen on Twitter. I tend to lose track of them. Who knows if people will actually comment on them here, but if they do, I will probably be more motivated to Tweet.
Rob: Interesting. It was probably subconsciously done. As for the résumé stuff, yeah, you’re right about that. Haha. I guess I just didn’t really feel like changing any of the top nav stuff yet. In time, in time.
Mike, Love the redesign. Good work! It’s simple to look at, and yet powerful and strong.
I’m glad you have a Main feed and separate Articles Only feed. Could you also do a Shared only as well? I’m one of those guys who likes to have real original articles coming in one category and all the “of interest” shared stuff kept in an area of its own as it isn’t as important usually. Is this a pain?
Scratch that, just remembered how WordPress allows you to do that automatically through categories. We’re all good! :)
Hi Mike, looks good!
For some reason, looks like ass in Newsfire though:
http://skitch.com/davebarrett/bdwb1/mike-industries-post-in-newsfire
The only bug… is not really a bug. But your widespread use of sIFR stubbornly rails against the rapidly-gaining use of the latest browser nerdtoy ClickToFlash. For a second I’d forgotten, and simply thought you’d fallen in love with translucent gradient boxes.
The redesign itself is fantastic, though I’ll wax poetic about the old layout. It’s gotten so endearing to view over the years.
Looks great Mike, congrats. An excellent re-design and re-brand. Love the full-bleed feature images.
Your inline styles on the top hat image are breaking RSS readers with HTML rendering capabilities. See the above linked:
http://skitch.com/davebarrett/bdwb1/mike-industries-post-in-newsfire
Looks great, but totally messes Vienna’s layout.
Looks good! The only bug I have found is that there was no title to click in NetNewsWire on this article to actually get to the blog to see it!
I love it Mike! It’s a great transition from the old theme that, in my opinion, was timeless.
I must say, I’m a big fan of your site. The redesign looks great. You managed to keep it very clean, yet fit so much information in. I like the large footer and even though you stated that you do not like having such important information at the bottom. I think that everyday blog readers would figure that “archives,” etc. would be somewhere and look at the bottom if they needed to jump to a different section. Very nice :).
(Oh, one note. I went through and for some reason the links on the portfolio aren’t working in Firefox on my computer, but it works fine on Safari. Not sure if it’s something or just my computer.)
I really like the redesign, and the typography is wonderful.
Guessing you did most — if not all ;) — of the design checks in Safari. Why the guess? FF 3.0 renders colors differently, which I despise. All your header graphics are off color.
Really loved the design evolution of your site. It still retains some flavor of the previous version and thats what I find most interesting. Like you mentioned, I don’t think the longer footer makes any sense, especially when you’re blog page is running to a great lenght! The only annoyance (if I may call that) is the rather huge text in the footer explaining Mike Industries. Somehow its not gelling well with the layout. Apart from that, great job!
Liking the new look. Helvetica is a nice change, I am kind of Lucida and Verdana -ed out myself lately. And the new footer… well you know what they say about websites with big feet…
Anyway, awesome job as usual.
Looks great Mike! Very strong but simple. Love the shared and tweeter feeds, and really like the way their incorporated on the side. Good Job
Kudos on the design. However, what happened to the “live” pictures of the Sound? Since I am a native to the area, I enjoyed seeing what it was currently looking like!
Indeed Mike, we shall miss the live Seattle weather status. ;)
I definitely approve of the redesign. It gets straight to the point, and I do like how you’ve emphasized the 3 types of updates in the columns.
My only issue would be your avant-garde use of Twitter. I agree w/ Greg that these should really just link to your Twitter feed, and in fact should not be part of your WordPress feed. That’s why Twitter allows people to follow each other, and that’s really the place where it should stay. However, I too started using Twitter when I redesigned my site because I wanted something on there that would frequently update. But to push it to the RSS feed rather than keeping Twitter traffic on Twitter seems like the wrong choice…
I like the look a lot. And I appreciate some of the insight in the decisions you made. I am redesigning allenhuntshow.com (it desperately needs it) and some of the things you have shared and the stopdesign.com page you put in the “shared” column is very helpful.
[…] nieuwe custom buttons in Google apps zoals Gmail. Zijn redesign valt in eenzelfde lijn als dat van Mike Industries. No bullshit, […]
I love the new design, but for some weird reason your site is eating up 30-45% of my Macbook Pro’s CPU in Firefox 3 when the page is open. This results in the fan going into jet-engine mode :(
Other comments:
– The footer is great – keep it.
– Having image and video content in the Shared column and resized appropriately is awesome. I may have to steal this tactic.
– [This would definitely be a violation of the golden ratio, but,] maybe either the Shared or Overshared columns could collapse in article mode? The content (especially the youtube videos) is a little distracting and makes scrolling slow [I promise, my MacBook Pro is a 2.4GHz Core Duo ;) ]
– I’m pretty sure r436 is just the latest SVN revision number of SIFR 3. Regardless it’d be awesome if it was released. ;)
Fantastic re-design Mike. Also, I once remember getting dinged in English for saying “uncomfortableness” instead of discomfort. Just thought you’d like to know.
I’m digging the new design, great work!
Although I do miss the live cam of Puget Sound
Nice job, Mike. A CEO who designs his own personal site and blogs about building a house. Rad.
As a follow up, what is the strange “deke” redirect on submit?
David, Bradley, Adrian, and John B.: Yeah, I’m learning that one of the disadvantages of moving to full-text RSS is that styles which look great in a web browser can really fuck up a newsreader. I am probably going to run a filter on the feeds to strip the styles.
Devon: Yeah, ClickToFlash is evil in my book… but of course I’m biased. :)
Monique: Interesting. I haven’t touched the portfolio Flash movie in like 5 years. Will look into the links.
Jason: What do you mean about the colors looking different in Firefox 3? In the two instances of Firefox I’ve tested, everything looks the same. What OS are you on?
Dan and Brade: Yeah, since I moved out of my last condo, the view hasn’t been as good so I shut it off for now. Once I move into the House though, there will be a live cam that puts all others to shame.
Greg and Brade: Yeah, that’s a good point about Twitter. I think I’ll keep them permalinked via the Comments link, but will also link back to the original Tweet.
Nick: I definitely thought about collapsing the sidebars in article mode, but I think one major benefit of having them there is for the random person who comes to the site for the first site via a search engine or a link somewhere. Having the sidebars there gives them more to do, more to evaluate the site on, and more motivation to think about subscribing. Also, I think you’re right about the svn release thing. Still. :)
Ben: Yep, you’re right about uncomfortableness v. discomfort.
John: The “deke” is a little javascript-based method I’ve been using for years to eliminate comment spam. Basically, nobody can hit my WordPress comment script directly, therefore, 99.9% of spam is turned away at the front door… without even having to use Akismet.
Mike,
Hope this helps… Versions:
FF 3.0.6, Safari 3.2.1 — both on Mac OS X 10.5.6.
Screenshots of header:
http://980media.com/static/img/ff3_mike.png
http://980media.com/static/img/safari_mike.png
The footer graphics are the same.
If you figure it out, would love to know… I had to drop it for a while.
-Jason
Great job with the redesign–not only the look, but the production quality, too! Congrats!
Jason, I also have Firefox 3.06 and Safari on a Mac and the colors are the same for me, verified with DigitalColor Meter (the blue header is #6A798D in both). (And I’m on FF3 in Windows now and have verified that is the same color here too).
Perhaps you have an extension in Firefox which renders colors with Windows standard gamma instead of Mac?
This is the only thing I can think of that would make the difference.
I’ve been meaning to comment on this for a while now, but I kept getting interrupted and it’s been in my “to-read” list for about a week now. Anyway, I’m late to the party, but it looks great, and I like the attention to the little things. Thinking about the RSS feeds, how you really want to share your content, and what’s best for the Mike Industries readership. Anyway, it looks and works great and I can’t wait for “The House” live cam. Jerk.
Jason: Thanks for the screenshots. And Nick, thanks for verifying with the color meter. The only thing I can think of is that maybe your color depth is set to “thousands of colors” or something? The Flash headlines are given the exact same hex values for the backgrounds as the html backgrounds are, so somehow, your system is rendering Flash colors differently than html colors. Can’t imagine why, but it’s clearly happening.
I’d say chalk it up to a Gremlin. I disabled all extensions, it still shows up as such. I know my setup allows millions of colors as Safari is ok, unless there’s some setting in FF that allows it to revert that I just don’t know.
I run an interactive media division at a “old” media company; I know one-offs happen. It was just weird as I’d never seen this.
Congrats on the switch to full feeds. Have you considered using FairShare (fairshare.cc) to track where your feed content is? Might help you detect and stop any abuse that does happen.
Let me know if I can help in some way.
Hey Mike,
I love the redesign! Very beautiful! I also love how some parts of the new design maintain some of the feelings from the last version. Great work. ;)
For your feed issues, have you seen this:
http://dailycupoftech.com/2007/07/25/creating-custom-wordpress-feeds/
Going that route you wouldn’t have to filter things in custom code. Just include the filter options in the URL. Then if you still wanted it to work like “mikeindustries.com/feed1/” “mikeindustries.com/feed2/”, etc. you could simply use some custom rewrite rules. That way you’re not reinventing the wheel with custom filtering code like you’re doing now and instead using what WordPress already has.
Hey Mike – you may know this already, but your RSS feeds breaks for this post… not a biggie, but thought i would mention it if no one else did so far.
Jonathan: Will check out FairShare. Thanks!
James: Yeah, I will probably just have to do the mod_rewrite thing to take care of this. The only thing that’s making it hard is that my *default* feed doesn’t include everything.
Pallian: Yeah, I need to start stripping styles from my feeds unfortunately.
Hmm. That’s odd!
Well, I also just found this: http://codex.wordpress.org/Customizing_Feeds
That might also be a good reference.
Took me a lil while to see it (I was prepping for my brain surgery on the 4th), but I have to say I like the site updates, Mike. I wish my recovery state allowed me enough of my normal wit, but let’s just settle with this: nice.
One of these decades I’ll have time to get my personal site refreshed…
Holy crap.
Both completely startled and at the same time, quite impressed. Like the new design!
Like the site design and colour choices, but why diss grids?
They are a great way to establish a horizontal rythm without overusing borders, making the design lighter on the eyes and generally less chaotic. Right now, I have 2 grey bars on the right side of this comment field w/o content that distract me for no particular reason (because of their contrast) and that don’t line up properly with the lines in your footer. I realise that studying graphic design makes me more likely to be irked by stuff like this, but I still say grids are grrreat.
Plus it may seem extra trouble to design on a grid, what with all those templates out there. But in all honesty, I design the grid right into my first sketch and just size the divs accordingly. It’s easy breezy lemon squeezie.