Screen-shot-2012-05-25-at-8.58.39-AM Demo UX Cases

A Smashing Redesign

Given that we love everything UX and design related, it must come as no surprise we are big fan of Smashing Magazine. Their choice of subjects is always spot on, and their articles show an impressive amount of attention to detail. They recently had their site redesigned, and the result is a beautiful, spacious site, designed from the typography out.

I took a closer look at the new design and I’d like to discuss some of the findings with you. I will not speak only based on my own observations however: I set up a Usabilla design feedback test among 30-some of our loyal followers.1 They pointed out which elements they like on the homepage and which they would like to improve, and elaborated on both tasks by leaving notes. In total, I got 220 notes placed on an image of the new Smashing Magazine homepage.

Overview of the Usabilla test

Heatmap on the homepage of Smashing Magazine generated by Usabilla

Why this is a really good redesign

At first glance it’s already clear that the new design puts a strong emphasis on typography and readability. This comes as no surprise to those who have been following the responsible designer Elliot Jay Stocks. Stocks already announced that he would take on the redesign in his excellent article on designing from the typography out:

It goes without saying that the primary goal of a visitor to an online magazine is to read the article, so it was to this particular piece of content that I turned my attention: if I could adequately typeset an article, everything else would follow. General layout could wait.
The way the typography is styled and the fonts are picked result in a gorgeous design and a near perfect reading experience. The serif ‘Skolar’ font is used for the headline and first paragraph, and renders really crisp, even on older Windows and Linux distributions. For the rest of the article, a sans-serif font is used, which leads to less strain on the eyes. A lot of detail went into this.

Smashing Magazine Article

The participants of the test agreed. A selection of notes:

  • I like how the articles are given center attention and how easy it is to read them
  • Good size for the typography
  • I like how easy it is to read this font
  • Clean and aesthetic placement of header on the content page
  • Easy to read font
  • Refreshing to see the type size so generous to begin with, rather than starting at 9pt light grey on a white background
  • I love how readable this is

Another major feat is the responsive design of the site. The layout of the site changes based on the width of the browser screen. Whether you use a smart phone, tablet or laptop, the layout changes while the same site is loaded. If you resize the site, you will notice breakpoints which change the layout. There are four major layout changes, and two more modest ones. Below you can see the layout for a big desktop screen, a laptop screen, a tablet and a smart phone.

Smashing Magazine's responsive design

This makes for a great reading experience, regardless of the device you use. The content is shuffled around, but it is clear you are on the same site2.

Apart from the outstanding use of typography, Stocks’ eye for details makes other, small things stand out. The top menu falls very nicely into the background, which makes the article stand out more. The search bar also is very well presented: it is inviting to use because it is big, has a friendly look and is highly visible.

Some notes on this:

  • Menu placement makes it easy to access and see, but it does not draw undue attention
  • Using the logo as a link to the homepage is normal, but using it inside the navigation is not something I see often. Big props!
  • Very clear menu
  • Awesome. Good place to put social links. They are not in the sidebar anymore, yay!
  • Great navigation
  • Nice cleans icons: they are visible, but not distracting
  • Clear, but unobtrusive social icons
  • Large search element, immediately visible. I like!

Some things that are not so good

Let’s start with a minor gripe: the site does not load very fast, which seems related to a lot of Javascript and CSS loading. Let’s hope this is still to be improved!

More importantly, Smashing Magazine shows a huge amount of ads at higher screen resolutions. Yes, things could be a lot worse: they are only shown when there is enough screen real estate for them. But boy, when they are there, they are there: 16 of them fit in a 420 px wide and 1200 px tall block. They seem relevant for the web professionals audience, but are really in your face. I wonder if this won’t backfire after a while: less intrusive ads might entice more exploration.

What our participants had to say on this:

  • Not so crazy about this block of advertising
  • This column is way too busy. Ad overload! Distracts too much from the content.
  • These ads are too much!
  • This bar is too big, too much on same par as the real content
  • Am I looking for content, or am I looking for ads?
  • Too many ads. I gave up looking. They are too similar and take up uniformed space
  • It shows advertisements, but it is annoying. It is screaming.
  • Too many?
  • Wow, that’s a lot of space for ads.

Conclusion

Apart from the issues with the speed and advertising, I believe Smashing Magazine did a great job with the new design. I have been following them for a long while now, and the quality of their articles has improved greatly, while their design stayed the same. I believe the new look corresponds far better with the quality and the eye for detail that their articles offer.

Of course, I’m curious about what you think of the new Smashing Magazine. Any thoughts on the use of advertising, speed, responsive designs and the setup of the test are highly appreciated.


  1. Our followers are generally web professionals, most of them work as a UX designer. 
  2. Because we tested a static image, we don’t have feedback on the responsive design. We opted to test the variant that was shown on 1280 pixels, and all of our participants supported that resolution on their test devices. 

7 comments

  1. AndyW

    I didn’t even notice the redesign… I’ve been reading Smashing Magazine via Reeder on my iPad for months, and before that via Google Reader. I actually can’t remember the last time I visited the site directly.

  2. Vitaly Friedman

    Hi Jurian,

    Thank you very much for the study and the results! Would you be so kind to send us the full study results? We’re always happy to receive constructive criticism, so your study could help us further improve the overall user experience on the site.

    — Vitaly Friedman, editor-in-chief and co-founder of Smashing Magazine

  3. Jurian Baas

    @Vitaly, sure, we would be glad to! I will email you shortly.

  4. Pingback: A Smashing Redesign – The Usabilla Blog | UXWeb.info

  5. Daniel

    An interesting case and a great study I must say! I did expect more notes on the ‘bad side’ of Smashing magazine’s redesign though. Aren’t there more improvements that can be made?

  6. Justin Mifsud

    Awesome analysis Jurian,

    I loved the redesigned Smashing Magazine. Obviously I naturally assumed that a lot of thought has gone into it but it is always great to see it backed up by a professional study like this.

    So, kudos to Vitaly and the Smashing team and to the Usabilla team for having some of the most talented people in the business!

    Respect,
    Justin

  7. Jurian Baas

    Hi Daniel! Nice to hear from you :) Although most people were overly positive, the amount of advertising is not well received. Time will tell what kinks will get worked out (I hope the speed issue can get solved), and what features of the design will fall short (as almost every daily used design will at some point).

Leave a Reply

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