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.
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.
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.
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
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.
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.
- Our followers are generally web professionals, most of them work as a UX designer. ↩
- 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. ↩