Our new blog design

Jim Renaud

As you might have noticed, earlier this month we launched a new blog design. This is something we’ve been looking forward to for a long time. Our blog is where we most directly express our personalities and values, so we wanted its design to be something we get excited about. Our other goals for the redesign were to make the blog more flexible, more readable, and better for commenting.

More Flexible
The biggest technical goal of the redesign was to make the design responsive, so that it’s easy to read from any device or screen size. Using CSS and media queries, we can re-flow and shape the content to look great on phones, tablets, and desktops/laptops. If you are on a desktop, you can see how this works: shrink the width of your browser window to notice the magic. We’ve already added responsiveness to most of our email designs and to asana.com, so we’re excited that our blog is now also optimized for all the different screens you use.

Multiple devices

More Readable
Type comparisonThe easiest thing to notice in the redesign is that we followed the emerging web design trend to increase font size. There are many reasons this trend is happening. First, a larger font size increases readability and accessibility. Secondly, web font sizes have historically been rendered smaller than their point size suggests. A simple experiment by Information Architects determines that 12-point printed type is visually the same size as 16-pixel screen type. In addition to larger fonts, we cleaned out the space around the posts, so that you can really focus on what’s written. We hope you find these changes more pleasing on your eyes.

More Conversation
Asana commenterThe Asana blog has always featured a vibrant comments section, but we wanted to foster easier conversation with Asana and our blog authors. In the old blog design, it was very hard to discern which comments came from Asana team members. In the redesign, we added a blue bar and a label to Asana team member comments, so you can quickly scan the comments for answers and feedback from us.

Focused on Posts
85% of our visitors, visit an individual blog post, not the blog homepage. This is mostly due to the rise of social media sharing of ideas and posts. So, we designed the site around single posts, not the homepage. Most web design is done in the opposite way. Usually a homepage is the funnel into your content. We took this knowledge to heart and added forward and back arrows, with post titles, on each post so you can quickly move between posts, without having to navigate back and forth to the blog homepage. For the blog homepage, we prioritized quicker scanning, so you’ll see shorter intros to more posts than before.

We have many smart, funny, and helpful followers of our blog, who actively read, comment, re-Tweet, Like, and immerse themselves in what you read here. We hope the new design makes the time you spend here more productive, and continues to foster inspiration to do great things.

  1. avatarEmily Kramer Asana Team Member

    Something Jim didn’t mention…now, our blog post images are often animated gifts that show how product features work. These are a great alternative to magnification on a screenshot or multiple screenshots. Check out this post to see the animated gif screenshot in action: http://blog.asana.com/2013/06/chrome-extension/ Animated gifs…not just for tumblr!

    1. avatarJim Renaud Asana Team Member

      Ben, we will be updating the blog shortly as the font we are using looks pretty clunky in it’s bold setting on Windows. Apparently, the semibold version fixes this issue and will update the blog shortly!

  2. avatarDarek

    Guys, why oh why do you feel the need to mess with fonts so much? :) Seriously, text in this new design looks crappy in Chrome on Windows (might be nice on Macs and retina screens, but most of the world is not using them). Also, Asana is still pretty much no go for Polish (and possibly other European) languages, because local characters are rendered with completely different font with larger size. I was evaluating it for use in our company, but this was a deal breaker. I’ve also reported the issue to you in the past, but haven’t heard back. Just wanted to let you know, because I think this is important to people outside of San Fran ;)

    1. avatarKenny Van Zant Asana Team Member

      These are great comments. Of course, we’ll be tweaking the new design to make it more readable in different browsers. It would be great if you could send a screen shot to support@asana.com for the polish character problem. We have thousands of teams in Europe using the product successfully, but clearly, we can improve your experience.

    2. avatarJim Renaud Asana Team Member

      Darek, we have tweaked the fonts to look nicer on Windows. There was a bug in the font on Windows that rendered the font a little funky at specific font sizes. Thank you for pointing this out. We have a couple more tweaks to do on Windows and will hope to make the type look even nicer.

      We spend time “messing with fonts” because typography is important on setting a tone, increasing readability and accessibility and to adjust well on many different screen sizes.

      While most users aren’t on Macs with retina screens a large and growing portion of our users and readers of this blog are using retina or equivalent screens on mobile. We hope to cater to all users whether they are on anything from a Windows PC to a feature phone.

      As far as using different characters in different languages, we are definitely looking into this issue and will hope to resolve it soon. Thank you for your feedback!

  3. avatarjwjb

    What a great post for so many reasons as a primer for designing your website to look great and be easily accessible for the multitude of screen sizes out there as well as tweaks for driving more people to the website through the individual posts themselves while being more readable too. As always, thanks for all of your hard work in not only making Asana better, but in making the entire Asana ecosystem and experience better with these Blog and so many other improvements and tweaks here and there.

Leave a comment