This week, Smashing Magazine, a truly great resource for web designers and front-end developers, launched a comprehensive redesign of their site, headed up by the ultra-talented Elliot Jay Stocks. Predictably, the site is beautiful, thoughtfully laid out, well-executed, and responsive. Like, really responsive.
In fact, the site has six — count ‘em, six — unique layouts, split by five breakpoints. It’s quite an impressive feat to have built a design that adapts in so many ways based on the size of the viewport it’s displayed in. But I can’t help but wonder if we’ve gone over the top, here.
Looking at the layouts from narrowest to widest, I tried to deduce the reasoning behind each. The narrowest is clearly needed, as it’s appropriate for phones and other similar devices. The second layout is, in my estimation, a poorer user experience than the first, what with the way it pushes the core content pretty far down the screen vertically. The third layout is my personal favorite from a UX standpoint. The navigation here is clean and clear, and the content is front and center. The fourth layout brings in their ads, which obviously are necessary from a business perspective, but it also strangely chops off the section navigation (Coding, Design, etc.) after the first five items. The fifth layout is similar, but thoughtfully places the section navigation on the left. It, too, is one of my favorites. Then a sixth and final layout inexplicably moves the utility navigation (Network, Shop, etc.) from the top to the far left.
From my perspective, Smashing could have created a better overall experience with only three unique layouts (the first, third, and fifth). And, perhaps more importantly, they would have greatly reduced the complexity of maintaining the site by doing so. I can’t help but wonder if maintaining six unique layouts is going to become a nightmare down the road. To be completely frank, I can’t really find a good reason for having six layouts other than to impress fellow web geeks.
I’ll say it again: the Smashing Magazine redesign is extremely well-done. It’s beautiful and well-executed, and it stands as one of only a few big, content-heavy sites I’m aware of going the responsive route and doing it well. The team is to be commended. I wouldn’t nitpick at something if I didn’t think it was good enough to dive deeply into. I’d love to see Elliot or another member of the design team write up their rationale for taking the responsive nature of the site so far. Maybe I’m missing something.
I hadn’t tried out the design for responsiveness when I saw it, but having given it a quick play I agree wholeheartedly with your conclusions. My monitor isn’t actually big enough to trigger the 6th layout, but the 4th one feels utterly strange. Given that the 3rd and 5th both have the beautiful left hand navigation, it feels like the only purpose of the 4th is to bring in advertising revenue. I understand entirely why they’d have done this, but it’s a shame it has to come at the cost of a good user experience.
I have the same feelings about which of the lot are the “best” layouts. I think the item I find most unusual is that for the 6th layout (presumably for huge screens), they chose to keep the logo comparatively small. In the layouts for smaller screen sizes, their logo becomes larger.
Layout 6 (small logo/large screen): http://cl.ly/0M3y1s321p2T2i31453n
Layout 4 (larger logo/smaller screen): http://cl.ly/2Q2z2c201w2R1C15240a
I’m not arguing that it was a bad design decision. I’m just noting that it seems counter to what design requests would come from a company not focused on web design. With more screen real estate, I would assume they would request the design use a full tube of Make the Logo Bigger Cream™.
Thank you for your input, Jeff.
We are working hard on squishing bugs in the new design; legacy content did introduce a couple of issues that we had to carefully consider. Yet unfortunately some of these issues showed up only after the redesign launched which was quite unfortunate.
There is a rationale behind design decisions at each breakpoint. What was crucial for us in every single step was that our articles offer a perfect reading experience at every screen resolution. So we focused on the line length and line-height which essentially informed our design decisions. The emphasis is on accessible and readable content. Of course, we’ll need to see if some adjustments are necessary to improve the user experience for Smashing Magazine’s readers.
We’re looking forward to feedback and constructive criticism and will work best over the next weeks to squish bugs and improve the site.
Thank you for your write-up!
Great post Jeff. I tend to agree with you on the subject. Especially with the second layout, the content is pushed down quite far due to the navigation. It’s looks cluttered, and confusing to an extent.
I have never been a fan of the advertisements on Smashing. Of course they have to make money, but the fourth layout takes away readability, and the ads and overpower the content.
One last thing: ads in between posts. Killing me. Other than that. Great job Smashing. The redesign is great, and the other layouts are very well developed.
Hey Vitaly!
Thanks for taking the time to respond. Line length is certainly a fair reason to have so many layouts (although I wonder if you couldn’t have achieved ideal line length simply with
max-length). My main concern with the many layouts approach is maintainability—it’ll be interesting to see how it works out for you in the long run in that regard.In any case, keep up the great work. You guys are doing terrific stuff for the community.
I agree, I know when I was doing my own site, it took a ton of time to get it to look right at every size, and I was only really working with one layout - I can’t imagine the work it’s taken to do 6…plus it still has a ton of bugs and some readability issues - not a fan of the super texture over the main nav, which is hard to read and took forever to find.