Smashing Magazine

Smashing Magazine is an online magazine and book publisher that is known to be one of the most successful magazines for creative professionals. Founded in 2006 and fueled by content from the Web community itself, the magazine has more than 4 million monthly users, more than a million followers across multiple social networks (More than 1 million on Twitter alone), and publishes some of the most useful books on web design and development. Smashing Magazine is also behind SmashingConf—a conference run across multiple cities around the world, gathering useful insight and a friendly environment for designers and developers to connect and learn.

Project Summary

Client: Smashing Magazine, Germany
Project: In addition to running workshops and giving talks at their conference SmashingConf multiple times, Smashing Magazine hired me to build a strong, scalable, semantic, repsonsive and accessible front-end foundation for their 10th anniversary Web site redesign.
Project date: Summer–Fall 2016
Project duration: 4 months
Project URL: https://next.smashingmagazine.com
Services: Front-End Development.
Responsibilities: Building a strong front-end foundation for the new Smashing universe: the magazine, book shop, events and job board, as well as the new membership dashboard. Halfway through the project, my repsonsibilities included designing what was then left undesigned of the project. More details below.
Technologies used: HTML5, SVG, CSS, JavaScript
Libraries/Frameworks: None

Please note: the screenshots shown in this case study are screenshots of the UI I built and finished early December 2016. The UI or some of its component styles [may] have changed since then, as the Smashing team [may] have made some changes to it after my work with them was finished.

Please also note that the content in the screenshots is not the real content of the magazine. I was working with static pages and most of the content I used was placeholder content and images, so that is what is shown in the screenshots as well.

Please also be advised that this page contains a lot of images, so you may want to refrain from viewing it using your current mobile plan.

Screenshot of the Smashing Magazine homepage
The new Smashing Magazine homepage.
Screenshot of the Smashing Magazine Navigation on desktop
The new Smashing Magazine search + navigation dropdown.
Screenshot of the Smashing Magazine Navigation on mobile
The new Smashing Magazine search + navigation dropdown on smaller screen sizes.
Screenshot of the hover effect of the articles in the homepage grid
The hover effect of the articles in the homepage grid.

Background

Vitaly Friedman, Smashing Magazine editor, scheduled a Skype call with me in May 2016 to discuss a certain project he had been working on. As we talked, he told me that they—the Smashing Magazine team and himself—had been working with Andrew Clarke for a few months to redesign Smashing Magazine in preparation for the magazine's 10th year anniversary.

The Smashing team used Andy’s designs as a starting point and decided to go for a bolder creative design direction driven by the results Andy delivered, so, around the same time he contacted me, Vitaly started working on a new design direction with Daniel Mall, and was looking for a front-end developer to help them build the UI for the new magazine.

As Vitaly put it, he was looking for a front-end developer whose work and code he can trust enough not to have to double-check the quality of that work afterwards. I was humbled to know I was the first person he thought of that met these qualifications.

Vitaly briefed me of the project, and let me know that Dan was getting started with the design in June. I was still working on the COBI project at that time, which I finished working on mid-June. In the meantime, Dan was working on the design, and he got me involved in the discussion about it from the start. Even though I couldn't officially start before August, I was still in the loop of what was happening by following the design discussion and providing feedback in the Trello boards the team set to discuss the project.

In August 2016, I signed the contract with the Smashing team and got officially started with the code.

Dan had a limited amount of time for the project, however, and so by the time I started working, Dan was finishing off his part in the project and no longer delivering any new design mockups or assets. I did, however, get to discuss the design enough with him to get a clear idea of the direction he was setting for the magazine and what impressions he wanted the new Smashing “character” to make. Some components in Dan’s design and mine were inspired by Andy’s earlier designs as well. So the whole redesign is a collaborative effort from many people.

Some Design Highlights

Right from the beginning of the project, Dan talked to everyone on the team and gathered feedback from everyone about what Smashing Magazine is to them and what they expected of it.

I believe the most relevant design contribution I made was emphasizing the importance of the community behind the magazine. I always felt that authors were underrepresented on most Web magazines, even though their contribution is the most important one as it is their content that fuels those magazines to begin with. If I were to suggest design changes, I’d suggest starting with this. And that’s exactly what I did when I was discussing the design with Dan. Giving authors a more prominent place and space on the magazine is what I suggested.

Smashing Magazine, being what it is: a magazine by the community, for the community, had better reflect that. With the feedback he got, Dan put great emphasis on the authors of the content everywhere on the magazine, starting with the single article page, which starts with the author bio, thus putting the authors in the spotlight and emphasizing their importance. So the article reads as: "Jane Doe wrote this article", as opposed to “Oh and by the way, this article was written by Jane Doe”.

Screenshot of the upper part of the Smashing Magazine article page.
Articles in the new Smashing design put the authors in the spotlight by giving them the most prominent area of the page, thus placing emphasis on the importance of the people writing these articles.

As a matter of fact, this conversation-like interface and design was also reflected on other areas of the magazine, such as the article list on the new homepage:

each article listing emphasized the author who wrote it
Each article listing emphasized the author who wrote it by speaking to the reader and starting the conversation by mentioning the author before the article title.

Not only do the avatars have the same tilted square effect as the Smashing logo, but they also come with a very nice hover/focus animation effect as well:

The author avatar hover and focus animation effect

The tilted avatars were intially a part of Andy’s design mockups, and were ported into the new design because they beautifully conveyed the relationship between the magazine and the authors that contribute to its content and therefore its success.


After Dan’s direct contributions to the design came to an end, Marco Digonjic took over the design and designed the Membership Dashboard of the magazine. Marco also contributed throughout the entire project by providing feedback to the design after I took over later in October.

When Marco also became temporarily unavailable and had to focus on other commitments, I took over the design part completely. By the time I did, the Books, Events and Jobs sections of the magazine were left undesigned, so my job was extended to design those sections as well.

Following the direction Dan set at the beginning of the project (and this is where the early discussions with Dan showed the most results), I designed those sections, using the same boldness and style Dan started.

I gotta admit: the part I'm most proud of designing is the Smashing Conferences page—a.k.a the Events page. I was particularly looking forward to the redesign of this part of the Smashing “Universe” because I never found it the prettiest nor the most intuitive to use of all the Smashing magazine sections. It always took too many clicks to get to the informations I needed to get a clear overview of the conference: speakers, talks, locations, and more. Moving from a multi-page structure to a one-page, simple, clear and straight-to-the-point structure was the most satisfying part.

Screenshot of the Smashing Magazine Events page
The new Smashing Magazine Events page that I designed. The header section—more specifically the design of the city name with the flag and the call to action—were also inspired by Andrew’s initial mockups.

I also worked directly with Smashing Magazine’s favourite Illustrator Ricardo who was brilliant at converting my vague ideas into beautiful illustrations. I'm not a cat person but it's very hard not to love the cute Smashing cat he created.

I asked Ricardo for a ticket illustration which I initially wanted to use as a background for the main call to action on the page—the Get Tickets button. However, since Vitaly preferred to keep the button’s style minimal, I ended up using the ticket to represent a... well.. ticket! When you purchase one or more tickets, the checkout page displays these tickets in a fancy design as shown below:

Screenshot of the Smashing Magazine Tickets checkout page
The new Smashing Magazine tickets checkout page that I designed.

Of course, the Events section also included pages for workshop and speaker details.

The new speaker details page.
The new speaker details page.

I’m really proud of these pages. ☺️ I also designed the Books page(s) as well as the Smashing job board.


Possibly the most challenging of all design requirements was making the new Smashing navigation work for the different requirements we had:

The navigation was initially designed to be collapsible and hidden behind the Menu button. So, the header of the magazine initially only contained the logo on the left, a wide search input field in the middle, and the menu button on the left.

Inside the dropdown, you'd find the main menu items leading to the four main sections of the magazine: Articles, Events, Books, and the Job board. The navigation was also designed to include the different article categories as well as have the search input field animate down into the dropdown when the menu button is clicked.

Screenshot of the initial Smashing Magazine navigation design
The initial navigation was hidden inside a dropdown menu on all screen sizes.

Then, when you start typing into the search field, you'd get a short list of the most relevant search results, with an option to explore all the other related articles as well.

Screenshot of the Smashing Magazine navigation with the live search results activated
The live search results that were designed to be shown beneath the input field, inside the dropdown.

The navigation was brilliant. And I loved it on every possible level. But I was a bit in doubt about the fact that the navigation items were hidden on larger screens as well. I’ve always been a proponent of showing these items when there is enough screen estate to do it. Dan had some reasoning as to why he hid it, and there was long discussion about it. We initially left it as is. I built the navigation as per these mockups. It worked wonderfully and the live search that the back-end team used was so fast that you’d literally not get a chance to even see the fancy loading spinner that Dan had also introduced. There is a video showing how the navigation was meant to work.

However, the navigation had to be changed and tweaked a lot (emphasis on a lot) before we finally decided on a design that we could stick with.

Business as well as other user experience considerations had to be taken into account. The fact that the navigation was hidden behind a dropdown proved not to work with Smashing's business model and revenue sources. Markus, Smashing Magazine CEO, emphasized the need to show the navigation items on larger screens.

But if we were to keep the original design intact and show the items underneath the search field, the header would become too tall. And given that the article pages start with the author bio (which was an intentional design that was not going to change), the article page became problematic because the tall header pushed the article title further down, below “the fold”, which was also unacceptable.

We discussed the different possible solutions for over four weeks. I built different variations for each new desicion and, after testing, each one proved to be problematic in one way or the other, especially after adding a new items to the original four: the Membership link.

So at one point I thought: The only way to make it work for all the requirements was to not keep the initial structure intact. I thought we could shuffle the order, and instead of hiding the items in the dropdown, we could hide the search field in the dropdown.

So the navigation would work as follows: on large screens, the menu items would all be visible next to the logo on the left and the menu button, which was initially a menu button, would become more of a "search and explore" button. Instead of reading "Menu", it would read "[search icon] Topics". Once clicked, the dropdown would animate the search field as well as the topics/categories list. After all, the topics list is usually mainly used to explore or find specific articles, and so is the function of the search field, so it sounded like the perfect way to make this work.

Screenshot of the Smashing Magazine Navigation on desktop
The new Smashing Magazine search + navigation dropdown.

Of course, the menu items were hidden on small screens again, so in that case, the menu button woudl read “[search icon] Menu”. That is, it would make it clear than once clicked, you open the menu as well as the search component. And since both were combined into one dropdown on screens that are usually not tall enough to show everything at the same time, I removed the menu item descriptions altogether and turned the navigation into a simple list that didn't take up much vertical space.

Screenshot of the Smashing Magazine Navigation on mobile
The new Smashing Magazine search + navigation dropdown on smaller screen sizes.

This design was a winner. And I felt quite accomplished after having designed it because, believe me, the navigation took a lot more time to design than any other component in the magazine. After weeks of discussing and tweaking, we finally had a winner we stuck with.


Another design decision I made was to make the Smashing illustrations a main part of the design. Everybody is familiar with the Smashing Conf cat. And more importantly, everybody loves it. (Even those who are not fond of cats, like myself, find it hard not to like it. 😃)

Smashing Magazine has this playful side that needed to be more prominent and the best way to express it was using the Smashing cat more. We had a Smashing cat created for the newsletter component, for the printed and digital books, the Smashing cat greeting you when you first got in to your membership dashboard, and one to give you a high five after you checkout, as well as one in the 404 page.

Screenshot of the Smashing Magazine 404 page
The new Smashing Magazine 404 page.

Vitaly wanted to take the playfulness with the cat even further so he suggested adding some sort of a repsonsive game to the footer, where the illustrations change as the viewport size changes—starting with the bird happily singing in the cage, and ending with the Smashing cat eating it. Or, does it? 😉 You’ll have to find out for yourself!

The Smashing Magazine footer
The Smashing Magazine footer
The Smashing Magazine footer

Adding playfulness to the Smashing design using the Smashing cat was only part of the fun, though!

I wanted the entry point to the Smashing membership to also reflect the fun and quirkiness, so that the user gets that “feel” from the moment they decide to join the Smashing community. So I made the login, password recovery and sign up pages bolder by using the new signature Smashing tilt to the form which would otherwise be boring. Of course, the form will rotate back to a normal position on hover and/or as soon as the input fields are focused. So, whether you're using a pointer or keyboard to navigate to the form, you’ll not have to worry about tilting your head to fill it. 😃

I’ve included more screenshots of the design below. Check them out! I know that some components have changed after I left the team, so you may notice some differences when the design goes live. But the designs below are the ones I built and delivered by early December.

Screenshot of the Smashing Magazine Navigation on mobile
The new Smashing Magazine Login page.
Screenshot of the Smashing Magazine Navigation on mobile
The new Smashing Magazine account creation page.

Testimonials

It was an incredible honor and fun to work with you on our redesign! Thanks for the incredible work... I know you worked very hard and you put a lot of ideas and love into the project — I'm sincerely grateful for that!

I've seen lots of frustration with other projects, eventually resulting in calling names. So I really loved how you were working with everyone together — especially with people who are difficult to deal with.

Thanks for all the input, love, and ideas you gave to the project. Fantastic work, and brilliant in so many ways!

Photo of Markus Seyfferth

Markus Seyfferth

CEO Smashing Magazine

http://smashingmagazine.com

It’s very hard to find people doing great work and people you can trust — Sara is one of them. I chose to work with Sara because I knew that I wouldn’t need to double-check and control and revise and remind but instead can rely on the great work being done. I wasn’t disappointed.

Sara brought in not only her technical skills but also her sense of design into the Smashing Magazine’s redesign. Her input was invaluable, and always on spot. Sara can be difficult at times in the sense that she challenges your ideas and never gives in easily, which means you’d have to make a strong point to support your UX ideas before implementation. That’s good because she challenged by assessments and thoughts for the best of the project, improving the overall results in terms of usability, accessibility, maintenance and longevity of the project. I like that quality a lot.

Highy recommended.

Photo of Vitaly Friedman

Vitaly Friedman

Editor, Smashing Magazine

http://smashingmagazine.com

Screenshot of the Smashing Magazine Books page
The new Smashing Magazine Books page.
Screenshot of the header of the Printed Books page
The header on the new Printed Books page.
Screenshot of the header on the new Printed Books page.
The header on the new eBooks page.
Screenshot of the Smashing Magazine eBooks Bundle details page
The new eBooks Bundle details page.
The new Smashing job board.
The new Smashing job board.
The new Checkout complete and order confirmation page.
The new Checkout complete and order confirmation page.
The Smashing dashboard Membership tab
The Smashing dashboard Membership tab.
The membership dashboard empty state
The new Membership dashboard empty state.

A Few Technical Details

I set out to build the front end using no JavaScript frameworks, and I did. I had a fantastic local setup to work with.

Netlify is supplying Smashing Magazine’s entire backend (including CMS, and APIs for authentication, e-commerce, subscriptions and comments). Matt, from Netlify, had a great setup that he moved into a Github repo which I then cloned. All I had to do next was to npm install and npm start for the project to start running smoothly and most notably: blazingly fast.

We used Gulp as a task manager, and Matt converted my static components into Preact components. We were both working in the same repository. Any drastic changes were made in separate branches which were only merged once everything was ready and approved to go.

I don’t have strict CSS naming methodologies, but I am a proponent of the BEM naming conventions. I don't follow the BEM rules strictly, though. I only use `__` and `--` to indicate structure and modifications on components. I also used some basic and only a few atomic classes—utility classes, so to speak, where appropriate.

Matt’s setup also included Babel, which means that I got to take advantage of some of my favourite ES6 functions. (Array.from() is bae 😍).

Everything else was pretty straightforward. I created static pages but was working on the end product at the same time. Meaning that, the pages didn't need to be “delivered” to another developer who would then have to work with them from scratch. Matt and I were working simultaneously, and everyone on the team was involved with the entire process and progress all the time. Matt plugged the content from the magazine in at some point, all straight into my templates, and it was good to go. The process was incredibly smooth and it's probably the best I’ve worked with among all my projects so far.


I learned a lot in the process of building the magazine. I’ve been challenged to come up with techniques I’d never come up with before, as well as use and modify existing ones that I also thought I’d never have to use. Some techniques are definitely more hacky than anything.

I will be writing a series of short articles about some of the techniques I used instead of a long case study here, because otherwise it would literally be way too long for anyone to read. You'll be able to find the articles on the blog.

In the meantime, you can find some of these techniques in the form of slides linked below. These are the slides for my "A Smashing Case Study" talk that I gave at SmashingConf Freiburg and Barcelona. Both conferences took place while I was working on the project so the slides are in no means exhaustive, but they do cover quite a lot of stuff. Feel free to browse through them. Fair warning: the file size is huge. Feel free to download them slides and view them offline if that's easier for you.

This image takes you to the slides PDF file. The PDF is more than 200MB in size.

If you prefer listening instead of reading, you can watch me talk about some of the challenges and the solutions I used in my SmashingConf Barcelona talk. The talk will be posted here as well as soon as it is published. I recommend watching the talk because it explains some of the more tricky techniques such as the layout technique we used to build the individual article pages. It was definitely an interesting project on many different levels.

Like what you read and think your next project could benefit from my skill set? Get in touch. Let’s build something great together! Hire me