A responsive new design for the Distilled blog

You might remember that I wrote a few weeks ago about designing for readability. I wrote that essentially as a brief, and today you get to see the results of Richard Westenra’s hard work since then.

Readable design

In my opinion, he’s done a superb job. I’m very excited for you all to see it. (Also - shout out to our product owner Tom Neville who let us push it live on a Friday afternoon - thanks Tom!).

Your first response may well be “why the hell is the font so big?”

Well, our top priority for our blog content is getting people to read what we write. So we’ve tried to adhere to the 100% Easy-2-Read Standard. Although there are a load of other areas of the site that need some love, the blog was my absolute top priority when I took back over marketing responsibilities a couple of months back. With Rich having a four-week holiday in the middle of that time, I’m really pleased that we’ve managed to get the new design live already.

I’d love it if you took a stroll through the recommended posts in the sidebar - they are some of our most loved posts from recent times - and gave us your feedback on the new design.

Now, we have a habit here at Distilled of just shipping things so there’s every chance we’ve broken something. Please let us know in the comments if you:

  • Love it
  • Hate it
  • See something we’ve broken (I know that some old posts need fixing up)

You’ll notice that there’s now a pretty big difference between the blog layout and the rest of the site. Don’t panic. We do plan to make everything else pretty - but we wanted to ship something, see how it goes down, learn from the experience and tweak it.

I’m looking forward to hearing your feedback in the comments.

Will Critchlow

Will Critchlow

Will founded Distilled with Duncan in 2005. Since then, he has consulted with some of the world’s largest organisations and most famous websites, spoken at most major industry events and regularly appeared in local and national press. Will is part...   read more

Get blog posts via email

54 Comments

  1. I love the idea that is a larger font. Its real easy to read and something well worth thinking about. Keep up the good work distilled.

    reply >
  2. My first impression from desktop is positive. From a quick glance on my phone I'd say that it works there too. I don't see a quick way to go to the next/previous blog though?

    reply >
    • Will Critchlow

      Thanks - nice point. We'll take a look at that. All the navigation needs some testing...

  3. Jasmine Aye

    I LOVE this new layout. Great ship!! Whoever's idea it was to add in a button to see the site nav without having to scroll up needs to be bought a beer. It's one of my most favorite features. Well done!

    reply >
  4. Hi Will,

    Love the readability of it all - great improvement and far less cluttered.

    One tiny very nit-picky bug I noticed is that in the 'featured post' area there's a link to "HTML5 SEO", but it's appearing with a broken anchor so appears as "HTML5 SEO/a>". Otherwise, great job!

    reply >
  5. Carson Ward

    The site looks fantastic on my phone, and really great on a tablet.

    My first response on desktop was, indeed, "why in the hell is the font so big?" Followed by, "why is there so much space between the lines?"

    I was also immediately struck by how clean and simple things are now, from the header to the footer. I'm in love with the design. I would buy this template... especially if I could scale down the body text a point or two :)

    We may, collectively, just need to become more accustomed to larger fonts.

    reply >
    • Agree, on desktop the font is too large for my taste, but I know this style is becoming trendy right now for blog content. It'll be interesting to see how it catches on. Love the design on my iPhone though. Great job overall.

  6. I really like it. I have turned more into just focusing on the information. Always the info. Thats what separates one site from another. All those big media companies want to overload you with tons of info and banners.

    Content is indeed great, but being able to focus on it without distractors is what helps that rule even more.

    I personally have turned to Clearly as a Chrome extension to remove the clutter, but knowing that companies focus on putting content first is even better.

    reply >
  7. Honest feedback - couldn't hate it more. The font is so massive I thought my screen was broken (desktop). Checked on my phone and I have to scroll 8 miles to get to the comments.

    As Dave Peiris would say, 'it's like a child made it'

    reply >
    • Actually I wouldn't say that at all, I've been a fan of larger typefaces in blog posts for a while (my own blog uses about 16px). I really like the redesign here, I think it's a great direction to go in.

    • That was a reference to your SearchLove preso Dave, which I thought was a great way to handle the funny font situation.

      Interesting that I'm the only one giving negative feedback in the comments.

    • Will Critchlow

      It's not universally adored - we had some other negative feedback on Twitter.

      We'll see how it settles down and obviously we'll be iterating to make it work for as many people as possible. In a few days we should have some analytics data to review as well...

      Thanks for being honest :)

  8. Hi!

    I am actually surprised that you have considered the 100% Easy 2 Read standard, instead of the usual 3 buttons on the top right corner to enlarge or shrink the text. I know loads of people who would prefer smaller font on screen, although I do prefer this one. :)

    reply >
    • That's a very good point Montse, cheers. Personally, I'd love to add a config button in the icon panel (top-right) with a style-switcher, which would handle this kind of customizability. But that'll have to wait for a wee bit (along with a planned header/navigation redesign for mobile users) while we focus on more pressing issues.

  9. Mike

    I'm in love. I had no idea this was even in the queue, so I can say, objectively, that it's awesome.

    Rich W. is probably my favorite Distiller.

    reply >
  10. I checked the code and it doesn't seem like you have Rel=author tagging setup for your blog authors. I know google seems to have picked up Will's authorship, but the other authors like Chery Percy don't seem to be getting authorship markup. Is that intentional or a temporary oversight in design?

    reply >
  11. Nice work on this Distilled. Some very cool features. Until I read the comments, I thought maybe I'd hit the button to enlarge the font for my laptop :)

    reply >
  12. You know what? You guys are da best of da best now!

    reply >
  13. The best compliment I can give the new design is that I was instantly annoyed at the small font size of the next post I had in my queue.

    It really does make it easier on the eyes and although I might go a shade smaller I definitely love the feel overall.

    reply >
  14. I know you guys are big on testing and usability. So I'm curious if you let people that are totally outside of the SEO/digital marketing world try out the new responsive design?

    And if so, how did that qualitative feedback affect the finished product? Thanks.

    reply >
    • Will Critchlow

      We didn't get much external validation at all - we hallway tested, then we shipped. We figured we can iterate / rollback if people hated it.

      :)

  15. Love the idea of the larger font, I really do. Lately, I've started noticing many websites are hard to read: either font is too small, or gray text is too light (am I getting older?!)

    With that said, I think a bit smaller font (1.25em?) would still be very comfortable to read, without excessive scrolling like with the current font.

    Btw, SmashingMagazine had an awesome post on font-size for copy

    reply >
  16. We have had a responsive site for over a year now on one of our main business sites and it has it's pros and cons. We have found that the actual decision makers who cut the checks are often viewing these sites in outdated legacy browsers.

    When they see anything inconstant they assume it is because we cannot execute (rather than the fact they should update their browser) so we have put standards and compatibility first. Unfortunately it is very hard to have the best of both worlds at the moment (even with modernizr and the html5 shiv for IE) so it looks like we have to wait a while longer to go 100% responsive on our primary company website.

    reply >
    • This is definitely a move that's going to help blogs and news sites more than company pages, for the time being. But with more people going mobile even a company site is going to have to look good on a phone. I feel your pain about the investors/bigwigs though, they always seem to have IE6 on their machines.

    • @Jeremy - We have a separate mobile / ipad friendly theme but that whole approach is so 2008. Give it another year or two and it will get there. Now we have retina displays to look forward to! (hides under desk in a fetal position)

      @WIll - Great job. The only bug or inconstancy I can find is this - http://twitpic.com/b9tkz4 - Other than that (and what others have already mentioned), the layout is way more readable on mobile for sure.

  17. You read my mind.

    The font size is huge!

    I am so accustomed to reading 10, 12, 14 pt font. :)

    reply >
  18. Great job. Responsive designs are a little controversial but hardly anyone argues they aren't the way moving forward. After carefully looking at my analytics over the summer I noticed a big increase in mobile and tablet visitors, so I decided to go with a responsive HTML design.

    Two months later, my mobile traffic is really climbing and I've gotten tons of positive feedback from people who want to read stuff on their phone or tablet, so I'm very happy with the choice. Even computer reading seems easier with these designs. This site looks great in my browser and tablet.

    reply >
  19. First impressions on iPhone - great job! There seems to be nothing more/nothing less than needed. Very easy to use. I did notice though that on my iPhone 4 there is a slight horizontal scroll bar.

    reply >
  20. Love it! A+ all the way. Have fun at searchlove.

    reply >
  21. Lee

    I'm not sure I understand all the rage against the font size. If you think it's too big, you can reduce it, too small, you can increase it using the ctrl and + or - button. No website is going to be 100% suitable for 100% of the people 100% of the time. At least these guys are making the effort to make it readable for as great a proportion of the audience as possible - that is commendable. If we all try to be a little more adaptable wouldn't we all get a long a little better?

    reply >
  22. Looks great, responsive is defo the way forward.

    reply >
  23. I for one love the fonts, it's big but it's great on a retina screen. It makes reading very easy. Although I'd expect big fonts to do better with less tech savy crowds. Geeks are used to tiny pixelated fonts and tend to like it.

    reply >
  24. The new layout looks great, I really like the large font. I'll be honest though, my internet connection here is shocking and I was thinking as the page was loading, "more css is about to kick in".
    Bit of a parrot comment but I like it. Great use of lightweight responsive design,well done.

    reply >
  25. What about a white background?

    reply >
  26. While I like the idea of a bigger font, this is a bit too much.

    The font size used in the comments here would be enough, and you could use the same or a different font for blog post<>blog comments.

    I can only imagine this is in mobile, it will be Kilometers (that's right, kilometers) before one could scroll to the bottom.

    By the way, anyone here favors Georgia over Verdana for the best font for readability purposes?
    I may do a variation of your theme settings on a personal project of mine - but not with the godzilla font 。◕‿◕。

    reply >
  27. Hi Will,

    Great job – Seems like a big improvement through a desktop browser. Will be sure to have a look through some other mobile devices and browsers. But non the less – great job. Well done.

    reply >
  28. Will Critchlow

    Thanks for all the feedback, guys. We have rolled out some tweaks based on your comments :)

    reply >
    • Joao

      Will, are you doing the tweaks? My gf thought this looked great and wanted to replicate the look to one of her themes but we both lack the skills for that. I would try georgia though, it would be interesting to see how it goes against verdana or trebuchet.

  29. Nice work guys...and now it's bloody obvious that my OWN site & blog are way overdue for a makeover to bring them into the 21st Century :-)

    reply >
  30. I'm liking how clean the design is, but the font is a little too big on larger monitors, great on mobile / tablet though.

    Only issue I've come across was finding the social buttons. It might just be me being a dunce and incredibly tired, but while reading "Segmenting Keywords Using SEOTools" it took me 3 scrolls through the page to find them.

    reply >
  31. @Michael - we're in the process of re-doing ours as well - full responsive and animation etc etc all the bells and whistles to impress clients.

    Our old site is long overdue for a face lift......

    reply >
  32. Came across your site on twitter on my phone and my first impressions of the site was very good!

    It's a lot easier to read than most other blogs that I've been reading on my phone. That's why I usually try to read blogs on my laptop but if all blogs were like this I'd probably do a lot more reading on the move.

    reply >
  33. Hi Will,

    Looks great! Personally I like the larger font size. You're making it easy on the old eyeballs. Keep up the good work.

    reply >
  34. Site looks great, one small issue I see on the mobile version is that the image attached to the post "Don't build links, build bubbles ..." is to big and not scaling well, that makes the website look bad when I had my phone in landscape mode.

    reply >
  35. hannah

    Hi Will,

    We were saying this week how much we liked the larger font size and the line spacing of your blog, if I was to be a tiny it negative it would say it is just a touch to big, a smidge smaller and it would be perfect.

    reply >
  36. Looking good! More and more blogs seem to be going with larger fonts now. Mashable just re-launched with a new design which features big font. It's hot!

    reply >
  37. Have to say I'm a big fan, the typeface does seem a little on the large side from my POV but a big fan of it in general. Nice work guys!

    reply >

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>