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
generally looks much better, however tittle font is slightly to tall
If anything I’m okay with the title font is the paragraph font that needs some letter-spacing in the css. All the letters mush together.
And they look double spaced vertically to me.
We are all arm-chair graphic designers :-) I agree though. Compressed fonts on’t read well in the body. I do like ti for the title though. Good work in dressing things up.
yeah, lots of dead space… where is the ‘use old style’ link?
Really really long looking, but in generall looks good. I think it is true to form, except to really really long title headders, and the favicon
Everything is about 2x too big with vast empty spaces everywhere. Takes so much scrolling.
Yes! I am am having a hard time reading it on my lappy (1366×768). The line spacing needs scrunching up bigtime!
+1 ! About 38 lines of text on a 1200pixel screen. Ridiculous! Adjusting the vertical line spacing would help a lot. (is that what you meant by “double spacing” in the “to be fixed soon” section?)
yep
Agreed!
There’s too much space between the lines of text in the article summary and the comments.
I very much appreciated the compactness of the old layout, please bring that back!
Holy whitespace, batman! Seriously.
And I can’t find (Firefox, W32, huge window on a 1920×1080 screen) any zoom setting that either uses more than 2/3 of my browser width (deadspace, batman!) introduces a horizontal scrollbar (wtf?).
As I write this, the textbox is only about 2/3 of my browser width. I can hit ctrl – and it gets smaller, but if I hit ctrl + it gets huge AND grows a scrollbar.
I want my screen realestate back, or at least some consistency.
++
I feel like a granny solving same crosswords…
Seconded. Come on, the single biggest issue with the old template was the fixed width – HTML is designed to reflow the text to use all available space, so why break that?
Yes, Titles are a little bigger than usual, also text links for staff pics are extremely large!, and also the favicon should be your logo icon.
Perhaps set line-height to 1-2px over the font size? :)
double spaced vertically to me too
Having a real hard time reading now, move for the bad for my eyes :(
In before everyone hates change
Couldn’t have put it any better.
What new template?
/me is far far away
What’s with the favicon?
Oooh, also, I like the updated reply system!!
Oh boy. Just put ‘Reply’ to the right, ‘Report comment’ to the left. Is it really that hard?!?
Agreed. The Reply and Report links are both opposite of what I am accustomed to. But it is good that they are different sizes, at least, so I can stop clicking the wrong one when replying.
Love the new look!!! Great choice!!!
Well. It looks nice, yes, but it takes almost a minute to load the pages on my aging laptop and the pictures on the right are in my peripheral vision while reading.
How about an option to get the old template back? I was quite attached to it.
There’s less script and one less advertisement on this page. It was tested as faster on every browser(well, ie, chrome, ff, and safari). I suspect a coincidence.
It is also loading slowly for me. I also notice the entire General Talk forum is filled with spam… What’s up?
WOW… ugh.
General Talk Forum is not the only one filling with spam. Could this be the reason the site is loading slowly? Otherwise new layout looks great!
different server. No idea what is going on there. I’m on it.
Spam is gone! That was fast, great job!
spam is only a symptom. I haven’t fixed the problem.
I really have a hard time reading the site with the extra space between every line and object. It makes the page breaks look even smaller, and really feels cluttered. Other than that I like it.
I agree. Way to much dead space. Other than that it is fine.
I’m strictly RSS myself, but the site looks nice! Change the favicon, though.
I like the new style, although I think the large line spacing is a little weird.
looks good :D
Definitely hate. There’s no font size where it looks good.
Caleb, check your fav.ico, it’s wrong.
I too do not like all that spacing between lines. Other than that <3
layout changed… is this going to be every month from now on, like youtube and ect?
… they change thier “look” ever so slightly every month(edit few months)… and NEVER(edit: rarely) fix bugs.
time to bookmark the retro-H.A.D. site? hopefully it still looks the same?
the less rich the content, the less there is available for change? lol
PS: it now looks more like a blog now, i guess thats what the people want? (it IS a blog afterall)
…but NOT looking like a blog is what appealed to me in the first place, oh well, nothing (good) lasts forever.
to summarize: its the TEXT content that is MOST VALUABLE anyway, so as long as you guys do NOT switch to a video only, im okay with it.
PS: i absoloutely LOVE the new smaller size of the report buttons, YES!!!
thanks, I personally take credit for that.
I like the smaller size but can you make the report button links have an alt setting so when you hover over them you get a little popup saying “Report comment”?
About the retro edition… There are no new posts on that one; it’s just the same ~10000 posts, five random ones each time I update it.
And woo on the new reply thing.
mmm i guess it shows through that i have never checked it out
anyhow, while we are at it (brainstorming),
maybe a mobile version of the site?
for viewing on an older cellphone screen at 128×128 pixels
so we can read text(edit: recent articles), in a _ h o r i z a n t a l _ manner,
instead
of a _
vertical
_
manner
PS: not all cellphones can scroll horizantally, so the text gets wraped.
you end up with two lines of text taking one or two whole pages!
I second the notion that the mobile version needs more tender loving care
I like how it has kept the old hacker style.
The related links’ font seems quite large and imposing on the main content, it looks more consistent at size 14px, with the titles at 18px.
And the search bar ‘submit’ button is off by a pixel in chrome Version 23.0.1271.64 m its kind of distracting with the high contrast colour scheme. If you change the line height property to “line-height: 18px;” that fixes that…
My vision went to crap when I turned 40 and I am a huge fan of whitespace, but I *still* find the new format a bit ridiculous…
Yeah, please pull back on double-spacing the text lines. In an era of ever-shrinking mobile gadgets we need more information on our screen, not less.
Looks great!
Pros:
-got rid of the 6 differently named links to contact hackaday
-search looks like its no longer google search
-layout looks like it wastes less space
Cons:
-loads EXTREMELY slowly <–biggest issue
-missed an opportunity to unify the shop forum and blog themes.
-The green is a faded green and looks washed out against the gray.
overall its a little harder to read than before.
A step in the right direction though. Good job
Would you all mind posting some details what setup you have if your loading is being slow so that we can look for patterns?
I personally have (and for me it loads plenty fast):
i5 2500k
16GB RAM
Win7 x64
Chrome: 23.0.1271.64 m
Broadband internet (over wifi)
Youtube of a couple of page loadings with network activity and console output:
http://youtu.be/0fa4oQzU1eM
For what it’s worth, it seems reasonably speedy on my Q6600 @2.4GHz, under Win7 x64, using whatever the latest Firefox build might be today.
The only thing slowing me down is the need to constantly scroll to get any reading done, and the weirdness about horizontal layout that I described above.
I assume it’s probably because I use ctrl++ to raise the size of text, so I can read better, but the navigation at the top is halfway hidden.
Home, Submit a tip, Forums, and Shop are all halfway hidden behind the content area. This was not an issue with the old layout. Not saying change it back, just something you might want to check on.
I think the title font is WAY too big. I also find the double spacing of the text makes it harder to read. The one article I looked at so far had a confusing photo as the one “Related Link”. (From the URL, it had something to do with a calculator.) I’m used to looking for the Comment count at the end of the front page summary but I’ll probably get used to it’s new location. I personally could care less about all the facebook, twitter, et al buttons at the bottom of every summary. Couldn’t they be moved to the actual article page with the comments instead of wasting valuable front page space?
http://incompetech.com/gallimaufry/care_less.html
it’s a hack.
http://www.webtypography.net/
Sidebar, way too distracting. it’s more emphasized than the main content.
I think that this new design welcomes an adblocker.
With previous design I actually saw many times something worth clicking but this one is too intrusive.
I think that I know what the problem is: the ads do not fit into layout – with the old layout the article, comments and the ad between them shared relatively the same width – now the ad is splitting it into half and is to noticable even when it does not atract me with its content. Perhaps it would help when you do not align it into center but left.
The same applies to the top ad. When the old one felt even welcoming then this one is irritating me. I do not know a good fix for this.
Title is too big, text lines should have a smaller space in between, fonts at the right side sections are generally too big (both title and text). Colors hurt the eyes: green is too much green, white is too much white.
Not bad for being the first release, though it need some serious improvements to be desirable over the old one.
Line height is a little much and the H4 is way too heavy.
I don’t know whether it is a bug or a feature, but on http://hackaday.com/2012/11/16/avr-minecraft-server-lets-you-toggle-pins-from-the-virtual-world/ there is one span with color set to #00e. You might want to look into that.
Also, I feel like the lines are too far apart while the titles are too large for long texts (e.g. “AVR Minecraft server lets you toggle pins from the virtual world”).
Overall though, I like the new theme.
just a goof on the post. Fixed.
Thanks
What’s with he double-spaced lines? Are we in elementary school?
Looks really poor on the tablet. So much waster screen space.
Now that i read the comment on moving twitter facebook et al to underneath the posts, i agree. the sections under that in the sidebar could use that valuable real estate to better effect.
I’m not having any problems with loading times, and I’m glad there’s now a drop-down box for categories, The new look is a little cleaner and more refined, but the font choice and sizing does leave a bit to be desired. Thankfully that’s an easy tweak. I have no complaints about the color scheme as it stays true enough to the HaD we’ve all come to love and the ‘turn on the lights’ addition that i’ll never use will more than likely satisfy those whom would otherwise whine about the color scheme. All things considered I view the new template as an improvement that will be even better once it’s refined a little.
My only complaint about the layout is the comments section – it’s a bit narrow. After you get below the article and the sidebar, I feel like ~60% of my monitor is dedicated to displaying black & gray.
Have a hard time reading it.
too tall vertically
too mushed together horizonitally
Please condense the line spacing. Too much scrolling required!
I agree… I must add that I appreciate the new reply system.
frito
Yes HaD, I’m wearing out the scroll wheel here!
I’m going to have to jump on the line spacing is too big bandwagon.
Also it loads WAY slower, on both my windows 7 and vista computers, eithernet for the first and wifi for the second. Both chrome browser.
See if you can pinpoint what is loading slow. that would be immensely helpfull.
We have 1.3 Mb/s internet connection here, so stuff never loads lightening fast, but the old hack a day format loaded pretty fast, but the new one doesn’t. Its the more and bigger pictures, they cause the page to load slower than it used to.
aside from the thumbs on the right side it is the same size and quantity. See if you can pinpoint what is holding it up, that would be helpfull. I suspect the facebook/g+/twitter buttons myself.
For me : core i7, Firefox on win7 with 100Mbit+30Mbit Load balanced internet connection and i got all the “boxes” content loading around 1sec after the base template
And I just noticed, do you think you could add replying to a reply, I really like that feature on instructables, and we need it here. Also your favicon is messed up, either that or i’m totally missing the point of the G.
Also the report comment button doesn’t show up on replies, replies can be some of the worst ones.
Hi, Phenom II Quad Core, 8GB Ram, W7 w/Firefox
…I find the black background loads first, then I’m waiting for the content to appear.
Working fine and fast in all my computers, including my oldest: a 3GHz Pentium 4 laptop with 2GB RAM.
I would say make it a bit wider to and also the line spacing is a bit off alot of scrolling just needs some fine tuning i like the general idea tho
Overall, I like it. I DO NOT care for the enlargement of an article title once you click on it; it becomes WAY too big.
It loads fine for me: (Win 7/IE 8 over a major university network). I wouldn’t be using IE, except our IT dept. won’t load anything else :( .
It also looks good on this widescreen. My biggest complaint about HaD’s (old) layout has always been that a majority of screen real-estate wasn’t used for the actual article. This is much better IMVHO.
PostScript: I am not sure if I like the new look on my smartphone (Motorola Axia and Dolphin).
I like it! But im looking at it on an android 4 tablet so its likely to look slightly different on PC.
One point, having to scroll all the way to the bottom of a long comments page to leave a comment is a bit of a pain.
You should already be at the bottom when you are ready to reply, having already read the other responses first, in order to ensure that you do not duplicate a previous response by another poster, otherwise uselessly clogging up the thread…
Sadly it’s not good on a small screen netbook, it doesn’t adjust to the screen size available. continuously scrolling over to the right and back to read is tedious. Plain HTML (ala retro) is much more “content enhanced”, the text neatly fills the visible screen
I also throw my vote in with the line spacing being too much. Perhaps 1.5em instead of the somewhat ridiculous 30px you have it at now?
For the colors, I’d suggest #DDD for the “body,p,select,textarea” rule and #3C1 for links.
Yay for Firefox’s live CSS editing!
Also, for your font declarations, one thing that drives me nuts about those @font-face generators, there’s a reason @font-face has the “font-weight” and “font-style” styles: It lets you do “font-weight: bold” for bold versions of a font and “font-style: italic” for italic ones (and a few others IIRC but CBA to look up). So your Droid Sans Regular could be “font-weight:400; font-family: DroidSans” and Droid Sans Bold would be “font-weight:700; font-family: DroidSans” (or whatever it is) and poof, bold things automatically work. Anything else is more work than should be done.
The line spacing is something that I find ridiculously gigantic.
yep, it is in the list of immediate fixes in the article.
It’s much better now!
I like it, I have one small suggestion. Change text color from #FFFFFF to #BEBEBE It seems a bit off balance.
This is the first site re-design that I haven’t had an immediate allergic reaction to (example: Gizmodo…). Good job guys
Oooh, but if you don’t keep the commenting system sane I will do terrible things to you. Like… say obscene things behind your back. Yeah, that’ll learn ya!
For the sake of readability, use a serif font. Pretty please….
I am sure I’m over reacting but this just looks like you pulled a Word press theme off the web, added your logo and said bam we are done.
It’ a LOT slower than the one before, I counted 11 seconds of DOM on the first page and we’re talking i7 and a LOT of RAM on srware iron v 22.
There:
Load timings (ms)
Event When How long Sum
Redirect 0 0 0
DNS 0 0 0
Connect 19 138 138
Request 157 175 313
Response 332 0 313
DOM 405 11419 ***11732***
Interactive 993 0 –
Content loaded 993 36 –
Load event 11824 60 11792
Hope this helps
It appears to be an issue with some extensions though; firefox behaves much better, but has almost no extensions installed. Anyway, there’s always Stylish to bring back the old template for the change-o-phobics like me :)
not that noticeable in opera. but more on other browsers.
bring back the old white on black text. the new almost white on slightly dark gray is awful. Offers no reading contrast at all. may look good on a designer screen with lots of ipsum lorem. but as soon as you read two entries your eyes are already tired.
Why is the favicon a G?
The “google guys” helping out had a little too much to say on the new design, it seems.
That was a new term form as well; get ready to slap yourself on the forehead, it being so obvious. http://en.wikipedia.org/wiki/Favicon
I miss the display of the number of comments on the main page. It let me know how much discussion there was on a topic.
+1
Huh, it’s at the top of the article now. I swear that wasn’t there earlier.
I still don’t like the new layout despite the space betwen the lines being reduced (it should not be there at all, it wasn’t before), and the number of comments being moved to the top of the summary is wrong.
Now all the fonts are bigger and there’s space betwen the lines you have to scroll down to read the article summary and then scroll back up to read the full article and the comments. WTF?
That is scroll back up to click the link to read the full article.
And we stll can’t edit our comments :(
Agreed – I’m so used to having the comments link and count at the bottom of the article text. It makes sense from a usage flow: read the summary through, when finished – click on comments link to discuss. Scrolling back up is an irritation. I could click read more anyway – but if I can’t see the count I don’t know if there have been any (or any new) comments to read before I follow that link.
Really disappointed you guys did not migrate to a far more superior framework than wordpress. Drupal would have been a far better option and would have allowed better scale-ability, not to mention that it could have been built in half the time and things would be running much faster
Looks good but i feel it’s much harder to read, don’t know why.
I feel the same, maybe it has to do with titles having a much much bigger font than news body and the use of a weird font
Way too much wasted space, WAY TOO MUCH WASTED SPACE. And for whatever reason it loads slower than frozen molasses moving up hill against gale force winds. A fixed width web page is very 1995 guys.