Smashing Magazine—Realigned

77 Comments

Add your comment

• 
  # Design Informer
  says on Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 03

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

• 
  # Josh Cagwin
  says on Dec 03

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

  Nice job!

• 
  # Iwani Khalid
  says on Dec 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 Dec 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 Dec 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 Dec 03

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

• 
  # Kyle Steed
  says on Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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.

• 
  # Jµ
  says on Dec 04

  You said it out loud…!

• 
  # Tom Kenny
  says on Dec 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 Dec 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 Dec 04

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

• 
  # PeterChao
  says on Dec 04

  Nicely written.

  But your version is MUCH worse.

• 
  # Cedric Dugas
  says on Dec 04

  Nice extensive look!

  I really like how you re-formatted the content zone

• 
  # Luke Burford
  says on Dec 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 Dec 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 Dec 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 Dec 04

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

• 
  # Sunny Singh
  says on Dec 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 Dec 04

  This is the best website critique I have ever seen.

• 
  # choen
  says on Dec 04

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

• 
  # Mustafa Quilon
  says on Dec 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 Dec 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 Dec 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 Dec 04

  Main two Images are missing…..

• 
  # Janko
  says on Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 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 Dec 11

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

• 
  # nigel
  says on Dec 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 Dec 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 Dec 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 Dec 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 Dec 17

  Please Smashing Magazine, read this article !

• 
  # aBlogz
  says on Dec 29

  great post

  Thanks a lot

• 
  # Salmen
  says on Jan 16

  WOW Really awesome post, great job

• 
  # The Lootmaar Blog » A Lesson in Marketing
  says on Jan 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 Jan 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 Jan 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 Jan 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 Feb 02

  What says SM finally about this design?

• 
  # Ant
  says on Feb 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 Feb 15

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

Preview: