New Hackaday Template Coming Soon. Here’s Your Chance To Make It Better!

<edit — Dark default layout (now shown above) with white option>

We’re going to be implementing a new template soon. We’ve been wanting to do this for years and it is finally happening. There are many reasons why this is necessary from site load speed to better commenting. This will give use more control over what is in our sidebar (right now I have to hand code everything into the friggin’ template!).

This is going to happen.  Help us make it awesome.

Here is a preview of the new template. Yes, there is a white background. Lets take that as issue number 1. Anybody want to chime in on how to use javascript/jquery to load a different CSS file so people can choose a dark background? I’ve started reasearching, but I’m no star programmer.

<edit –> we’ll default to dark with an option for light.>

What does everyone think about the commenting system? How deep should we be able to nest? Right now I think we’re at 3 levels deep.

Would you prefer for us to do the stories as we are now (picture + a breakpoint wherever we want), or would you prefer for us to use excerpts to put more stories on the front page, but you only see a predefined amount of characters before you have to click to read? (ex: venturebeat)

<edit –> keeping our current system of BIG picture and controlled break>

We won’t be coding any completely new systems. We use WordPress and we don’t even have the ability to use all wordpress plugins that are available because of the hosting system we’re on. However, if you have any more ideas on how we can make browsing hackaday easier/better, lets us know.

We obviously can’t make everyone happy. Change is always met with resistance ([Newton’s] 17th law).

339 thoughts on “New Hackaday Template Coming Soon. Here’s Your Chance To Make It Better!

  1. Taking a Sneak at the J.O.B to comment…..this one is looking alot better than the previous I must add, but like suggested by everyone give us back that left space and put navs and ads to the left where they rightfully belong. That is about Caleb, you guys always put zee readers/audience first hehe thanks mate cheers. Hope it all works out for the best although either way I will be right here reading and hacking away with the inspiration I get from your site.

  2. As a small image on the page, I don’t like it. That being said, I have a larger monitor and may like it in it’s full-screen glory, but I hold judgement until then. Who knows, I may even grow to tolerate it.

  3. I have to be honest: I don’t like it. It could be the size of the preview, though, that feels a bit cluttered and jumbled. I will reserve judgement until I can see it on a larger monitor and in full scale.

  4. Just get rid of the whole right hand pane. I have yet to find myself in need of the forums or any of the crap that takes up a vertical third of the screen (maybe just an Archive button). Also no twitter/facebook/reddit/stumbleupon buttons anywhere on the page. I find that 99% of webpages load fast until the little share this widgets have to check for accounts, permissions, etc and load. I don’t use ANY of these “services”. It still boggles my mind how a bunch of hackers have to use WP to have a website anyhow. Should be as easy as making a ham sandwich to you guys.
    /Otherwise keep up the work

  5. I care more about layout than color scheme… and what I hate most about the sites I’ve been going to is that they seem to be moving away from a consecutive blog view, into a weird featured page. It makes it difficult to just scroll through each article and click on the titles I want to read. As long as you KEEP the plain old blog view (you can color it however you like) I’ll be happy.

    Just don’t sacrifice functionality for looks. DO NOT. Please. BUURAARAAAAAAAAA

  6. A FEW SUGGESTIONS

    1.) Leave the articles on the left hand column, I come here often to read recent articles, so the categories and nav is secondary. In english we read left to right so we see the left column first, especially since it is the larger of the two.

    2.) Leave the default color scheme as the default, make the secondary color scheme as an option, and perhaps make several options and let readers vote for which scheme to use.

    3.) As someone said before, don’t change your identity! evolve sure, change sure, but don’t change too much at one time so that your readers no longer identify it as hackaday…

  7. The only real big changes I’d like to see on the site are more attention to readability of postings in regards to grammar and context, and taking better advantage of the additional 2/3rds of my widescreen display that get ignored and wasted.
    Find a way to expand and fill window width, even something as simple as expanding the tag list into multiple columns of text would be nice.

    This might be just me, but today I don’t seem to have my next/previous page buttons for browsing old content. Been away a couple days and had to go by URL to see what I missed.

  8. I have been reading Hackaday for about 10 years now. I love this site. I am a web developer so here is my honest opinion on the template.

    Add some padding around the post title at least 5px top bottom left and right. Usernames on the recent comment box should be something other than gray. Maybe a different shade of Green, it is a long shot but possible white. The slider on the top is good I like that, but That type of slider would work better if the description box extended horizontally along the bottom and was some sort of black box with text laid on top of it, giving the caption box some opacity would work well maybe make it 70% that way you can still see the image behind it. I love the design but possibly giving the boxes some rounded corners would be good. Not obnoxiously round but something pretty subtle like a 5-8px border radius. The background is completely solid but maybe try the subtlepatterns website for some sort of carbon fiber background.

    And thats about all I have to say, leep up the good work!

  9. I’m on google reader, so I don’t care!

    What ever you do, people will ALWAYS say something against it! People are reticence to change. You have to go gradually.

    Every major blog that changed there style got bash on.

  10. the dark one looks really better :)
    only one little thing, the grey frame of the “another so it looks pretty”-picture looks misplaced. i don’t know how to make it better, but..hmm….

    like someone other suggested, a random-button would be cool.

    i think the commenting system is okay like it is.maybee a edit-function based on cookie(not account and password) would be nice.

    all in all the new template is nice, not so nice like the old one, but its okay.

  11. I mentioned pagination for comments in a previous comment, but to respond to one of the article edits:

    + comments system feedback
    |
    +– 3 levels deep is good
    +– ajax pagination would be cool
    +– shorter comments pages
    +– sorting (oldest first, newest first, etc)

  12. Dark default layout and big picture/controlled breaks…ok, my security blanket is in place!

    I’m starting to like the (edited) template above. Would still like to see a search-by-date addition, such as a calendar that you can change the month and click on the days.

    Caleb, do you seriously play the banjo? You are one badass mofracky!

  13. I don’t like this new theme at all and the current one is bit disorganized IMHO.

    Hackaday needs a fresh theme, with old school color scheme. I grabbed a page out of my printer, and drew this quickly to show that there are many possible layouts that can be used here.

    https://www.dropbox.com/s/4fdb8ov7vkktpcd/hackaday.jpg

    It may not look nice as it’s just hand drawn in 5 mins or so. I have color scheme in mind and ready to volunteer. There can be option for both black and white version so people stop complaining. Hackers can do anything, but I bet they can’t design.

  14. To change a CSS layout on the fly you can use this bit of JavaScript:


    var c=document.createElement("link") c.setAttribute("rel", "stylesheet") c.setAttribute("type", "text/css") c.setAttribute("href", "/css/mynewcssfile.css") document.getElementsByTagName("head")[0].appendChild(c);

    To save style selection a cookie would be the easiest since you don’t have a formal login system for people.

    You could use something like KnockoutJS to speed up rendering but then you loose the search-ability and indexing from Google.

    On design how about something like the link below. The color scheme is kind high bandwidth and really would work for here but the positioning and styling of element may.

    http://www.templatemonster.com/website-templates/40898.html

    Also you want rounded buttons and gradients you could get a nice layout using purely CSS. Again below are some techniques I use:


    /* Gradiants */
    background-color:#D31919;
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #FC9797), color-stop(0.05, #D31919), color-stop(1, #7b0a2e));
    background-image:-moz-linear-gradient(top, #FC9797, #D31919 5%, #7b0a2e);
    background-image:-o-linear-gradient(top, #FC9797, #D31919 5%, #7b0a2e);

    /* Rounded objects */
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;

    The CSS isn’t universal but it degrades well.

    Let me know if you have any questions.

  15. I think you should continue using wordpress, just re-design all the template and it can be whatever you want… I don’t know where do you host the website, but I’m pretty sure you can host a website like this one for less than $100 a year, domain included, with everything working.
    Why not to keep the hacker terminal style as the default color scheme, and include a button to change it quickly to a ‘easier-reading’ mode ?
    It’s easy to program it.
    I think you really should go to a solution with summaries istead of complete posts. If the user wants to open it, he will … Pages would be faster to display, eg, on tablets.
    I’d keep comments like this, but you can choose to have ‘pages’, just like youtube; after x comments, a new page would be created. It prevents an ‘almost infinite scrolling’ when there are lots of comments.
    Also, you can increase the size of reading section and reduce a little bit on the categories. As it is, it’s almost 50% 50%.

    If you want, e-mail me and I’ll show some options according to what you want, but I think I got the main idea – a clean retro template, color-customizable, using a plugin-ready cms like wordpress.

    PS: I’m not trying to make any deal, just contribute with free suggestions and maybe some help…

  16. Please keep it the same I hate all these ‘New Look’ blogs.

    1. They do not organize the info better at all.
    2. The pages look cluttered.
    3. I have visited the sites I considered my daily reads less because of it.
    4. Technology is constantly updating so you usually will not care about old info as new developments are always happening.

  17. I propose changing the links on the bottom so instead of saying previous/next, they say newer/older. I’ve pointed several people to the site and some tell me that they get confused because they want to look at older entries, so try to hit the previous button, only to be brought back to the main page.

  18. Which ever design you choose to go with, please leave a drop down or otherwise to select this old theme. Its simple and straight to the point which makes it great and user friendly. No unnecessary frills.

  19. Why not have the site crowd sourced. What better way to read your favourite content then on a site that you coded yourself.

    Things I’d add:
    -Comment editing
    -Better commenting
    -Better search
    -A store with cool stuff… kits, Parts, OSH
    -A somewhat hidden next page button at the top( > )

  20. 1) Leave the sidebar on the right. It will be easier to read articles and will be easier to navigate on low-res phone screens (since you would have to scroll over to see the article.
    2) Direct people to making their own. Stylish is a popular addon for Firefox and Chrome, people can submit custom CSS files to UserStyles.com. WordPress is very common so there should be plenty of examples from other sites. If you manage to get a switching system built into the site you may be able to store user-written CSS in the cookie or something.
    3) For the complainers, try a medium contrast like white-on-darkgrey or darkgrey-on-white. I think green and grey backgrounds of the comments are very readable.

  21. An exercise in how not to update a site aimed at people interested in technology :

    http://tweakers.net/

    The recent comments part of the screen shot seems to be making some of the same mistake they did, huge spacing. They went from a site which used to have a delightfully high information density on the front page and elsewhere to an unusable monstrosity … please don’t do that (hell I wouldn’t mind a slightly wider comment section as is to get more comments on one screen).

  22. People have reasons why certain colors
    work best for their eyes. For me, the
    white on black is bad, for others black
    on white is bad.

    It seems that the best way to get
    around this problem is to have
    multiple style sheets that users
    can choose from.

    Some people don’t like cookies, others
    don’t mind them. So you could provide
    a login format for those who don’t
    like cookies while utilizing cookies
    for those of us who quite often go on
    sweet tooth binges.

    Scott A. Tovey

    1. Most browsers actually have a menu to pick a style because HTML has been supporting that for a long long time, but unfortunately only one in 100K sites use that functionality.

      As it is there are various plugins like ‘stylish’ for firefox and some stuff on uderscripts.org for the greasemonkey addon, and browsers that support such (chrome does too I understand), that give you user-created alternatives to layouts.

  23. I support any changes HaD wants to make for the better.

    But regarding post excerpt, please include a full-post story RSS (or rather, don’t change the RSS).

    I uses your websites for years (with metric-tonnes of bookmarks) using RSS. So please, don’t make the RSS to excerpt-only (like venturebeat).

  24. Can I just ask that there’s decent suport for mobile devices. HaD used to be really nice on my Galaxy Nexus but recently I’m getting the full desktop site. (I don’t think anything’s changed at my end but I have updated to 4.1.2)

  25. Hi! I realise this is a little old!

    My 2c: I love reading hackaday – however I hate your current commenting system! It forces me to log in with WordPress.com every time :( Disqus is a much nicer system.

    Also, JS to change stylesheets can be done in a pinch. If you’re having trouble when implementing it, send me an email and I’m happy to help!

    ~Aaron

    1. I find that some sites that utilize Disqus is not as to have issues with browser configurations that prevent Disqus from working properly.

      I am using FireFox and have third party cookies enabled, so I don’t know what the issue is. Nor am I going to debug someone Else’s website.

      Scott A. Tovey

  26. It still has rubbish on the side (search, categories, recent comments, …). Please put it at the top or bottom of the page. I paid the full price for my monitor so I want to use its full width and height.
    I’m glad that the stylish addon solves this problem with the current site.

  27. I use a 16:9 screen at 1920 x 1080. Over half of it is just side bars, It’s pretty annoying having to have a narrow column of text in the middle of you screen. Why not just have it stretch to fit? Tall font and large vertical line spacing make this feel even more pronounced.

  28. having the main content on the right side makes it hard to control the size of your window so it’s not a good idea. And it also makes it hard on portable devices with lower resolution screens I imagine.

Leave a Reply to enorthemousCancel reply

Please be kind and respectful to help make the comments section excellent. (Comment Policy)

This site uses Akismet to reduce spam. Learn how your comment data is processed.