Smashing Magazine—Realigned

Smashing Magazine Logo

With over 173,900 subscribers and 90,300 Twitter followers, Smashing Magazine is well known among designers as a source of high-quality content. Recently, it has been redesigned and Smashing Network has been introduced. But the site needs better Information Architecture and there are a few usability issues as well.

You make me think!

When I’m looking at Smashing Magazine’s homepage it makes me think, most of the thought balloons over my head have question marks in them.

Things that make me think

Smashing Magazine – HomepageSmashing Magazine homepage

  1. Navigation is ambiguous. The idea of putting tags under categories doesn’t seem logical because one tag can fall under various categories.
    Label ‘Work’ can be taken as SM’s portfolio.
  2. Active Homepage link on Homepage.
    – [ Refer point 43 ]
  3. Search Bar is more fancy than usable. It hardly looks like a search box. It has visible space for just 19 characters. Search icon is not as recognizable as Search button.
    – [ Refer point 48 ]
  4. Extra Large Twitter and RSS-Feed icons are catching too much attention. Two separate links (text and icon) for the same action in one block.
  5. Multiple (around 7) link styles are used.
    – [ Refer Point 20 ]
  6. RSS Feed and Twitter links are repeated many times.
  7. Post title is a link and can’t be distinguished until hovered.
  8. Ads are everywhere. In the top 1200×1045 SM area (on iMac 24″ in Firefox with main menu hidden) 32.68% of total screen real estate is devoted to ads.
  9. Why additional links under ads?
  10. Lengthy excerpt along with a big image occupies a lot of space (esp. above the fold).
  11. Avoid Exclamation Marks: ‘Advertise with us!’ need not be yelled out at users.
    – [ Refer Point 26 ]
  12. No need to use site’s name when referring to its own content. E.g. Smashing Forum can be labeled simply as Forum.
  13. Large post titles are hard to scan. Sometimes they (titles) are wrapped in more than 1 line which makes it even worse.
  14. Large icons in front of news items create distraction.
  15. No need to display incomplete job description. Job title is enough.
  16. Huge images in every Smashing post pushes valuable content down the page.
  17. Icon restricts header view.
  18. ‘Smashing Network posts’ heading’s size and color are almost similar to SM post titles and thus create illusion of link.
  19. Titles should describe the content under it. ‘Popular posts’ instead of ‘Popular’.
  20. Smashing Network Posts: Do users need Smashing Network introduction every time they visit this page?
  21. Lengthy Popular (posts) list.
  22. Images used in front of Smashing Network posts restrict user from scanning post titles.
  23. Tweets given too much weight.
  24. Page Navigation at the bottom is ambiguous – it’s not clear whether it is for SM posts or SN posts.
  25. ‘All’ link under categories section is confusing. It opens all-posts page rather than showing categories.
  26. Brief description about characters would be helpful.

Details overlooked

Design is in the details. With design, paying attention to small details – and in some cases, obsessively focusing on ‘what isn’t right” – can take a design from “nearly there” to “there” and beyond.
Naz Hamid in an article for A List Apart

  1. SM-logo-detailsLogo text is not perfectly aligned.
  2. sm-bg-detailsImages along Smashing Magazine Network posts have a poorly styled background.
  3. font-stack-detailsHelvetica is repeated twice. Verdana has a different x-height than Helvetica, Arial and Geneva.
  4. sm-accessibilityAccessibility neglected. Smashing Magazine logo has no ‘alt’ text. Main navigation links are hardly visible when images are turned off.
  5. SM-link-colors12 link colors used. [ View on Flickr]
  6. Footer-category-navigationCommas(,) between categories have dark gray while links have light gray color.

Re-aligned

Smashing Magazine team has put a lot of efforts to provide good user experience. However it needs to be aligned, arranged and cleaned so as to make it more usable. I have made my best efforts to design a clean and usable Smashing Magazine homepage, but there can be a few things which I might have missed or added which effect user experience. Let me know about these points.

Realigned Smashing Magazine Homepage is tested in Firefox 3.5, Safari 4, Chrome 3, Opera 10.10 and IE8.
No IE6/7 support.

Recovery Steps

Smashing Magazine – Realigned HomepageRealigned Smashing Magazine Homepage

  1. Realigned version is more focused on content.
  2. ‘Home’ is no more active link on homepage.
  3. Search bar is simplified with 32 characters visual space.
  4. RSS Feed and Twitter links are moved up in navigation with clear visual presence without extra prominence.
  5. Single link color used to provide better link recognition.
  6. Medium size of post titles makes it easy to scan.
  7. Short excerpt and small images help fit more content in less area.
  8. Removed ‘Smashing Network description’ from the way of daily user who already knows about it.
  9. Shifted ads to one side to distinguish content from ads. Large ad banner which was earlier used in main content section can be placed at the top of the page. E.g. BBC
  10. Improved footer with brief about section.
  11. Effective sidebar widget powered by CSS (no background images).
  12. Reduced popular posts (now 20) to enhance scanning.
  13. Clear and meaningful link titles
  14. Smashing Book is also promoted
  15. Content stands tall with ads in sidebar now.
  16. Fluid grids are used to serve different screen resolutions.
  17. Sprite image is used for icons
  18. CSS powers the design. Just one style image is used (icons-sprite.png). CSS is used extensively to keep the page lightweight.

Breakdown of Screen real estate

In Realigned Smashing Magazine Homepage, the content area has increased upto 52.48% from 30.62% in original Smashing Magazine Homepage. Advertisement area is decreased to 8.6% from 32.62%. Rest of the sections have minor changes. See images below for detailed information.

Smashing Magazine

bd-sm[ View at flickr ]

  • Content 30.62%
  • Advertisement 32.62%
  • Branding 1%
  • Navigation 8.45%
  • Self-promotion 0%
  • Un-used 27.25%

Smashing Magazine — Realigned

bd-sm[ View at flickr ]

  • Content 52.48%
  • Advertisement 8.6%
  • Branding 1%
  • Navigation 10.14%
  • Self-promotion 3.63%
  • Un-used 24.14%

References and stuff

This realignment project started 1 month back when Smashing Magazine announced redesign and asked for feedback. I enjoyed this self-initiated project which helped me learn a lot by reading deep into some really good books and articles by some intelligent people in web design industry.

I have worked hard on details and know that some are still left there, hidden. I know you guys can help me refine this design by your valuable feedback. Waiting for comments from Smashing Magazine team and designers out there.

Referenced books and sites

Related Article

Reviewing Woorkup.com

78 Comments

Add your comment


  • # Mustafa Quilon
    says on December 04

    @Sunny Singh I think you missed the point. The Logo is a background image and does not need the have an alt text. In fact it cannot :)

    @Amrinder I like this post design. Well Presented as @Niki said above, we need to have these kinds of discussions happen in our community…


  • # Dweep
    says on December 04

    Main two Images are missing…..


  • # Janko
    says on December 04

    Nice article and nice to see Nielsen’s style of site deconstruction. If I would do deconstruction I’d do it the same way. I also like the layout of this article, good to have descriptions next to each image.

    However, I’d agree with Tom Kenny. Although your design is aligned with basic usability principles it’s a bit generic and personality of SM is lost which might strongly influence overall readers’ experience.


  • # django
    says on December 04

    A very interesting project.
    I think your redesign is very good but :
    there is a lach of colors, i put color:#F15932; on the links and It is more colorfull.
    Maybe I think the design is too epurate, for a magazine such as smashing the design should be more impressive !!!


  • # AnneFG
    says on December 04

    Great article, really enjoyed reading it and it has made me think twice about my sites.

    I think your redesign looks ace too!


  • # Chad Mueller
    says on December 04

    Fantastic article and critique… I do agree we should be analyzing a lot of sites like this…

    Thank you for taking the time and doing this… I am sure it took a good chunk of your time..

    I am grateful it has helped me think of designing sites in a different way…


  • # Vladimir Remenar
    says on December 04

    It’s been a while since I read such an detailed post regarding design, today more than 50% of blog post comes to listing stuff… But that’s not why I’m writing right now.

    Naturally, most of people will agree that your design is focused on usability but in every article or book I have read, authors always state that all rules of usability cannot be used for each and every project. The art of designing a great site it to find a middle ground between usability and design in general (ad space, visual identity and so on).

    You do make some excellent points with point 3, 4, 5, 6, 7, 11, 17, 18, 19, 20 and 23 and I completely agree with those points as those points can be altered without impair to the visual identity of Smashing Magazine. Popular post doesn’t have to include so many of them (maybe 20 or 30). Twitter posts could be a lot smaller. Twitter and RSS icons are really not necessary as such if it is so important to show numbers of Twitter followers and RSS readers (maybe as background images under the number of readers and followers). And so on, I don’t have to repeat all you have written, you did a hell of a job :)

    With all other points I have to disagree.

    Ad space is quite necessary for Smashing Magazine to survive. Number of users reading Smashing Magazine every day generates huge load on server and comm links that can be expensive if you want first class service.

    Lengthy excerpts and huge images made Smashing Magazine different from numerous blogs around the planet and it has become their trade mark.

    “Smashing Forum” is “Smashing” as well as “Smashing Jobs” aren’t just “Jobs”. Get it? It’s not just another forum :)

    Large title posts: the same as lengthy excerpts and huge images.

    Characters at the bottom is something that every user will experience differently. My brother immediately started to scan for additional information (and that is good marketing, it’s a teaser). I thought of it as a really nice and well positioned drawing.

    Colours of the links for RSS and Twitter are something that just by the colour reader can recognize what they do, isn’t that good usability? For other 10 colours of links I agree with you. It should be cut down to 4 to 6 colours.

    As for your design, it is as I mentioned focused on usability and as I have mentioned earlier, as with all thing you should be moderate with everything including usability. I will not discuss the aspect of liking it, because “likeness” is a matter of subjective impression and we all should be objective with strong arguments.
    Good usability points in your design are colours of the links (do they miss underline?). Smashing network posts are a joy to read in this layout and “What is this link” is a ingenious solution for explanation of Smashing network.
    Page navigation should be numbered but I really don’t have a clue how to solve that problem and your solution is better than current solution.

    I believe I have covered everything… And, please do excuse my English :)

    P.S. inspirational music in the background: 30 Seconds To Mars – Kings and Queens :) :)


  • # Julian
    says on December 05

    you can finish what you started and make a beautiful wordpress theme. would be very nice. of course it’s just an idea. great post btw.


  • # Marius
    says on December 06

    I have retwetted this post, it’s amazing and you made me think twice when i inspire my works from others.


  • # Marcin Galeza
    says on December 07

    Dude, you doing a great job with this article, but I’m curious why someone who knows a lot about UX have a website, where a header with logo and tag lines takes about 50% of entrie screen on MB with firefox? Don’t get me wrong, but it isn’t consistent.


  • # Nathan Pope
    says on December 09

    Wow what a great in-depth analysis of smashingmag. I am definitely going to be checking back here next time I do a site break down.


  • # Johan - Portugese Wijn
    says on December 09

    Excellent post, very interesting to read your thorough reasoning for your design decisions, which I mostly agree with.

    I know that there might have been some comments if you would have left out your own proposal, but I think that might have been better as I think it is generally quite bland (completely driven by usability) and I really do not like the look of the header navigation (the footer is great though).


  • # veturi
    says on December 11

    Great post! Very helpful and informative. Smashing Magazine staff also had some valid points. Thanks a lot!


  • # nigel
    says on December 11

    What a superb article – worthy of smashingmagazine. Isn’t this what blog posts are supposed to be like? I hope ezine editors are paying attention.

    A couple of things I would quibble with. First is the logo – it’s small size contrasts with the smashing book icon on the right and unbalances the page. Second, in the navigation, there’s top-level links have more whitespace between them and their top borders than the secondary links just beneath them. Thirdly the RSS and Twitter links are drowning in whitespace to the left. Like you I would prefer their location in the navigation strip, but for the sake of tidiness, in this design they would look better in the right column, above the book promo.

    Apart from that it’s a significant improvement. Well done!


  • # cancel bubble
    says on December 15

    Hello Amrinder,

    I enjoyed reading your breakdown of the SM site. If you’re looking to do another realign, I openly invite you to use my site, http://www.cancelbubble.com


  • # Louis
    says on December 17

    Very nice job on this analysis, Amrinder. I can’t say I agree with everything, I think you were overly picky on a few things — but you definitely brought up some good points. Great job.

    And thanks for using me as the example author. :)

    Oh, and it should be noted that when you added the description for the character illustration, it’s actually not in the correct order. Ursula is 3rd, not 4th, which is different from the about page. :)


  • # Fonda LaShay
    says on December 17

    great job! there new design it painful for me.. i used to read the site daily- but now out of confusion of what is going on and headache from my eyes going everywhere.. i just check in randomly.

    You did a great design, hope they take your advice!


  • # jeromeM
    says on December 17

    Please Smashing Magazine, read this article !


  • # aBlogz
    says on December 29

    great post

    Thanks a lot


  • # Salmen
    says on January 16

    WOW Really awesome post, great job


  • # Joel Glovier
    says on January 25

    Hi Amrinder,

    I am also a UI/UX web designer, and I wanted to give you a little feedback on this self-initiated redesign of SashingMagazine.com from the perspective of somebody who regularly uses Smashing Magazine (I even have the SM Book!).

    First, while I don’t agree with all of the points you made in your initial critique – I must say that I like almost everything you did in your redesign.

    Topmost I must say that the redesign conveys more of a sense of being content driven and user oriented, rather than advertising driven and advertiser oriented. As a regular smashingmagazine.com visitor, I do get that impression often.

    Also, while Vitaly claims that large posts are their “signature”, as a user I do not feel it contributes any to my experience and rather like how you’ve proposed to present the posts instead. It actually does give me a sense that I can scan or browse more of the content than before, as in the “large post preview” version SM currently uses I often feel like I would have to “travel” further down the page to see more which often I just don’t feel like doing.

    One suggestion in your redesign, however, would be to list more than two articles, such as perhaps 6 or even 8. Also, rather than just an “Older Entries” button, I would prefer to see a list of page number results 1 2 3 4 5 6…etc.

    Another idea along this vein would be to have some type of script that dynamically feeds more posts right into this same area. In that case, maybe two could still be appropriate. The script could even be set to fade into new posts automatically after so many seconds so the user knows it’s a dynamically interactive area.

    From the users standpoint, I also really like how you’ve made the links standardized in terms of color and size across the whole page. Since I’m a web designer and have not thought about this from that perspective before, I was shocked to really experience how much less I had to think about what was a link and what was not. My only suggestion would be in better support of Smashing’s brand, the links could be a different color such as red or orange. Perhaps orange and red on hover?

    Also, I must note that the description you have of Smashing in the footer connected with the characters is much more appealing than the current version at SmashignMagazine.com – for a couple reasons: 1) I have never even noticed those characters before and I’ve been visiting SM for at least a couple years. I think adding the description makes them feel much more like they have a story and less like they are just some random illustration. 2) Even if I had noticed them before, I would probably never have clicked them because I wouldn’t really want to waste time going to a whole other page to learn more about SM. I’m there for the content, so I don’t care much about the SM itself. But having that little bit altogether in the footer is inviting enough to read and unobtrusive enough not to scare me off.

    Again, great work!!


  • # Amrinder
    says on January 28

    @Joel:

    Thanks for the detailed feedback (esp. from the Smashing Magazine reader’s perspective).

    … Vitaly claims that large posts are their “signature”

    I agree with the point of having something unique in your site/blog which makes it stand out in crowd, however, its important to consider whether our so called ‘signature’ enhances UX or vice-versa.

    It took me almost a month to redesign Smashing magazine and I deeply considered every element (sidebar, footer, etc.) so as to make it more useful than the current version. However, I’ve noticed that they haven’t changed anything. People, who commented here, agreed with most of the points, but Smashing magazine seems adamant to stick with their current design lacking details (e.g. 12 link colors, “coding” instead of “code” in main-navigation).

    I agree with all of your suggestions and will implement them in future (when I’m free to give another shot to Smashing Magazine).

    Thanks again, Joel.


  • # Design ideas
    says on February 02

    What says SM finally about this design?


  • # Ant
    says on February 08

    Personally I found myself disagreeing with most of your points, and while your layout was clean, it sucked any character out of the site, and Smashing Magazine was always one for character!

    Also the focus of your points is totally about UX and does not take in to account commercial issues such as advertising and search engines which both are clearly important for Smashing Mag to succeed (in the real world there has to be some balance).

    I’d really like to get down to individual points, but I don’t have the time you clearly put in to your post. But I would like to just draw out the navigation points and say well done for identifying the issue with accessibility with no images, but I would suggest that keeping a HOME button in the navigation all over the site is helpful for users to keep everything uniform and recognisable.

    Finally the 12 different links issue, all the links are clearly recognisable and are ‘usual’ ways of displaying links, apart from the article headers, and to be fair the fact they are links are just for those people who ‘expect’ them to be links, it’s first and foremost to identify the article (plus it helps with search engine linking). It comes across as if you think 12 different ways of linking is like putting 12 different fonts including Comic Sans on a page, I don’t believe this can be seen in the same way. Standardising link format in articles or menus or sidebars is important, but to standardise them across a whole page and site, ergh, that’s one surefire way to suck any life out of a website, and that’s what your redesign has done.

    PS. Sorry had to squeeze one more thing in, Logo: from my experience, don’t mess with the clients logo, even if it is does have layout issues.


  • # Saifur Rehman
    says on February 15

    I am Just Spellbound. Hard to believe that people here have such mojo. Pretty impressive. Keep up.


  • # dattai
    says on May 16

    i love smashing magazine


  • # Saket
    says on May 22

    Toooooo Awesome Post buddy!
    its like an inspiration for me, maybe i should give my blog a re-design.
    Aweomse stuff!


  • # Dave
    says on May 24

    Love this approach of carefully dissecting an existing site’s design for usability issues. Like a few other people in the comments, there are some business-requirement issues I disagreed with you on for the realignment, but overall, I think your redesign would be a welcome change to Smashing Mag. Just pointing out a lot of those little usability issues will probably help them out a lot (if they’ve ever looks at this…), even if they would never actually adopt the full redesign.