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

280 thoughts on “The New Template Has Arrived!

  1. “CATEGORIES” select options are almost unreadable: text is white and background is light grey-almost white. I have to manually select each option to gain some contrast and read it.

  2. There I fixed it:
    p{
    line-height: 20px;
    }
    #wrap{
    width: 100%;
    max-width: 960px;
    }
    #header{
    width: 100%;
    max-width: 960px;
    }
    .menu{
    width: 100%;
    max-width: 960px;
    }

    This solves the problem of horizontal scrolling when the window gets smaller.

  3. This line spacing is horrible to read and why a fixed width page? It fits in a tiny part of my screen wasting the rest! You may have started this template years ago, it seems you have chosen design concepts that went out of fashion years ago too. The old style was fine.

  4. Being a long term user of Hackaday for many years, I would like to say thanks to the entire Hackaday team (newbies and oldies) for all your work on the site. Being a web developer myself, I know how not everyone will be satisfied with layout changes, especially after many years of being used to a certain layout, but I think you guys have done a great job at maintaining at least some of the old Hackaday spirit and at the same time, making the site look more inviting to new users that are used to today’s website standards. I will agree that the text line spacing needs a little tweaking, but it looks like you already know that!(haha) The site is loading fast and working fine for me on Firefox and Chrome with Windows 7.

  5. With the Greasmonkey script from a hack some time ago, just add the following lines to make the line-spacing bearable again ;-)

    addGlobalStyle(‘.entry-content {line-height: 110% !important}’);
    addGlobalStyle(‘.entry-content p {line-height: 110% !important}’);
    addGlobalStyle(‘.comment-content {line-height: 110% !important}’);
    addGlobalStyle(‘.comment-content p {line-height: 110% !important}’);

    (comment entry also needs to be fixed… looks like that is class “comment-textarea”)

  6. I like the new look, but I think, as it has been mentioned, the spacing between the lines is a bit too much and there is too much horizontal scrolling involved right now. If you can make the text as tight as the old layout, I don’t think there is going to be a problem with adjusting to this new form.

    (Or if anyone can tip me on how to achieve this on my end through Opera, I would be quite grateful)

  7. Had to comment to say how much I agree with previous posters saying get rid of the fixed width.
    Don’t make me rotate my monitor round every time I want to read Hackaday.

  8. It is now unusable slow, unless I block some of the Javascripts.
    Blocking |http://*.wp.com/_static/* means the CPU usage isnt 93% anymore.
    (Mac mini G4 1,5GHz & TenFourFox5 with Flashplugin)

  9. This is not NEARLY as bad as the first template announcement post made it look like it would! Haha

    And I agree with the others about the font. Something’s not right about it, making it not very appealing or easy to read.

    Otherwise looks lovely. I dig the subtle rock-like pattern of the gray background.

  10. I had to block Javascripts from |http://*.wp.com/_static/* otherwise I got constant 93% CPU usage on my old Mac mini G4.
    Sorry for any doublepost. Wasn’t shure if it got posted.

    1. I’m digging around in it and it looks like that may be part of some wordpress infrastructure stuff I can’t modify. Some seems to be associated with the reply function in the comments being different.

  11. generally an improvement, but this design takes a long time to render. i’m not sure if it’s excessive abuse of javascript (google is notorious for this) or html layout tags that account for the difference, though.

    where’s the checkbox that converts my comments to (old-style) all lowercase?

  12. Ok so the doublespacing between the lines has been reduced – but I still do not like the new layout, I don’t lik the extra space between the lines at all it’s not as compact and easy to read because of that and the larger font size.

  13. Great, I like it much better already!
    It’s very good to know that you take the improvement suggestions into account and make fast changes. This was actually one of the first times I commented at all and I’ve been a reader for many years, so thank you once again. :)

  14. I know some of your readers might be old and wear glasses (me) but I find the font size chosen too big. I liked the idea of displaying more information on a page over than less on a page.

    I liked the old style as it made HackADay unique in it’s design rather than trying to imitate all the rest.

    Maybe offer logged in users the option of using the old format in addition to the new one.

  15. Changing a site that is beloved by so many takes awsome courage — and some skill. The old look was familiar, like the looks of an old friend, but now that the old friend has had the facelift, I’m sure I’ll adjust and grow to love the new looks as well. Thanks….

  16. One more remark. I like to have the comments count at the bottom of the article. I usually scroll over the articles and when it looks enough interesting on its own I like to see if there are some comments added.

    See, the sequence is heading, summary, comments and not heading, comments, summary.

    1. I’ll just stop right here and second that. I didn’t mind those fancy colour pictures or capital letters, but the comment counting thing at the end… It was my link to the other world! Now I just keep on scrolling like an insane person!

      1. Oh crap. I forgot to mention, I actually like the new template as a whole. It makes me feel younger. Not that I’m that old, but since an internet minute is like ten outside years, it makes me happy. And I’m drunk. That makes me happy too.

  17. I’m late to the party….but I will say I like the new reply box. Just wish the text was a little darker. I though you guys were going to chuck the white on black, but I am glad to see it is still here for the most part. I only have a few real nitpicks. Like others have stated the green is a little dull compared to the old one. I wish the grey was a little darker, I like the contrast between the comments, but it is a little too light. I also agree with the others on the white space issue, however I like the spacing of the text in the comments. I think you have a little too much space between the borders of the comments. Other than those little things the new look is good with me. I still haven’t tested the other areas of the site yet, but since it seems everyone else has been doing their best to break it I probably wont encounter many hiccups.

  18. i am not sure what you have tried to do but this thing is a mess…..
    there is no right side column the are no links to other related stuff unless you mean in the expanded article.
    the whole thing looks much too large and takes a lot of time to scroll through. this is on firefox.

  19. This new layout looks nice but just takes up a lot of space. I can’t read nearly as much as I used to be able to with the old layout. This is an example of what may be a slide into form before function.

  20. The comment box is white and my text is white on white so my typing is invisible until I post forching the users to change their colors when you could have left well enough alone.

    The font sizes are hard on the eyes. As usual, the site needs improvement. I am typing blind here so I’ll see if I made typing mistakes.

    1. what os/browser combo? I haven’t seen this issue.

      Is it possible you have noscript enabled? The reply system uses js to allow you to reply at the comment instead of scrolling to the bottom.

  21. Scrolls, scrolls some more, then some more. Wow is this the most commented hackaday post ever? Or is it just that there is so much whitespace it seems more? ;-) Great website still, report comment reduction good, leave reply also. Whitespace.. erm!

    1. things still need to be compacted a bit. It is funny that people are getting so upset about whitespace, then requesting the old template… which had the same whitespace.

      the spacing does need tweaked though.

  22. Can’t see which items have been commented on or not.Now you have to click through each one to see if there is any appended info.

  23. I like it. I had just switched over to a new computer and thought it was some settings in Firefox that I had not gotten the same. It’s different without being drastic. Just a couple requests though.

    1) after the first reply in a thread, the report and reply buttons are gone. This is a continuing problem with the old theme, I just was hoping it would have been fixed. Sometimes I want to report a reply not the original post in a thread.

    2) I wish the number of comments was back by the comment section instead of at the top. I think I can live with it though, just take some getting used to.

    3) Once the comments get passed the side bar, it would be nice if they expanded to the full width of the top section. I can understand that may be difficult, as I’ve done some CSS myself.

    1. I forgot #4. It would be if the “follow-up comments via email.” only sent when someone responded directly to my comment instead of every comment.

  24. You’re missing the primary “read” link on every article. I can’t count the number of blogs which talk about a website, yet stupidly hide the link to it. It’s far more important than those useless share buttons.

    Also, the new style forces a horizontal scroll on the main page when it definitely isn’t needed.

  25. Fixed width? really?? it’s terrible when viewed on a wide screen monitor. Too much empty space. Need to make a change so it fills up people’s monitors. If you’re going to go fixed width, at least make it 1024 wide instead of whatever you’ve done (800??)

  26. I absolutely love the new format on my phone (HTC Thunderbolt). The banner could use a slight pattern or something in the background just for some extra detail. Something subtle.

  27. Heck, it’s ahelluva lot better than the template Makezine came up with for their blog. It’s fast & sparse and looks mostly the same as before.

  28. eee-pc 900, Ubuntu, firefox, full-screen: the articles and comments are the full with of the screen (the lines are a bit long to read), and the right-hand panel (with “never miss a hack” and everything below it) appears below the “notify me of new posts” check box.
    It this really supposed to look like that?

    1. The screen is 1024×600 pixels. The Firefox title-bar is folded into the Ubuntu taskbar, so Firefox is nearly the whole screen.
      Ubuntu 11.04 (not supported anymore), Firefox “16.0.2 for Ubuntu canonical – 1.0″.
      And I just found the “problem”: I had HAD zoomed in one step in Firefox. When I reset the zoom, the panel moves to it’s top-right location and the comment width is narrowed to fit.

  29. Long time lerker, few time poster. I semi approve the changes on the site, any way to make those damn reddit, facebook, etc icons smaller?

    thank you for keeping the black and green. if you change that. you lose me.

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