Product Blog

Introducing Houdini, the new look of Disqus

Hi, my name is Chris Jennings and I’m the Director of User Experience at Disqus.

I’m excited to introduce you to Disqus’ newest look. Up until recently, we’ve only been able to offer one theme out of the box (called “Narcissus”). Today a new theme, Houdini, is available by visiting your Appearance settings. New users will be using Houdini by default.

Houdini is everything you love about Disqus, but in a prettier, cleaner package. As we started to redesign and refactor, unnecessary interface elements began to disappear, hence our decision to name it after the famous magician. Our philosophy was, “Get out of the way of the conversation.” This inspired a minimalist, environment-agnostic design that came with a unique set of challenges.

In an effort to reduce our visual footprint, we decreased the height of our comment box by nearly 50%. Instead, the comment area grows automatically as its contents fill with text. We feel that in the age of short messages, this reduction of height is more familiar and inviting to our users.

Since the Submit button and Facebook and Twitter share icons aren’t important to those who aren’t commenting, we decided to hide them from view until a user activates the comment box. These items “magically” slide down and fade in using CSS3 transitions in supported browsers.

Out of the box, Disqus has to tightly integrate with your site’s native look and feel. We can’t predict the exact environment in which the comment system will live, so we have to design for virtually any scenario. Different backgrounds, fonts, and text sizes must be taken into consideration.

To accommodate this wide range of design scenarios, we decided to use our own custom web font via @font-face instead of traditional raster-based icons. This provides us with the flexibility of inheriting font color and size from a site’s existing aesthetic at an incredibly small file size (5kb). Since font-faces are vector-based, we are able to serve these icons at any size without consequence.

Remaining neutral on sites with various backgrounds is challenging — especially when we want to use contrast in our design. We overcome this using alpha-transparent shades of gray to “absorb” and compliment any background.

Houdini is our first step towards improving the look and feel of your comment section. It has blazed the trail for future themes and has forced us to improve our upcoming Theme API to make it easier for designers and web developers to publish their own creations.