Mozilla Hacks

Something Looks Different Around Here…

By Potch

Posted on October 6, 2015 in Featured Article

We’ve revamped the Hacks Blog! The old design was looking a little long in the tooth, and was built in an altogether less-responsive era. The new design has a few goals:

  • Look great on as many screens as possible
  • Get out of the way of some awesome content
  • Have the flexibility to show off larger images and HD video
  • Tie in more closely to the MDN branding

Over the next few months, expect additional tweaks as we settle into the new foundation. A huge thanks to everyone who helped battle-test, critique, and get the new visuals fit for the public.

If anything looks broken with the new design, please leave a comment on this post or file an issue on GitHub.

Thanks!

About Potch

Potch is a Web Platform Advocate at Mozilla.

More articles by Potch…

18 comments

  1. Sören Hentzschel

    Hi,

    I like the new design. But PLEASE add the date of the posts on the homepage. ;)

    October 6th, 2015 at 12:54

    1. Potch

      That’s quite doable. I’ll file an issue to add them. Thanks!

      October 6th, 2015 at 15:22

  2. Frenchfaso

    Very well done!
    Congrats :-)

    October 6th, 2015 at 13:08

  3. Patrick H. Lauke

    on larger screens, there’s enough space for a right-hand sidebar, but there’s just empty space at the moment. looks a bit lop-sided…

    October 6th, 2015 at 13:41

  4. Barry van Oudtshorn

    Love the hover-over effect on the title!

    October 6th, 2015 at 18:04

  5. Mathias

    The new design is broken in IE 11. The text on this page is at the far left of the screen without any margin / padding between the text and the screen border.

    The “Search Mozilla Hacks” watermark is also broken, it’s clipped at the bottom.

    October 6th, 2015 at 22:03

    1. Potch

      Thank you for the heads up- I’ll take a look.

      October 6th, 2015 at 23:09

  6. Tomasz

    I really like the new design of “Hacks”- much more XXI century-like.
    The only problem I’ve got is the “Post Your Comment” area inputs are really small (both on Chrome 45 and FF 43) – no padding, text is positioned really close to the border of input fields.
    But apart from that great job guys!

    October 7th, 2015 at 07:41

  7. Yunier J

    Very nice, simple and light.
    I like the K CSS animation

    October 7th, 2015 at 10:04

  8. Matt

    “Love the hover-over effect on the title!” – I agree, looks mad.

    Nice design! :)

    October 7th, 2015 at 10:38

  9. anonymous

    And it still has this max-width for content. Unbelievable.

    October 8th, 2015 at 00:17

    1. Potch

      Pardon? Text is generally considered to be easier to read at reasonable line widths. Unclear what is unbelievable about this.

      October 8th, 2015 at 00:23

  10. anonymous

    @Potch,

    It’s a myth. And whoever want to have small windows will make his browser’s window whichever he likes. It’s much harder to do the reverse.

    I’ve got large monitor because I want more text, not because I like to marvel at white margins.

    October 8th, 2015 at 01:10

  11. Ivan

    I prefer the old one, but this new one is OK. It’s more ‘global’, like MDN, etc…

    I’m missing the number of comments on front page…

    October 8th, 2015 at 08:19

  12. Ivan Dejanovic

    The new design looks more modern for sure. Is it more practical for desktop then the old one I will have to see. I use Mozilla Hacks almost exclusively on desktop. What I don’t like is the new categories menu on the home page. The old one had much more options so it was much easier for me to go directly to ES6 In Depth directly. This was probably an issue on phones since menu was probably to small to use. Will have to use it for some time to see how it works for me.

    October 9th, 2015 at 04:11

  13. Francis Kim

    Looks fresh!

    October 9th, 2015 at 06:42

  14. abral

    I’m not sure how to reply to other people’s comments.

    October 10th, 2015 at 06:03

  15. niu tech

    Currently there is no way for non admins to reply to a particular comment.

    October 15th, 2015 at 07:48

Comments are closed for this article.