The New Template Has Arrived!

When we decided that our template needed a remake several years ago, we knew it was going to be a long and difficult process. We offered you a chance to give us some input in a recent post and now we are releasing the first iteration of the new template.

For those that saw the mockups and gave us your opinion, you will be happy to see we actually listened to many thoughts and incorporated them in our final design.  We worked with some people at Google to determine what features should be tossed and what to keep, and what we have ended up with, is what you see. We also acknowledge that not everyone will love the change, but we feel it is a move in the right direction. We’re really happy how it has ended up.

I want to offer a special thanks to [Stephanie Froehner] who put tons of time into making this template pretty, even if it has been hacked and slashed a bit since then.

Join me after the break for an explanation of some of the new features and upcoming features.

New features that are active right now:

  • Related hacks: After each story there are links to 5 hacks from the same category.
  • Staff picks: In the right column is a section for “staff picks” each week the staff agrees on a select few posts to add to the “staff picks”.
  • Social media stuff: You can now connect to social networks easier. We’re not forcing that on you. Don’t worry.

Features we plan on implementing soon:

  • Popular categories list in the right column: Displays a list of the categories that have posts with the most comment activity.
  • turn on the lights: a button to switch to a light colored theme for those that find the black and green to be too high contrast.
  • Possibly a new commenting system: There are several other systems available to us. We need to do more research before making any decisions.

Fixes slated to happen in the immediate future: (we will be fixing things. We won’t be doing everything anyone asks).

  • double spacing: needs to be a little tighter   fixed
  • post titles shouldn’t change size when you click on a post   fixed
  • favicon needs uploaded    fixed
  • related post formatting is not there for some reason.
  • speed improvements (changing the social buttons at the end of posts just helped a bunch) — ongoing

Comments

  1. rhqq says:

    generally looks much better, however tittle font is slightly to tall

  2. Mike says:

    In before everyone hates change

  3. Julien says:

    What new template?
    /me is far far away

  4. Squirrel says:

    What’s with the favicon?

  5. Corey says:

    Love the new look!!! Great choice!!!

  6. Harry says:

    Well. It looks nice, yes, but it takes almost a minute to load the pages on my aging laptop and the pictures on the right are in my peripheral vision while reading.

    How about an option to get the old template back? I was quite attached to it.

  7. mosheen says:

    I really have a hard time reading the site with the extra space between every line and object. It makes the page breaks look even smaller, and really feels cluttered. Other than that I like it.

  8. Russ says:

    I’m strictly RSS myself, but the site looks nice! Change the favicon, though.

  9. dooglehead says:

    I like the new style, although I think the large line spacing is a little weird.

  10. looks good :D

  11. David says:

    Definitely hate. There’s no font size where it looks good.

  12. Chris Muncy says:

    Caleb, check your fav.ico, it’s wrong.

  13. Chris Muncy says:

    I too do not like all that spacing between lines. Other than that <3

  14. NewCommentor1283 says:

    layout changed… is this going to be every month from now on, like youtube and ect?
    … they change thier “look” ever so slightly every month(edit few months)… and NEVER(edit: rarely) fix bugs.

    time to bookmark the retro-H.A.D. site? hopefully it still looks the same?
    the less rich the content, the less there is available for change? lol

    PS: it now looks more like a blog now, i guess thats what the people want? (it IS a blog afterall)
    …but NOT looking like a blog is what appealed to me in the first place, oh well, nothing (good) lasts forever.

    to summarize: its the TEXT content that is MOST VALUABLE anyway, so as long as you guys do NOT switch to a video only, im okay with it.

  15. Matt says:

    I like how it has kept the old hacker style.
    The related links’ font seems quite large and imposing on the main content, it looks more consistent at size 14px, with the titles at 18px.
    And the search bar ‘submit’ button is off by a pixel in chrome Version 23.0.1271.64 m its kind of distracting with the high contrast colour scheme. If you change the line height property to “line-height: 18px;” that fixes that…

  16. rockets4kids says:

    My vision went to crap when I turned 40 and I am a huge fan of whitespace, but I *still* find the new format a bit ridiculous…

  17. Jeroen says:

    Looks great!

  18. gnounc says:

    Pros:
    -got rid of the 6 differently named links to contact hackaday
    -search looks like its no longer google search
    -layout looks like it wastes less space

    Cons:
    -loads EXTREMELY slowly <–biggest issue
    -missed an opportunity to unify the shop forum and blog themes.
    -The green is a faded green and looks washed out against the gray.
    overall its a little harder to read than before.

    A step in the right direction though. Good job

    • Squirrel says:

      Would you all mind posting some details what setup you have if your loading is being slow so that we can look for patterns?
      I personally have (and for me it loads plenty fast):
      i5 2500k
      16GB RAM
      Win7 x64
      Chrome: 23.0.1271.64 m
      Broadband internet (over wifi)

      • James says:

        Youtube of a couple of page loadings with network activity and console output:

      • cutandpaste says:

        For what it’s worth, it seems reasonably speedy on my Q6600 @2.4GHz, under Win7 x64, using whatever the latest Firefox build might be today.

        The only thing slowing me down is the need to constantly scroll to get any reading done, and the weirdness about horizontal layout that I described above.

  19. thedoktorj says:

    I assume it’s probably because I use ctrl++ to raise the size of text, so I can read better, but the navigation at the top is halfway hidden.
    Home, Submit a tip, Forums, and Shop are all halfway hidden behind the content area. This was not an issue with the old layout. Not saying change it back, just something you might want to check on.

  20. mikemac says:

    I think the title font is WAY too big. I also find the double spacing of the text makes it harder to read. The one article I looked at so far had a confusing photo as the one “Related Link”. (From the URL, it had something to do with a calculator.) I’m used to looking for the Comment count at the end of the front page summary but I’ll probably get used to it’s new location. I personally could care less about all the facebook, twitter, et al buttons at the bottom of every summary. Couldn’t they be moved to the actual article page with the comments instead of wasting valuable front page space?

  21. trying to help says:
  22. Sidebar, way too distracting. it’s more emphasized than the main content.

  23. Kris Lee says:

    I think that this new design welcomes an adblocker.
    With previous design I actually saw many times something worth clicking but this one is too intrusive.
    I think that I know what the problem is: the ads do not fit into layout – with the old layout the article, comments and the ad between them shared relatively the same width – now the ad is splitting it into half and is to noticable even when it does not atract me with its content. Perhaps it would help when you do not align it into center but left.
    The same applies to the top ad. When the old one felt even welcoming then this one is irritating me. I do not know a good fix for this.

  24. qwerty says:

    Title is too big, text lines should have a smaller space in between, fonts at the right side sections are generally too big (both title and text). Colors hurt the eyes: green is too much green, white is too much white.
    Not bad for being the first release, though it need some serious improvements to be desirable over the old one.

  25. Ralph says:

    Line height is a little much and the H4 is way too heavy.

  26. Iw2 says:

    I don’t know whether it is a bug or a feature, but on http://hackaday.com/2012/11/16/avr-minecraft-server-lets-you-toggle-pins-from-the-virtual-world/ there is one span with color set to #00e. You might want to look into that.
    Also, I feel like the lines are too far apart while the titles are too large for long texts (e.g. “AVR Minecraft server lets you toggle pins from the virtual world”).
    Overall though, I like the new theme.

  27. Zeron says:

    What’s with he double-spaced lines? Are we in elementary school?
    Looks really poor on the tablet. So much waster screen space.

  28. gnounc says:

    Now that i read the comment on moving twitter facebook et al to underneath the posts, i agree. the sections under that in the sidebar could use that valuable real estate to better effect.

  29. Analog says:

    I’m not having any problems with loading times, and I’m glad there’s now a drop-down box for categories, The new look is a little cleaner and more refined, but the font choice and sizing does leave a bit to be desired. Thankfully that’s an easy tweak. I have no complaints about the color scheme as it stays true enough to the HaD we’ve all come to love and the ‘turn on the lights’ addition that i’ll never use will more than likely satisfy those whom would otherwise whine about the color scheme. All things considered I view the new template as an improvement that will be even better once it’s refined a little.

  30. Kaj says:

    My only complaint about the layout is the comments section – it’s a bit narrow. After you get below the article and the sidebar, I feel like ~60% of my monitor is dedicated to displaying black & gray.

  31. OldVamp says:

    Have a hard time reading it.
    too tall vertically
    too mushed together horizonitally

  32. Dan Gray says:

    Please condense the line spacing. Too much scrolling required!

  33. Anybodysguess says:

    I’m going to have to jump on the line spacing is too big bandwagon.
    Also it loads WAY slower, on both my windows 7 and vista computers, eithernet for the first and wifi for the second. Both chrome browser.

  34. Joshua says:

    I would say make it a bit wider to and also the line spacing is a bit off alot of scrolling just needs some fine tuning i like the general idea tho

  35. Brian Neeley says:

    Overall, I like it. I DO NOT care for the enlargement of an article title once you click on it; it becomes WAY too big.

    It loads fine for me: (Win 7/IE 8 over a major university network). I wouldn’t be using IE, except our IT dept. won’t load anything else :( .
    It also looks good on this widescreen. My biggest complaint about HaD’s (old) layout has always been that a majority of screen real-estate wasn’t used for the actual article. This is much better IMVHO.

    PostScript: I am not sure if I like the new look on my smartphone (Motorola Axia and Dolphin).

  36. Stu says:

    I like it! But im looking at it on an android 4 tablet so its likely to look slightly different on PC.
    One point, having to scroll all the way to the bottom of a long comments page to leave a comment is a bit of a pain.

    • Hitek146 says:

      You should already be at the bottom when you are ready to reply, having already read the other responses first, in order to ensure that you do not duplicate a previous response by another poster, otherwise uselessly clogging up the thread…

  37. neal says:

    Sadly it’s not good on a small screen netbook, it doesn’t adjust to the screen size available. continuously scrolling over to the right and back to read is tedious. Plain HTML (ala retro) is much more “content enhanced”, the text neatly fills the visible screen

  38. notmyfault2000 says:

    I also throw my vote in with the line spacing being too much. Perhaps 1.5em instead of the somewhat ridiculous 30px you have it at now?

    For the colors, I’d suggest #DDD for the “body,p,select,textarea” rule and #3C1 for links.

    Yay for Firefox’s live CSS editing!

    Also, for your font declarations, one thing that drives me nuts about those @font-face generators, there’s a reason @font-face has the “font-weight” and “font-style” styles: It lets you do “font-weight: bold” for bold versions of a font and “font-style: italic” for italic ones (and a few others IIRC but CBA to look up). So your Droid Sans Regular could be “font-weight:400; font-family: DroidSans” and Droid Sans Bold would be “font-weight:700; font-family: DroidSans” (or whatever it is) and poof, bold things automatically work. Anything else is more work than should be done.

  39. L says:

    The line spacing is something that I find ridiculously gigantic.

  40. bp103 says:

    I like it, I have one small suggestion. Change text color from #FFFFFF to #BEBEBE It seems a bit off balance.

  41. sneakypoo says:

    This is the first site re-design that I haven’t had an immediate allergic reaction to (example: Gizmodo…). Good job guys

    Oooh, but if you don’t keep the commenting system sane I will do terrible things to you. Like… say obscene things behind your back. Yeah, that’ll learn ya!

  42. kikkoman says:

    For the sake of readability, use a serif font. Pretty please….

  43. Dale says:

    I am sure I’m over reacting but this just looks like you pulled a Word press theme off the web, added your logo and said bam we are done.

  44. fatmanx says:

    It’ a LOT slower than the one before, I counted 11 seconds of DOM on the first page and we’re talking i7 and a LOT of RAM on srware iron v 22.
    There:
    Load timings (ms)

    Event When How long Sum
    Redirect 0 0 0
    DNS 0 0 0
    Connect 19 138 138
    Request 157 175 313
    Response 332 0 313
    DOM 405 11419 ***11732***
    Interactive 993 0 –
    Content loaded 993 36 –
    Load event 11824 60 11792

    Hope this helps

  45. gabriel says:

    bring back the old white on black text. the new almost white on slightly dark gray is awful. Offers no reading contrast at all. may look good on a designer screen with lots of ipsum lorem. but as soon as you read two entries your eyes are already tired.

  46. Why is the favicon a G?

  47. Phroon says:

    I miss the display of the number of comments on the main page. It let me know how much discussion there was on a topic.

    • Matthias_H says:

      +1

      • Phroon says:

        Huh, it’s at the top of the article now. I swear that wasn’t there earlier.

        • Haku says:

          I still don’t like the new layout despite the space betwen the lines being reduced (it should not be there at all, it wasn’t before), and the number of comments being moved to the top of the summary is wrong.
          Now all the fonts are bigger and there’s space betwen the lines you have to scroll down to read the article summary and then scroll back up to read the full article and the comments. WTF?

          • Haku says:

            That is scroll back up to click the link to read the full article.
            And we stll can’t edit our comments :(

          • smilr says:

            Agreed – I’m so used to having the comments link and count at the bottom of the article text. It makes sense from a usage flow: read the summary through, when finished – click on comments link to discuss. Scrolling back up is an irritation. I could click read more anyway – but if I can’t see the count I don’t know if there have been any (or any new) comments to read before I follow that link.

  48. Really disappointed you guys did not migrate to a far more superior framework than wordpress. Drupal would have been a far better option and would have allowed better scale-ability, not to mention that it could have been built in half the time and things would be running much faster

  49. Jonas W says:

    Looks good but i feel it’s much harder to read, don’t know why.

  50. Masta Squidge says:

    Way too much wasted space, WAY TOO MUCH WASTED SPACE. And for whatever reason it loads slower than frozen molasses moving up hill against gale force winds. A fixed width web page is very 1995 guys.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 94,628 other followers