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 tighterfixedpost titles shouldn’t change size when you click on a postfixedfavicon needs uploadedfixed- 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
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.
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.
So far I like it. A bit of tweaking and you’ve got a great new look. :) Thank you!
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.
When you have time a mobile template would be great thanks.
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.
Looks great, but is slow to load now. :(
changed the social buttons on posts and it seems to have sped it up a bit.
It is definitely faster now. Still not as fast as the old layout.
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.
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.
Browser back button not working. It just toggles between two pages…
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.
Too
much
space
inbetween
the
lines
causing
much
much
much
more
scrolling.
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:
http://www.haku.co.uk/pics/HackaDayOldNewComparison.gif
The compactness of the old layout was nice and easy to read, now it’s a mess.
if that’s the reason you hate it, you’ll be pleased by the list of immediate improvements included at the end of the article which includes compacting the vertical space.
Ah crap, now I discover my website isn’t working :(
@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)
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.
Oh, BTW, lose the inaccessible hard to read webfont while at it too. Waste of bandwidth…
How can one improve on perfection? I liked the old style…..
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!!
noted. Have not researched yet.
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}
Looks awesome . . . . . . . love it !
I am glad the double spacing is going to be addressed. This is quite difficult to read as-is.
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!!)
excessive? it is 1 advertisement less than we had before. Same positions and everything.
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.
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.
shop link has been there for a long time. It was in the right column before. The G favicon will be replaced with the next update rollout. chill dude.
ok, I am being harsh. I know you all WORKED HARD.
It’s good, sorry for the whine & cheeze.
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.
Nice improvements. Once the line spacing issue is taken care of, this will be a very nice lay out indeed.
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.
oh crap, disabled the forum button for a bit. let me fix that.
Computer says noooo. It is much less readable, you should at least keep the colors simplicity instead of using wild amount of grays.
no sir, I don’t like it.
Sorry to say, but ugly…May I have the old back? :o)
No. And if you aren’t complaining about either ad placements or load time, there are only deaf ears to hear your cries.
Actually, cutandpaste, I fully agree with him.
Wow, really dig the new look! Keep up the good work!
WHAT HAVE YOU DONE TO MY HAD!?!?!
Too bad we can’t have a parallel site, one new coke, other is coke classic.
We all know how that went.
Choosing categories now requires Javascript… I suggest adding an “OK” button when JS is disabled, for people that use noscript and the likes.
“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.
menu buttons and titles – font is way too big,
too big line spaces
everything looks like website for old people with bad sight.
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. ;)
It sucks.
Back to the drawing board.
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?
It’s vastly more legible than the previous version, but does everything need to be double spaced?
Ok, now that the linespacing is fixed, I endorse this redesign.
it still needs tweaking, but the overall flavor is working.
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?
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?
so many lazy people…. i wonder, if they ever did something…
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.
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.
I don’t like if the text is forced to be wider than my browser window.
New layout is much harder to read. Stay orginal – dont do the same mistake as the daily wtf did
Generally good, but the font is too big, there is too much extra space, and loads a lot slower.
100k ways better
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.
Too bad for the (G)ackaday in the toolbar icon
you sold your sole to the devil
that is the favicon from the genesis framework, the framework used to make the template. It will be replaced with ours on the next update.
i dont like it
God the spacing between lines is too big. Do not want!
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.
I like!
So far I like! Good job!
I lIke new look.. :)