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. Santiago says:

    “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. rafirafi says:

    It’s too contrasted. Too much for the eyes. Please change this.

  3. wilin says:

    Dissaprove.

  4. fomori0rg says:

    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.

  5. Bob Thing says:

    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.

  6. Regular reader says:

    Title font to stretched (tall)
    Doube line spacing annoying -> too much scrolling to do.
    Otherwise nice.

  7. Neil says:

    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.

  8. Jeff Patton says:

    Lots of opinions, too many to read and I may get flamed but I think it looks great, especially on my phone. Good work!

  9. Bertho says:

    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”)

  10. Dude says:

    Title font bad.
    Double spacing bad.
    Otherwise good.

  11. biozz says:

    Meh …

  12. Al says:

    Thank you for the “Return to the top of the page” link.

  13. Fetret says:

    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)

  14. soopergooman says:

    mush easier to read

  15. Jay says:

    I’m digging it.

  16. thanatopsis says:

    The

    Double

    Spacing

    Needs

    To

    Be

    Tightened

  17. mowcius says:

    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.

  18. Goja says:

    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)

  19. Jon says:

    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.

  20. goja52 says:

    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.

  21. nate says:

    It’s strangely… Normal.
    Feels like the old site but while looking nicer.
    Is it what they call improvement ?

  22. signal7 says:

    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?

  23. Haku says:

    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.

  24. fomori0rg says:

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

  25. Dan B. says:

    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.

  26. Dr. James says:

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

  27. Kris Lee says:

    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.

  28. mixadj says:

    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.

  29. dave says:

    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.

  30. John says:

    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.

  31. Alex Rossie says:

    Hey why was my comment removed :( it was funny

  32. Chuckt says:

    Horrible.

  33. Chuckt says:

    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.

  34. ScrollScrollScroll says:

    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!

  35. Frank says:

    needs to be darker, i like everything pure black, not grey, that’s just me though

  36. ace says:

    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.

  37. Trav says:

    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.

  38. Sean Smith says:

    I love this new theme, it’s awesome. Much nicer than the old one.

  39. Rachie says:

    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.

  40. Truth says:

    nope.avi – 45% of my screen is just showing border. 70% if I include the black borders.

  41. nah! says:

    i was totlly shocked when i saw that huge space, but now its ok

  42. Tom says:

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

  43. Thomas Harrell says:

    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.

  44. MrX says:

    Just a suggestion, HaD could possibly use the platform used by slashdot. AFAIK it is opensource.

  45. dudefromthenorth says:

    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.

  46. im very happy you kept the blog layout. God how i loathe the new layouts of lifehacker, gizmodo, and jalopnilk

  47. jaap says:

    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?

    • Caleb Kraft says:

      nope. Any idea what your screen resolution is? Browser version? I’ve seen that happen if the window is tiny.

    • jaap says:

      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.

  48. KillerBug says:

    It wants me to post with an account??? WTF???

  49. jimmythecow says:

    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.

  50. Chris Muncy says:

    The article post time is not there. Can it be put back?

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,486 other followers