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

277 thoughts on “The New Template Has Arrived!

      1. +1 ! About 38 lines of text on a 1200pixel screen. Ridiculous! Adjusting the vertical line spacing would help a lot. (is that what you meant by “double spacing” in the “to be fixed soon” section?)

      2. Agreed!
        There’s too much space between the lines of text in the article summary and the comments.
        I very much appreciated the compactness of the old layout, please bring that back!

      3. Holy whitespace, batman! Seriously.

        And I can’t find (Firefox, W32, huge window on a 1920×1080 screen) any zoom setting that either uses more than 2/3 of my browser width (deadspace, batman!) introduces a horizontal scrollbar (wtf?).

        As I write this, the textbox is only about 2/3 of my browser width. I can hit ctrl – and it gets smaller, but if I hit ctrl + it gets huge AND grows a scrollbar.

        I want my screen realestate back, or at least some consistency.

  1. 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.

  2. 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.

  3. 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.

      1. mmm i guess it shows through that i have never checked it out
        anyhow, while we are at it (brainstorming),
        maybe a mobile version of the site?
        for viewing on an older cellphone screen at 128×128 pixels
        so we can read text(edit: recent articles), in a _ h o r i z a n t a l _ manner,

        instead
        of a _
        vertical
        _
        manner

        PS: not all cellphones can scroll horizantally, so the text gets wraped.
        you end up with two lines of text taking one or two whole pages!

  4. 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…

  5. 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

    1. 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)

      1. 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.

  6. 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.

  7. 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?

  8. 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.

  9. 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.

  10. 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.

  11. 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.

  12. 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.

      1. We have 1.3 Mb/s internet connection here, so stuff never loads lightening fast, but the old hack a day format loaded pretty fast, but the new one doesn’t. Its the more and bigger pictures, they cause the page to load slower than it used to.

      2. And I just noticed, do you think you could add replying to a reply, I really like that feature on instructables, and we need it here. Also your favicon is messed up, either that or i’m totally missing the point of the G.

  13. 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).

  14. 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.

    1. 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…

  15. 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

  16. 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.

  17. 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!

  18. 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

    1. It appears to be an issue with some extensions though; firefox behaves much better, but has almost no extensions installed. Anyway, there’s always Stylish to bring back the old template for the change-o-phobics like me :)

  19. 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.

        1. 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?

          1. 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.

  20. 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

  21. 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

Please be kind and respectful to help make the comments section excellent. (Comment Policy)

This site uses Akismet to reduce spam. Learn how your comment data is processed.