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. Masta Squidge says:

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

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

    So far I like it. A bit of tweaking and you’ve got a great new look. :) Thank you!

  4. Highnoontoday says:

    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.

  5. 0xfred says:

    When you have time a mobile template would be great thanks.

  6. Someone says:

    Looks great, but is slow to load now. :(

  7. Elliott says:

    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.

  8. zuul says:

    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.

  9. geekmaster says:

    Browser back button not working. It just toggles between two pages…

  10. Jason Knight says:

    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.

  11. Haku says:

    Too
    much
    space
    inbetween
    the
    lines
    causing
    much
    much
    much
    more
    scrolling.

  12. Jason Knight says:

    Oh, BTW, lose the inaccessible hard to read webfont while at it too. Waste of bandwidth…

  13. FourthDr says:

    How can one improve on perfection? I liked the old style…..

  14. Muttitude says:

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

  15. fatmanx says:

    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}

  16. chris says:

    Looks awesome . . . . . . . love it !

  17. macpod says:

    I am glad the double spacing is going to be addressed. This is quite difficult to read as-is.

  18. Justin Case says:

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

  19. Paul Bruno says:

    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.

  20. DainBramage1991 says:

    Nice improvements. Once the line spacing issue is taken care of, this will be a very nice lay out indeed.

  21. n0lkk says:

    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.

  22. Wizz says:

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

  23. Matt K says:

    no sir, I don’t like it.

  24. Sorry to say, but ugly…May I have the old back? :o)

  25. frankly says:

    Wow, really dig the new look! Keep up the good work!

  26. silentj says:

    WHAT HAVE YOU DONE TO MY HAD!?!?!

  27. Justin Case says:

    Too bad we can’t have a parallel site, one new coke, other is coke classic.
    We all know how that went.

  28. Anon Ymous says:

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

  29. Justin Case says:

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

  30. wilkk says:

    menu buttons and titles – font is way too big,
    too big line spaces
    everything looks like website for old people with bad sight.

  31. Chris C. says:

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

  32. Edde says:

    It sucks.
    Back to the drawing board.

  33. Vis1-0n says:

    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?

  34. Will says:

    It’s vastly more legible than the previous version, but does everything need to be double spaced?

  35. Cyberteque says:

    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?

  36. shingouz says:

    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?

  37. thx says:

    so many lazy people…. i wonder, if they ever did something…

  38. Logan says:

    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.

  39. Matt says:

    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.

  40. Gabor says:

    I don’t like if the text is forced to be wider than my browser window.

  41. Ilkka says:

    New layout is much harder to read. Stay orginal – dont do the same mistake as the daily wtf did

  42. SuperNurd says:

    Generally good, but the font is too big, there is too much extra space, and loads a lot slower.

  43. ys0 says:

    100k ways better

  44. Gamer1204 says:

    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.

  45. Wilfred says:

    Too bad for the (G)ackaday in the toolbar icon
    you sold your sole to the devil

  46. cevat candar says:

    i dont like it

  47. cde says:

    God the spacing between lines is too big. Do not want!

    • Ryoku says:

      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.

  48. uberdum05 says:

    I like!

  49. 1000100 1000001 1010110 1000101 says:

    So far I like! Good job!

  50. Wow :) says:

    I lIke new look.. :)

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