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

80 Comments

Add your comment


  • # Design Informer
    says on December 02

    Very informative post. Looking at this review of Smashing Magazine’s website opened my eyes to a lot of things.

    Will definitely refer back to this when re-designing my own blog. Thanks, and keep up the great work.

    Oh, by the way, the post format just looks gorgeous.


  • # Design Informer
    says on December 02

    Oh, and I also forgot to mention, the new version that you came up with absolutely looks awesome.


  • # Vitaly Friedman (editor-in-chief of Smashing Magazine)
    says on December 03

    Hello Amrinder,

    first of all, thank you so much for the detail review and re-alignment of the Smashing Magazine’s redesign. We are truly thankful for your time and all the solid points you’ve made with this post. Also a very nice post layout, very impressive!

    We are working very hard to improve the usability on Smashing Magazine. We have already fixed some of the issues that you have mentioned in your post. Please notice that it was important for us to remain consistent to how the Smashing Magazine looked earlier – long excerpts with large images are our “signature” and we didn’t want to change that.

    Orange/blue links for RSS/Twitter are important to communicate their purpose. I don’t think that they clutter the page a lot.

    There is a reason why we need so much advertising on the page, it’s not because we want to earn a fortune with them, but because they are necessary to keep the site alive.

    Personally, I don’t think that it’s wrong to have Twitter/RSS links in various places across the site. Actually, we wanted to give our Twitter updates a prominent position on our pages.

    The illustration of the SM Editorial staff in the footer is supposed to work as a “teaser”, making readers curious and interested about what it actually is, so it is intended.

    You made a solid point with headlines, we will see what we can do about it. Also, you make a very important point about accessibility – we will see what we can do. The SM’s logo doesn’t have an alt-text, because it is not an image.

    Overall, thank you for the great feedback! We will review the design and we will see what we can do!


  • # praveen
    says on December 03

    lovely post. I think this will serve as a check-list before starting any web magazine.

    And yeah… the realigned version is clean and more usable.


  • # John Campbell
    says on December 03

    Wow. I haven’t read such a well thought out and detailed post on design in a while. Definitely a nice breather from all the round ups and lists that clog the pipelines nowadays. Thank you for taking the time to share this.

    Best,

    John

    P.S. Shameless plug: If you ever want to write for DesignBump.com, we would be more than happy to have you.


  • # Design Informer
    says on December 03

    Glad you responded to this Vitaly.

    You definitely make some valid points and I know that you guys at Smashing Magazine are working hard to provide the best possible user experience possible.

    I can’t wait to see what new improvements will come to Smashing Magazine after this article.


  • # Jesse
    says on December 03

    Awesome Post. Very Detailed. Makes me want to spend more time on my Reviews.


  • # Josh Cagwin
    says on December 03

    Great critique and great points here, but some are very subjective.

    Nice job!


  • # Iwani Khalid
    says on December 03

    What a nice read!

    1. Love the layout of the post
    2. Like everyone else, I agree on how well-written and refreshing this writeup is. Very analytical and detailed with good justification to each point
    3. The realigned version looks cleaner and more subtle especially the footer. Only the header lacks the SM identity – the navigation looks like a ruler heehee


  • # Sara Reffler
    says on December 03

    Thanks for sharing this! This is definitely going to be a site I reference for my OWN redesign, as you touch on a lot of points I would have otherwise ignored.

    I think the realigned version is slick, and well-done. Brilliant editorial.


  • # Niki Brown
    says on December 03

    Good critique. I’ve never thought of breaking down the screen real-estate by purpose (content vs ads vs branding) This really helps keep the big picture in check.

    I think more critique and conversation like this needs to happen in the design community. Even the giants need to be kept in check from time to time.


  • # John (Human3rror)
    says on December 03

    you guys are way ahead of the curve. keep it up.


  • # Kyle Steed
    says on December 03

    Overall I like the realignment you’ve shown. But I would have to agree with Vitaly about the reasoning behind giving the ad space so much room, in order for the site to stay alive. Even thought I’d like to see more content, I’ve come to accept that as a part of their site.

    Also, I agree they could tone down the “weight” of their twitter stream, but having more than one area on the site for twitter isn’t a bad idea.


  • # Daus
    says on December 03

    You know what? You made me want to redesign my own site, on a very right now :)

    Thanks! I think I love you :D


  • # Dave
    says on December 03

    Great article and very effective self promotion, well done. You raise some good points although I think to pad out the article you have included some lets say “unnecessary” critisms of the smashing re-aligment. In effect this dilutes the other more poignant observations.

    Nevertheless you have done a fantastic job of offering an alternative redesign/realigmnet of the site. I like yours way better.

    Also just to point out you also use an active homepage link on your homepage.. what is it they say, practise what you preach.


  • # Liam McCabe
    says on December 03

    Sublime post Amrinder. I thoroughly enjoyed reading it. You have definitely taught me a lot today and thank you for including those excellent references.

    I suppose all reviews are mainly opinion based but I have to say I agree with every point made.

    I get the impression from this post that you were trying to perfect Smashing Magazine’s design. The redesigned version you have made certainly has some good aspects but it too, is not perfect. Some points I have collected:

    The header although clearly defined is not balanced as the majority of the header content is positioned on the right side. The current design has categories at the top of the page informing the reader exactly what the website is about. This is also left aligned suggesting it will be read first and not likely to be missed. Your redesign however, includes the navigation along side the logo and below the page navigation. From first impressions the reader has to guess from the logo what Smashing Magazine is about. Whereas the current design informs the reader of the areas it discusses with the logo emphasizing how those areas are delivered, Smashingingly :)

    The page navigation, although spacious does not have equal vertical padding with the logo, which I believe is creating a cluttered look. The category navigation, following the design of the page navigation suggests that the links are subpages rather than separate navigation links. The TOPICS text is also slightly confusing, why is it amongst links and why if there is TOPICS no PAGES text?

    Furthermore, I believe the design is perfect for housing any content. However, with Smashing Magazine certain aspects need to be emphasized. The RSS Feed and Twitter follower account is a huge achievement yet the font-size suggests Smashing Magazine does not deem it important. I also believe the POPULAR ARTICLES (another area that requires emphasis) text could be easily missed and the list have no effect.

    In addition, I think that the advertisement section should have a 3px top border as well as the POPULAR ARTICLES section. Although the smashing magazine book is an advertisement, it still should be separated from the other adverts like how Smashing Magazine’s posts are separated from the network’s posts.

    Finally, with Smashing Magazine’s current design I like the large post images. It separates them from advertisements on the right. It also leads me to scroll down and see the whole image and then more content.

    I love your redesign, and your review. However, it is extremely hard to satisfy all readers and create that perfect design. Nonetheless, you have taught me so much about usability today Amrinder and for that I thank you.

    Constructively criticising someone’s work is great but maybe you should constructively criticise your own before hand (tiny comment box! hehe), I know I will! :)

    Liam McCabe


  • # zeemiDesign
    says on December 03

    This is an amazing post.
    Thank you for putting all this time and effort in doing this.

    It’s a pleasure to read (it’s also beautifully styled), even if I don’t agree to each and every point you criticize about the current design.

    I think Vitaly has some valid points too, e.g. two different colors for twitter and rss-links.

    I really like how you separated the smashing magazine content from the smashing network content, this definitely irritates me about the current Smashing Magazine design.

    I can’t really say that I like your new navigation more than the old one and your focus on usability really costs the site a lot of “style”.

    Regarding your Smashing Forum = Forum point: I really think that it is appropriate to use Smashing Forum, it’s definitely a way to support the brand.

    Once again, great post, great work, kudos to you.


  • # Freddy Gonzalez
    says on December 03

    Wow very very nice.

    I like what you did. It focuses more on High Quality Content

    Which Means its better for the advertisers.


  • # Rohit Arondekar
    says on December 03

    A great example of why design is not guess work and about mixing various hot trends from css design galleries.

    I absolutely love the realigned version of SM — it’s crisp and clean.

    Just one question though — why is there a break in the top-border of the logo and navigation — adds a bit of discontinuity i.m.h.o.

    I hope SM use all or as much of your work as possible! :)


  • # Waheed Akhtar
    says on December 03

    This is just an awesome post related to design and usability. Smashing Magazine is a big place for inspiration to many designers. Many designers and design community think that whatever smashing magazine do is the best. Very few tried to have finger on smashing magazine design. Congrats bro, you have done it. And its not like you said something wrong. You proved it with examples which is very much acceptable.
    Also you write very well. Let me know if you would be interested to write some thing for our blog (definitely design related :)).
    In last, thanks for sharing this.


  • # Navjeet Singh
    says on December 03

    Amrinder, I totally admire this detailed analytical post. One of greatest source of inspiration for designers should itself stand on its purpose very well. some great critical thinking here, i must say. I would love to see someone from smashingmagazine comment on this :=)


  • # Dinesh
    says on December 03

    Awesome post! what a great effort man. You inspired me a lot. Hope I’ll get even 10% of yours.


  • # Design Informer
    says on December 03

    @Navjeet Singh – If you look at the third comment, it is a comment from Vitaly Friedman, editor-in-chief of Smashing Magazine.


  • # Amrinder
    says on December 03

    Thanks everybody for the appreciation and suggestions.

    @Vitaly Friedman (editor-in-chief of Smashing Magazine)

    I am glad to know about your efforts to improve usability of Smashing Magazine. Thanks for considering my feedback. I would love to see Smashing Magazine as a highly usable site so that users enjoy their visit at SM.

    Orange/blue links for RSS/Twitter are important to communicate their purpose. I don’t think that they clutter the page a lot.

    – I agree with you on this point and I never said, “using more colors clutter the page”. I meant to say that it effects user-experience and users might have difficulty in recognizing links.

    There is a reason why we need so much advertising on the page, it’s not because we want to earn a fortune with them, but because they are necessary to keep the site alive.

    – I can understand the importance of Ads. but they should not interfere with the content. The big ad-banner in between Smashing posts looks like post image sometimes. This ad can be used at the top.
    See – http://psd.tutsplus.com

    Personally, I don’t think that it’s wrong to have Twitter/RSS links in various places across the site. Actually, we wanted to give our Twitter updates a prominent position on our pages.

    – Promoting RSS and Twitter is not bad. But I think Twitter (5 links) and RSS (4 links + 1 subscription option in Firefox and Safari) are more than required.

    – Tweets (Twitter updates) hold prominent size and not position (located at 2200px approx. from top of the browser screen can’t be prominent position in any way).

    The illustration of the SM Editorial staff in the footer is supposed to work as a “teaser”, making readers curious and interested about what it actually is, so it is intended.

    – I haven’t asked to remove the illustration. It looks great. My point was, “Brief description about characters would be helpful.” See the Realigned Smashing Magazine footer for more details.

    The SM’s logo doesn’t have an alt-text, because it is not an image.

    – Sorry I missed this point. SM’s logo is a background image.

    UPDATE:
    One more point added to Details overlooked section. 12 Links colors used on Smashing Magazine Homepage

    The visited links in page navigation at the bottom look as if they are disabled. a:visited has been applied, which doesn’t seem to be a right practice. – See Flickr photo-page or Google search page-navigation for reference.


  • # Kean
    says on December 03

    You’ve raised some good points, I can’t say I agree with all of it completely, and there’s some things I’d maybe change about you realigned homepage of Smashing Magazine but on the whole a good read.


  • # Frog
    says on December 03

    What a fascinating read, you have really broken down your points in explicit detail. Some points I agree with, other points are merely objectional from a professional POV. Being a major resource for the design community they could, and probably should focus more on correcting the obvious mistakes. However content is king and SM are industry leaders. A great read, well structured, I salute you!


  • # Amrinder
    says on December 03

    @Dave:
    Thanks. I have removed active homepage link from A Way Back Logo.

    @Liam McCabe:
    Navigation is not intended to communicate site’s purpose, but for browsing. Tag line is used to summarize what the site or company does. See point 2 at http://www.useit.com/homepageusability/guidelines.html

    Navigation always lists Pages and rarely lists Topics. I was not smart enough to make this decision. Khoi Vinh helped me decide by implementing such a navigation style in his awesome Basic Maths WordPress theme.

    Popular articles are provided border to distinguish it from ads.

    I am glad I was able to provide some useful information about usability. Comment box size has been increased.

    @Zeemi Design:
    There are 12 link colors used and not just 2. Smashing Forum point was taken from Homepage Usability Book.

    Can you guys please list the unnecessary points? That would be more helpful than saying, “There are few unnecessary points… ”


  • # Kean
    says on December 03

    You asked about unncessary points, so some I felt don’t quite hit the mark are:

    7. Post title isn’t distinguishable as a link until hover – Given the sites audience and normal convention over post title links I don’t think the title needs to follow the styling of other text links, they will just be expected to be links.

    12. Adding Smashing Forum rather than just Forum reinforces the brand, though has seemingly changed to simply Forum now.

    22. Given that the text does not wrap around this images I don’t think that the position of the images harms scanning, in fact I think it assists it as the white space between the images helps the user locate the next item.

    23. Twitter is a growing communication tool and given Smashing Magazines core audience and purpose then I think Twitter has to be given a strong focus.

    Of course these are just my opinions based on my professional experiences and style.


  • # mars
    says on December 03

    This a well thought-out critique and I enjoyed reading it but I think the result is just…boring. It looks like a template. You raise valid points, specially regarding the ad space, but the uniformity of the links, the scarce use of icons, the small images etc makes the site look overly plain. Design should be a balance between style and substance.


  • # zeemiDesign
    says on December 03

    @mars I don’t think the point of this post was to actually create a stylish web page that should be used by Smashing Magazine (or anyone else as a matter of fact), but just to show how it would look like with a massively improved usability.
    The template Amrinder created can easily brought to a whole new, “stylish” level (with some care and attention).

    @Amrinder I was referring to the two different link colors the twitter and rss links at the top of the page have, not the whole design.
    Thanks for increasing the size of this comment box btw.


  • # Scott
    says on December 04

    Great analysis of the issues, and not just posting to point out flaws, but actually come up with solutions.

    And personally I think that the editor-in-chief’s comment is covering his butt (and his mistakes).


  • # Murlu
    says on December 04

    Wow!

    This is the best post I’ve read in a very long while.

    I think working your way backwards helps you learn with a different mindset. It’s one thing to build something from scratch but taking things apart really gives you context.

    Great job!


  • # Robin
    says on December 04

    Scott, I don’t agree. I think he’s a professional and it was his response to a discussion about a site he was involved in. I, for one, appreciate his responses and his comments. I do think he took some of it personally as would anyone who’s work is critiqued in such a biased way (ie: my design is better than yours).

    Mars, I whole-heartedly agree with your last comment, especially: “Design should be a balance between style and substance.” God forbid we should always box ourselves as designers and follow all the grid rules… it would mean certain death to creativity on the internet.


  • # Brandon Kitajchuk
    says on December 04

    Overall, good stuff. If anything, SM aside, this just breaks down as a really good general list of things to keep in mind when designing and developing User Interfaces. I have honestly never really been “satisfied” with any SM experience. The site is a lot to take in content-wise alone, and then the clutter factor makes it hard to spend much time there. Obviously they have a great abundance of useful content, hence many others and I go there, so no bad words for SM. But, I think a streamlined, cleaner approach to the site would help.

    SM!!! You have a plethora of GREAT content, let it speak for itself more!!!


  • # Tom
    says on December 04

    A well researched and written piece. Loved the annotations!

    I don’t agree with all of the points made, and I’m sure SM will negate some points simply from a commercial point of view (ie: advertising – less of it, and isn’t as integrated into the content) but there are two small points that are sticking out in my mind regarding the flexible fluid grid layout:

    1. The adverts scale down at small sizes, and I couldn’t imagine people who have paid for X pixels advertising space being happy with it scaling down. I do of course see why it’s done, and I love flexible grids working like this, but it’s not something I can see advertisers caring for.

    2. At smaller sizes again, the navigation becomes covered up. For instance if you’re viewing the site at 800×600, “Inspiration” and “Workflow” are being overlapped by the other items in the nav. There’s also some small other bits, but my point is that while a flexible grid is great, it might be better to simply not support lower than 800×600 (which is a minority of users, let alone SM users) or go for a more extreme layout change like the W3C do on their site (where it goes into a mobile-site type of view).

    Just two small points that are constantly coming up in my own work, so I thought I’d point them out to you too!
    But overall, again, great write up and a good read.


  • #
    says on December 04

    You said it out loud…!


  • # Tom Kenny
    says on December 04

    While I think it’s great that you’ve taken the time to analyse Smashing Magazine’s new design, I feel that you’ve completely missed the point. The problem is that you don’t understand the thinking behind why Smashing Magazine made the decisions they have which isn’t entirely your fault but I do feel that you can’t go so deep into a critique/redesign as you have without knowing the facts. You wouldn’t redesign a client’s site without having a firm understanding of exactly what they want and how their business operates.

    In my personal opinion, your design lacks the character and uniqueness that the current Smashing Magazine possesses and looks too similar to many other blogs. Also, I think you need to think about the audience a bit more. The average Smashing Magazine reader is likely to be more tech savvy than the average internet user so the idea of the fold is almost irrelevant.

    You do raise some good points though such as the headings not being obvious that they’re clickable but at the end of the day it’s a blog and people are used to clicking headings, especially web designers and developers. I do miss the green headings of the previous design however.

    All in all, it’s good that you’ve gone to this effort as you do raise some good points especially as Vitaly is very active in seeking out what people think of Smashing Magazine and is always open to any suggestions or ideas.


  • # dorothy jones
    says on December 04

    Right on the accessibility issues and well thought out and *very* by the book *BUT* you under estimate the value of ads for any e-mag out there. The reality of it is beyond the whole point. No site will ever last long or progress without ads and placing them on to the side lines will make any advertiser just go to the next emag who has a more prominent spot for them.

    Realign it further to put more value on ads that sustain an emag too and I’d be more impressed.


  • # dorothy jones
    says on December 04

    BTW, your redesign is now looking more like Stylegala during it’s prime.


  • # PeterChao
    says on December 04

    Nicely written.

    But your version is MUCH worse.


  • # Cedric Dugas
    says on December 04

    Nice extensive look!

    I really like how you re-formatted the content zone


  • # Luke Burford
    says on December 04

    Lots of really good points in here that apply across the board as well as just the SM redesign. Thanks for taking the time on this.

    It’s unfortunate but necessary that so much design has to be oriented around ad sizes and giving them appropriate real estate…


  • # Chris
    says on December 04

    You raise some valid points. Thank you for this. I am continually learning about usability and design.

    (I can’t tab to the Name textbox after typing my comment, btw)


  • # Kevin Holesh
    says on December 04

    I like how you took the time to realign it yourself. Your new design looks great and it is much more usable. The Smashing team leaving out the image alt text surprised me. Smashing Magazine of all sites should have even basic accessibility features.

    Your post doesn’t even go into how much space is taken up with ads on the individual article page. I found in my critique of the redesign that a pitiful 11% of the screen was devoted to actual content, the rest mostly taken up by a slew of advertisements.


  • # Todor
    says on December 04

    Good article! It makes people think more about the usability.
    But you are wrong about some of the points


  • # Sunny Singh
    says on December 04

    @Vitaly: “The SM’s logo doesn’t have an alt-text, because it is not an image.”

    You have to add alt on the img tag no matter what. Use alt=”” to indicate that it should be ignored by screen readers. I do the same with my logo, it’s a transparent gif with the logo as the background declared in the stylesheet. I still do alt=”Site name” and Yahoo! apparently does it too.

    This was a very great post, surprised at the creative format. I like the menu of the current SM, but it should be more informative to the sections and what not. The search perhaps should simply get a new icon, and have a white background on the input.

    Otherwise, some very great points.


  • # TJ Kelly
    says on December 04

    This is the best website critique I have ever seen.


  • # choen
    says on December 04

    nice review for usability. but what about the accessibility, especially for the level of color contrast.


  • # Mustafa Quilon
    says on December 04

    Fine Review!

    I also agree with Vitaly on her reasoning – The Big Images/headings is their signature style.

    However, there is some ambiguity in their design which I believe works out well for them, since it results in a “frantic clicking behavior” in new users. The content and resources is what makes them keep coming back :)

    The Design can definitely be made more accessible and usable, however, your design completely moves away from SM’s style. It’s more usable but loses out on attraction and SM’s style.


  • # Amrinder
    says on December 04

    For those, who think that I have criticized“Smashing Magazine design”, I had no such intentions at all. Rather, I admire Smashing Magazine for the quality of content and I read almost all of its articles. Since, it has provided me with lots of valuable resources, it was my turn to give something back. So, I thought of writing about Smashing Magazine design, because I thought it would help Smashing Magazine improve its usability. I have not challenged their design decision but provided my point of view, with which most of the people agree. I never claimed my design is better or SM should follow or use my design. Rather pointing out usability issues alone, I thought of showing it by an example by designing a page free from such issues. That’s all about it.

    I love Smashing Magazine and look forward to write for them whenever provided with the opportunity.

    @Kean

    Thanks for the list Kean.

    Post title isn’t distinguishable as a link until hover – Given the sites audience and normal convention over post title links I don’t think the title needs to follow the styling of other text links, they will just be expected to be links.

    I didn’t say that Post title link should follow the same styling as other links, I just said that post title is a link and it should be distinguished, at least on hover.

    @Robin:

    God forbid we should always box ourselves as designers and follow all the grid rules… it would mean certain death to creativity on the internet.

    – One can achieve creativity using grids. Check http://jasonsantamaria.com

    @Tom:

    My intentions of using Fluid grids for my realigned design is just to fit it in variable screen size of 1024 and above. So the users even with 1024 can see the design.

    @Tom Kenny:

    You’re right but I never forced my design or suggestions on SM. I have just given my point of view. I mentioned fold to give an idea about the breakdown section which can’t be done using whole page snapshot. So I considered the top of the page which was visible by default on my screen. And I don’t believe in ‘fold’ theory.

    @dorothy jones: I will consider your point in my next realignment project.

    @Chris: Thanks for pointing it out Chris. I have corrected it.

    @Kevin: I am sorry Kevin, they don’t have image for logo, instead they have a background image for that. I missed that point.

    UPDATE:
    Another point added to Details overlooked section. Color of commas(,) between footer links.


  • # 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


  • # The Lootmaar Blog » A Lesson in Marketing
    says on January 17

    […] effort and heap-loads of talent. While googling for a review of Smashing Magazine, I came across a critique of the website. Now this critique wasn’t the usual flat, ugly blog post, but a beautiful, individually […]


  • # User experience design in print media | Graphic Design Blender
    says on January 18

    […] Smashing magazine redesigned their web site and asked for critiques on the design. Smashing Magazine Realigned, an article featured on A way back, uses basic principles of web usability or UX design to analyze […]


  • # 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.