Web Critique Week: SmashingMagazine.com
Web Critiques is a take on examining a current piece of web art and breaking it down. We show off the good, the bad, dos and dont’s, why and how it works (or doesn’t), and the list goes on. This week we’re going all out and doing a Web Critique a day—today we’re bring you SmashingMagazine.com
As we continue to look at top noch blogs this week (Mashable and TheNextWeb) it is only fitting that we take a look at Smashing Magazine. Fortunately for us, they just did a new redesign to kickstart their 2012 year; unfortunately for them we’re here to break it down (for the greater good of course).
Now, I am tentative to describe and take a look at this homepage since its possible everyone may have a different experience. Smashing Mag took considerable effort to make sure that their site scales correctly to any device or screen size…it does, it looks great, and it works great; this is one of the hot topics circling their new design. On a standard 21″ display with 1920×1080 resolution, you should see the whole experience. Nothing falls short—you get the ads, categories, other pages, the works. As your screen gets smaller, or you grab the corner of the window, Smashing Mag does a smashing job of deciding what is the most important information for you to see—no doubt their branding and the content, cleverly leaving out the ads.
The removal of the ads is a nice touch for 2 reasons: These ads aren’t anything pretty and they’re distracting, but also because on smaller formats you’ll lose your customer (making reference that blog users are customers, member or not) if they had ads that get in the way of the content they want to see. This is the idea of customer expectation. Most users have an expectation when they land on a link or post or what have you, anything that does not align with their expectation (good or bad) can result in them bouncing right off. Manage these expectations by being honest and don’t use headlines or images that aren’t fitting to the article just to grab user attentions.
About that homepage. While they have different experiences you can have based on what device you’re using, we’re gonna look at their homepage from a desktop perspective. After spending so much time with TNW, I am hooked on how they accomplish and utilize their branding. Looking at Smashing Magazine, its clear that their brand isn’t the focus. They hide their logo in the top left and, overall, their colors are some what generic. All this passive-aggressive approach to branding does have 2 main advantages in this case: focus on the article content and focus on ads. This is great in that you can easily find your content but there is a rift in the balance of their pages. I often find my eye bouncing around between article content and the ads making it difficult to focus on the article.
First thing I can say is – “it’s about time”. Smashing Mag has fixed a number of issues with their old site – it’s probably best that we didn’t critique the old Smashing Mag. Let’s focus on the new – responsive design is by far their best feature and upgrade. You can see the design fits within Elliot Jay Stocks wheelhouse of clean, subtle layout and design. The same old problem still arises – ads, Smashing Mag is by far the most popular design blog out there – and yet they still pack 16 ad banners on the site. You would think they could figure out a better way of making money. For me it seems like it’s more greed than anything. I understand it’s a business and it needs to make money, but it seems like they are making more than enough of it.
Depending on resolution, the entire layout changes, and to be honest I tend to like it better in a smaller window. When the site is blown out full screen, the logo shrinks and seems to disappear, and the navs get messy in the vertical format—I’m not sure how great of a decision that was. I also find the right sidebar now to be a bit TOO ad heavy. Believe me, I am an advocate for display advertising, but it does tend to take away from the content in this new layout.
Function and Style
Their homepage retains all the info you need to find exactly what you’re looking for. Buttons at the top take you to different pages and are discreet making sure to not detract from the experience. Smashing mag also recognizes some of their most popular topics and categorizes them on the left for easy looking. Unfortunately, they hide their search feature opting for more clicks. Its hard to find if you aren’t looking for it and because of the rift between content and ads, you seldom find your eye traveling up to locate it. The post detail pages don’t differ much at all when compared to the homepage (so they wont get their own category); they don’t have any unique ability to share media socially like Mashable or deviate much from their homepages exact style and I find the lack of differentiation, confusing.
For me the best thing other than the responsive design is the left navigation. Love the double knock up tab navigation – you feel like your on the Smashing Magazine site when your their, as well as the Smashing Network without leaving the site. It’s focused and consistent. I also like the hover effect on the category and sub-category labels. The new colour scheme is soft and settling, at the end of the day the new site offers a great user experience without losing it’s focus on the content.
Overall I think the Smashing Magazine redesign was a successful and a much needed update. Not sure that they need to veer SO far away from the Smashing that we have all grown to appreciate, but there are certainly a few changes for the better. The major one being the responsiveness of the site, I can dig that.
Bring on the Feet…I mean Footer
The footer does a nice job of managing my expectation, mostly. They continue their soft style right down to the bottom and they showcase only relevant information for the blog. Its clear that Smashing Magazine recognizes success in people who search for content solely by clicking through categories, it seems this is how most of their users look for content. Otherwise, the foot does a nice job of bringing together important and relevant content. And then, as I am singing the praises of this footer, we find a cute little kitty. There isn’t much to say about this except that they added in the cat for fun sakes…so we’ll let that slide.
The idea here is to take real world examples and explain what we think were the design decisions and share those thoughts. This is a great way for novice and veteran designers to find things to debate and hopefully learn from. We are showcasing the Inspiredology Web Critiques this week by taking some big names and breaking them down, one day at a time.
We also want to encourage user submissions—break down a fan’s portfolio or website—submit it and we’ll take a look. Recommendations or suggestions just send us a tweet @inspiredology,@thejellymon, or email me.