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. Also, at least on chrome, the back button is 100% useless after posting a comment… Possibly before too though I haven’t checked it yet. I hit back and it takes me back… then hitting back again bounces me right back to where I started.

  2. Caleb, if you can point me towards a tool that I can use to get some diagnostic info back to you I’ll help where I can. Laptop specs: P4 non hyper-threading, 768MB ram, 128 shared with video. Never had an issue with HaD loading slow previously. 10Mb/s cable internet, hits consistently close to that using speedtest.net, network settings optimized for large file transfers and video streaming. Chrome’s developer tools Audit is showing not so good things, fair amount of 404s in the console (this might be it), plenty f room for improvemen *AHEM*. I don’t have a good way to get this info to you, I cant find a ‘save to file’ button.

  3. Did anyone bother to render this on a iPhone?

    Narrow title font: ugly
    Extra spaces between lines: meh
    Feedback form is grey on dark grey: Seriously?!?!

    What happened to the mobile skin? Im thinking I should just switch to RSS.

    1. whats cute is, the website is (and i put this in massive sarcasm quotes) “responsive” when you drop down below a certain width when scaling the browser.

  4. The problem with loading is probably due to the fact that your HTML is in the wrong order. Just watching the status bar (well, it’s not exactly a bar in Fx anymore), you can see extra stuff loading before it’s really necessary. There’s a bunch of JS (digg, linkedin, facebook) long before the content, so all that stuff tries to load before we get something that’s actually readable.

    Additionally, there are a few 404s: jquery.js, which seems to be a relative link, so it will almost never work; two fonts (eot and woff), Oswald and Droid Sans, not sure where those should really be, though.

    And yea, the line spacing is wayy too big.

  5. heh yeah too spaced out, font could be smaller,
    there’s a speckling on the background that’s a little annoying… looks like noise from the glow (photoshop layer effect) you could turn down.. or just lighten the background if you want a different color, honestly i don’t really care about that though. What i care about is good posts and ONE link to the original content, sounds like with the related posts you’ll be able to put that in a different spot and stop putting all those other links in the article which will be good.

  6. Accessible font-sizes would be nice — pixels is NOT for content fonts since it doesn’t auto-enlarge to browser preferences… that’s why pretty much every usability guide (including the official one) says use %/em instead of PX.

    Likewise taking an axe to the fixed width would be nice too… you don’t have to go fully fluid, but a semi-fluid max-width/min-width layout measured in EM’s would mean that large font/120 dpi users like myself aren’t diving for the zoom just to make the site useful.

    I agree, the line-heights are ridiculously tall — and this is from someone who LIKES tall line-heights. Try 150% — in most serif fonts that works out right, and far better than the 120% most browsers default to and 110 to 130% firefox seems to choose at random due to the rather silly way it handles rounding errors like the sweetly retarded cousin to Nyetscape 4 that it is.

    30px line-height on a 14px font in a netbook unfriendly large screen unfriendly 960px fixed width? you throw in a few dark green on grey backgrounds in 9px fonts and the result reeks of “WCAG? What’s that then?”

    Might also be nice to see some CSS3 leveraged for improvements instead of that oddball background that looks more like jpeg artifacting errors than intentional design, actually bother using heading tags in the proper order so heading navigation isn’t broken for people who use that, kick that fat bloated jquery idiocy to the curve and bother learning to use javascript properly if at all, get those presentational images the blue blazes out of the markup, and maybe stop writing HTML that’s in transition from 1997 to 1998 coding practices – as proudly proclaimed by the tranny doctype… and no I’m not saying to slap 5’s lip service on it instead. There are RECOMMENDATIONS for a reason after all.

    1. Looking around the new layout I can conclusively say that I hate it.
      Before, I could usually see the entire summary+picture of an article from the front page, now the new layout is about 100 pixels wider but only about 60% of the article summary text can be seen:

      The compactness of the old layout was nice and easy to read, now it’s a mess.

      1. @Caleb, ok the full removal of the space between the lines will help but the new font is bigger than the old, and will the space between the lines also disappear in the posting box? (which appears to be able to show less than half the amount of text than the old one)

        1. if by “posting box” you mean the comment section then yes, I will fix that too. Unfortunately we have limitations that make even simple css updates go very slowly. These changes might not be visible this weekend.

  7. Oh well ! It’s out with the old and in with the new and am still gonna be visiting HAD , but PLEASE try not to use ” Disqus ” as a commenting system, it just sucks!!

  8. I for one welcome our new large line height overlords!
    Anyway, here is my proposal for a Stylish mod:

    *{ line-height:inherit!important; }
    p, cite, .says, li {color:#777}
    a {color:green!important}
    a:hover {color:lime!important}
    #wrap{width:70%!important}
    .content-sidebar #content, .sidebar-content #content{width:70%!important}
    .menu{width:100%!important}
    img.centered, .aligncenter{margin:inherit!important; float:left;margin-right:20px!important}
    .post{margin-bottom:100px!important}

  9. It does not feel hacker anymore….
    If I send YOU twenty bucks, can you figure out a way I can enjoy your site without the EXCESSIVE ADVERTISING OVERLOAD I’M EXPERIENCING ??!!!

    AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH !!!!!!
    (booomm!!)

    1. I disable ad block for hackaday. com, but I don’t see ads when using FF. Not all that many when using Chrome or IE that have no ad blocking installed.

    2. A great big SHOP button at the top really says it to me.
      The “G” icon replacing the scull at the top, which I liked BTW.
      It feels the same as all the rest, so if the look you were after was “like the money making sites”, congradulations, you look like everyone else.
      NOT trying to be a jerk, it’s MY honest opinion, and how I speak.
      Delete if you will, I won’t be offended.

  10. It’s a nice job of balancing all of the requirements of a modern site. The small issues will get sorted. I’m glad to have you guys around with or with or without optimal line spacing.

  11. Like how the navigation bar under the logo contains the buttons bar buttons that some missed on the old look, but I’m not finding the link to the forums at all on the new template The Google search was non issue with me , and would never be one it helps pay the bills. I sorta prefer double spaced lines, but the adjustment Caleb mentioned, is in order. The text contrast on the gray back ground is lacking. Given the that the nearly strident demand that the green and white text on black be retained, no surprise that the new template will default to that, not that I was going to put a dog in that fight anyway.

  12. Computer says noooo. It is much less readable, you should at least keep the colors simplicity instead of using wild amount of grays.

    1. No. And if you aren’t complaining about either ad placements or load time, there are only deaf ears to hear your cries.

  13. Choosing categories now requires Javascript… I suggest adding an “OK” button when JS is disabled, for people that use noscript and the likes.

  14. “Recent comments column” : I only see who and topic, I’m more interested in the comment itself, and either who or topic. The comment drawes me, not who is the poster, or how many posted on the same subject.

    “STAFF PICKS” doesn’t make sense, the whole site IS staff picks.
    Redundant.
    There, not just poking.

  15. A shame you didn’t tackle the real issues first, like the fixed width or commenting system, instead of adding:

    Related hacks: Don’t like. Only related by broad category – ie, marginally or not at all. People can already click the category or tags if they want that. Otherwise, it’s just extra useless clutter. On some (not all) posts, it also includes a *picture* from the unrelated content, making the clutter even worse.

    Staff picks: I’m venturing a guess that most of your readers are regulars. Not much use re-featuring stuff still fresh in our memory, from a week or two ago. Harmless enough though, being in the sidebar that *still* takes up 1/3rd of the real estate, and I never look at anyway.

    Social media stuff: Could care less, but that’s just me.

    I do like the alternating grays on the comments. As for the rest, it’s beating a dead horse at this point, but it still boggles my mind how bad the fonts and spacing are. I almost clicked “Report comment” just to see what it was – between the low contrast, tiny font, italics, ClearType, and my somewhat poor eyesight, I almost clicked it just to see what the odd green blur was. ;)

  16. My scroll button and mouse wheel will wear out pretty soon. I guess you guys have the Ipad 3+ users in mind with this theme? Or is this seriously meant to be the desktop theme?

  17. WTF?!?!

    In general it looks great.

    Except your new code doesn’t check the friggen width!!!
    @home on my 37″ Sony, looks great, when I’m out, with my NETBOOK, I have to shrink the page so far it’s almost unreadable.

    Or are you guys jumping on the “You need glasses” bandwagon as well?

  18. A site like Hackaday is all about textual information, pictures clarify the text quite unlike Youtube which lives and dies with the video or Flickr that is going for the pictures. Because of this I feel it would be important to focus on the reading speed a bit more.

    The colors could have more contrast but the real pain for me is the horizontal scroll. I liked the older version because the spacing was tight and the lines short making for a very fast read. The fixed width and the double spaced lines coupled to a sans font really slows down the reading speed. Another thing about the fixed width is that this site is almost impossible to read with older computers, personally I would try accessing the site with some 10-15 year old computer just to make sure the information is readable.

    It looks new, fresh and flashy though, good for a quick visit every six months; for a quick daily read it is more painful. Any chance of getting full HaD updates on the retro version?

  19. I would prefer it if the “social media” aspect were less visible. The presence of them does not in any way affect (or effect) my decision to share with friends. It really only annoys me. If I want to share it with my friends, I am perfectly capable of doing it with or without them. I mean, really, they serve such a pathetic purpose. “Oh, you don’t feel like copying and pasting the URL? Here’s a button for you…” Not to mention they generally slow down webpages. No… Either make them less visible (put staff picks above them, at least) or get rid of them.

  20. I’m having real trouble reading the font. The font is making me read each word individually instead of as a sentence. Also, as others say double spacing is not good.

  21. As much as I like it, the background sometimes “moves” as like the picture is to big and it is scrolling…..
    But I like it.

    1. I duno I kind of like it. before the lines kind of bleed together and I had to scale the page to read anything now with the white space between lines I don’t need that anymore. though I thin a full em in the comment box is a bit much, its just distracting when its a user comment.

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