If geeks love it, we’re on it

Icrontic v11: WordPress and a new design

Icrontic v11: WordPress and a new design

We’re now running on WordPress, which is at least the sixth content management system (CMS) we’ve used over the years, but only the second commercial one (We had a brief and disastrous honeymoon with E107 in 2003). So, why’d we stop using our custom system? Mostly because of usability: it’s easier for our authors to write in WordPress. WordPress has a lot of features that we’d never had time to add on our own, and it offers a great framework for adding features of our own.

Case in point: our WordPress install is tightly integrated with our vBulletin forums; probably moreso than any other WordPress/vBulletin combo out there. We found a great WordPress plugin to integrate the two products, and then improved it to offer even more integration. To my knowledge, we’re the only WordPress/vBulletin site on which you can seamlessly comment on either the article or the forum thread and have the conversations merged. Our authors’ information and settings automatically updates from their vBulletin profiles rather than needing to maintain separate accounts. As we move along, expect to see avatars in the article comments and more integration. We’ve been preparing for this transition for two months, but it’s never enough time to do everything you want.

I’m particularly happy with the upgrade because we didn’t break any news or article URLs in the process (including multiple pages); every article is exactly where it was before. In fact, old URLs from Short-Media articles (that’s 2 CMSs ago) should STILL continue to redirect to the right place. Not only that, but this upgrade actually added “new” content: the 20042005 Short-Media news archive that went offline with our last platform change is back once more, including images and tags. Speaking of tags, we imported the entire tagging structure into WordPress, and it’s much more flexible now, so hopefully we can have some fun with that. There’s also a review category once again to narrow things down when you’re just tooking for products.

Of course, this wasn’t just a CMS change, it was a design change (our 11th, it turns out). Jared, Greg (fatcat), Rob (Thrax), Matt (Nomad), and other staff members went on a digital retreat and created the essence of what is our new layout and look. Cheers for that! Also, thanks to Peter (Buddy J) for his serendipitous exclamation “We’re on it”, which is now our tagline. And, thanks to Portzebie, of TF2 fame, who created the cartoon version of our logo that appears as a watermark behind Hot Threads on the forum. Expect to see him popping up more over time (and soon).

Then the forum had to change to match. As usual, we have both light (default) and dark themes. There’s a lack of polish for most of the buttons in the dark theme; an unintended consequence of how I made them. That’ll be fixed soon. I ran out of time for forum hacking. More important are the hacks I did accomplish, which I hope will improve usability. I completely overhauled the navigation bar to include (only) the links that people actually use, and I streamlined the Control Panel to be easier to navigate and read. In keeping with the overall design, you’ll notice a lot less “grid” in the forums. Also, the Hot Threads, Latest News, and Icrontic Byte now appear at the top of forums and threads in addition to the index page. I did this to encourage further perusing by our many guests, so I hope that works out.

Lastly, Archive.org is a very cool thing. Courtesy of that site and the Warrick recovery tool, I present the August 8, 2000 original article by Mortin that kicked off Apu’s Hardware (the precursor to Icrontic), which was imported to the new system as the first post. Then, you can slog through the 8,700 posts that follow it. Better get started now.

OK, seriously… no more CMS or design changes for a while. This one needs to last for at least a year.

Comments

  1. jared
    jared Great work Matt!

    !beer Keebs Blue Moon
  2. Garg
    Garg Nice work, Keebs!
  3. primesuspect
    primesuspect Fantastic! The design is tight, the code is tight, you're a true guru. You're on it :p
  4. GnomeWizardd
    GnomeWizardd looks amaizing in dark!
  5. PurplezArctic
    PurplezArctic Thumbs are teh way up.
  6. Zuntar
    Zuntar Zuntar:respect: to Keebler.

    Very clean looking!! black theme is waaay sexy!:cool2:
  7. Nomad
    Nomad Much better looking. One thing about the forums though, the buttons are black, I feel like they'd be better suited as the blue.
  8. PurplezArctic
    PurplezArctic It does!

    But I hope to see those buttons getting touched up.
  9. Linc
    Linc
    Nomad wrote:
    I feel like they'd be better suited as the blue.
    Tried that first and didn't really like it. Plus, they stand out much better this way, which is important for new users.
  10. Winga
    Winga one word.....slick
  11. revorocks
    revorocks OMG this is soo wierd. Today, i was on icrontic, and it was on its old theme, now i just reskinned my xp to and then go on icrontic and you guys have reskinned!
    How strange!
  12. GnomeWizardd
    GnomeWizardd Why not ORange for the buttons?
  13. Linc
    Linc
    Why not ORange for the buttons?
    The same reason they're not chartreuse.

    I spent about 18 hours creating the vBulletin templates. I assure you everything was a conscious decision based on either preference or time constraints. I'm grateful to hear about bugs or usability problems so I can fix them, but color selection is around item #521 on my to-do list right now. ;)
  14. Thrax
    Thrax I'm going to agree that the buttons should be blue in all the themes. They look seriously out of place as these big, black blobs (even more out of place in the dark theme).

    The other thing: Not having a 1px border between rows and columns on the thread or forum listings looks weird.

    Otherwise, everything looks phenomenal. Love it to bits and pieces.
  15. Garg
    Garg
    Thrax wrote:
    I'm going to agree that the buttons should be blue in all the themes. They look seriously out of place as these big, black blobs (even more out of place in the dark theme).
    The big reply buttons at the top and bottom of the page look weird to me in black, but I do appreciate how the reply buttons in the posts stand out nicely. Maybe a dark blue similar to that used at the bottom of the gradients?
    Thrax wrote:
    The other thing: Not having a 1px border between rows and columns on the thread or forum listings looks weird.

    I miss the 1px border between the Forum and Last Post column. The lack of other borders is growing on me.
  16. CB
    CB I like the black buttons.
  17. Nomad
    Nomad I think some padding on the right and left side of the forum would be pretty useful was well. My monitor is 1440x900, and it's annoying reading from one side of the resolution to the other all the time. 100-200px of space on the left and right would be much appreciated.
  18. PurplezArctic
    PurplezArctic Srsly, borders and padding are ftw. Where are they?

    I'd like to complement on the layout of each posts buttons, with the exception that they could use a different colour. The top portion of the website, title bars, icons all look outstanding! Great job!
  19. jared
    jared
    The other thing: Not having a 1px border between rows and columns on the thread or forum listings looks weird.
    Srsly, borders and passing are ftw. Where are they?

    I think the front page looks great and the new forum themes are looking slick.

    However, like others said, I'm not sure why you tried to ditch the borders/colors that define the typical rows and columns of the forum.

    Having the list of threads (and its contents) just "floating" around in a void of white/black is messy imho.

    I don't remember exactly what colors/borders you were using in the previous theme(s), but they got her done well.

    cheers
  20. fatcat
    fatcat on the main page the word "Navigation" overlaps the ad above it in Opera and Chrome. It doesnt do this in Firefox or IE
  21. fatcat
    fatcat ok its doesnt do that all the time, must be certain ads are the wrong size.
  22. UPSWeezer
  23. GHoosdum
    GHoosdum ^5 Keebs. How much tea did it take?
  24. Linc
    Linc
    Nomad wrote:
    I think some padding on the right and left side of the forum would be pretty useful was well. My monitor is 1440x900, and it's annoying reading from one side of the resolution to the other all the time. 100-200px of space on the left and right would be much appreciated.
    In vBulletin, I have two options: dynamic or static width. I chose to leave dynamic because people would flip out if I did static. Given that, if I put a 100px padding on it, what would that do to the folks at 1024? They'd be viewing the site through a porthole. If the page is too wide, don't maximize your browser on a widescreen monitor. ;)
    fatcat wrote:
    on the main page the word "Navigation" overlaps the ad above it in Opera and Chrome. It doesnt do this in Firefox or IE
    Yes, this is an actual issue: the ad space serves up a slightly larger ad sometimes, which doesn't fit in the given space. This has to do with our ad service. I'm not sure how I'm going to fix it yet, but for now a refresh will frequently replace it will a "normal" size ad.
  25. Linc
    Linc
    GHoosdum wrote:
    ^5 Keebs. How much tea did it take?
    Including the test run, it was 7 cups plus a Cherry Coke. :crazy: And then a Sam Adams Brown Ale and Thai food while watching Thunderball to unwind after I had enough bugs squashed.
  26. GnomeWizardd
    GnomeWizardd
    fatcat wrote:
    on the main page the word "Navigation" overlaps the ad above it in Opera and Chrome. It doesnt do this in Firefox or IE

    Use one of that latter, problem fixed
  27. LIN
    LIN Class act. :thumbup
  28. UPSLynx
    UPSLynx Awesome man, really great work. It's kind of odd though, like trying to deal with painting your room. you know you like the new room, but it just doesn't feel right for awhile.

    Very tight design. And seems pretty efficient. Job well done, man!
  29. MAGIC
    MAGIC
    It does!

    But I hope to see those buttons getting touched up.
  30. DogDragon
    DogDragon Keebs, You did it and it looks Great :respect:
    Now take the day off and enjoy. Have a drink :beer::cheers:
  31. pigflipper
    pigflipper He should drink some of the rocket fuel as a reward; he doesn't need all that brain power anymore.
  32. pigflipper
    pigflipper I've seen every design, redesign, CMS, and general cluster**** this site has had to offer when upgrading, hacking, or switching servers. This was one of the smoothest transitions with minimal down time that this site has ever experienced.

    WTG Keebs, thanks for keeping the Icrontic spirit alive and well with new technology.
  33. GooD
    GooD Great job Keebler !

    You made the best technical place on the Internet even better :respect:
  34. Khaos
    Khaos I think the new skin looks really clean. Great job with it Keebs. The fact that even more archived content came online with the change in CMS is phenomenal.

    I have a few suggestions, for what it's worth:

    First, the header on the forums is really large when viewing forums and threads on a 1360x768 display; enough so to get pretty annoying due to all the scrolling. I imagine that it is pretty bad at 1440x990 as well. If the area displaying the hot threads and news could be collapsed down to the size that it is in the CP areas, that would really help people who are browsing the forums with lower resolution laptop displays. Attached super awesome picture to illustrate this point.

    Second, I would like to see the navigation links to various sections on the main page displayed with more prominence, but maybe that's just me.

    I actually like the black buttons -- you just need to fix the white anti-aliasing fuzzies around the edges. I am sure blue would work fine as well, but having the buttons large and black makes them relatively easy to find and click, but also not too distracting.
  35. SPIKE09
    SPIKE09 OK I had resisted the dark theme but F' me it is easier to read :bigggrin: grats keebs
  36. bullzisnipr
    bullzisnipr Love the new design, it's a keeper.
  37. Zanthian
    Zanthian reply.gif SO HUGE!!! Otherwise, the site looks good.
  38. Thrax
    Thrax Apparently new users are color-blind and can navigate only by overwhelmingly large shapes. ;)
  39. Kwitko
    Kwitko
    jared wrote:
    However, like others said, I'm not sure why you tried to ditch the borders/colors that define the typical rows and columns of the forum.

    Having the list of threads (and its contents) just "floating" around in a void of white/black is messy imho.

    Agreed. It doesn't look right to me without the separation.
  40. Shorty
    Shorty My comments are already known. The new look & CMS are teh WIN.
  41. Clutch
    Clutch I love the new layout. Great work team.
  42. muddocktor
    muddocktor I think the new layout of the forums are ugly and kind of suck myself. I much rather have the borders and colors instead of this ugly white blob of nothingness.
  43. Thrax
    Thrax Like, what... OCForums? :rolleyes2
  44. muddocktor
    muddocktor
    Thrax wrote:
    Like, what... OCForums? :rolleyes2

    At least they have some folks that actually post tech stuff instead of BS.:tongue2:
  45. primesuspect
    primesuspect That has a lot to do with the look of the forums too, Mudd :rolleyes:

    Thanks for coming in tonight and being absolutely nothing but negative, unfair, and unhelpful :shakehead
  46. Linc
    Linc In response to feedback from several people, I've added a dotted border between forums and threads to improve legibility. Look for other minor tweaks to crop up as I work though our list of bugs and usability issues. :)
  47. jared
    jared Keebs that already looks 10x better with that border. ^5 :D
  48. Garg
    Garg That's a nice subtle tweak. Thanks Keebs!
  49. Thelemech
    Thelemech Great work General Keebler, the site is looking awesome.:thumbup
  50. muddocktor
    muddocktor Keebs, the borders added back in make the new design much better to look at. Good job man; it's much easier for me to read now. :thumbsup:
  51. Garg
    Garg Today was the first day I noticed the ticker on the main page. I didn't think we had it anymore. That's because it's not visible on my laptop screen until I scroll down to about the third news post. 1440x900, maximized browser.
  52. Thrax
    Thrax We did that on purpose. We decided that they weren't quite useful enough to feature prominently, but not quite worthless enough to drop altogether. They provide traffic from us to other sites, which builds good karma.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!