Changes and Reasons Behind the New Scotch.io Design

Last week we launched what we consider is the 4th major version of our site. We’ve been moving pretty quick through our redesigns and they come out of necessity.

Every time we want to add a new major feature set and expand Scotch, we find that moving forward with a clean slate is a good option. We don’t start from 100% scratch though. WordPress is our backend and it has been able to adjust to our needs relatively easily.

In the future we may look at a fully custom solution like Laravel or even a Node based one, but for the meantime, we want to focus on design and content and not infrastructure.

I’d like to point out a few of the things that brought us to this new design and explain a lot of the choices. As always, this is a work in progress and any feedback is valuable to us. We’ve received a lot of feedback on Twitter and are looking into all of it.

Let’s get down to the features!

Goodbye Sidebar

We loved our left fixed sidebar. It was always there for navigation and has been a part of our design since the very beginning. As we’ve gotten more content, more features, and wanted to create a more encompassing experience for our tutorials (demos, links to the next articles in a series/course, and more), we found the fixed sidebar started to restrict the amount of room we could work with, which directly restricted our features.

Even with the old design, we had the main sidebar and even had a top bar for the topic links and the search bar also used to be up there.

scotch-menu-old

This took up way too much room and felt too distracting. The new top menu has consolidated all those features into one and brings a cleaner feel.

scotch-menu-new

We are debating adding more features to the bar (adding social icons and throwing the tagline in there), but overall we’re happy with the cleaner approach.

A Better Grid

The evolution of our home page has always been based on the grid style and our large cover photos. The last iteration of our site had great article tiles, but as our site has grown and we’ve added new guest authors, great content has gotten buried down the list faster.

I know it’s not that big of an issue since “the fold” doesn’t really have too much bearing anymore, but on page landing, barely 8 articles/ads are visible on the old site.

scotch-home-old

The new site packs in 11 articles, with the tops of 4 more popping into view. (Both of these images have a height of 1400px).

scotch-home-new

More Content Needs Better Discovery

With more content, we had to find a way to let users more easily find the content they wanted. When we added the tag list bar with Angular, Node, Laravel, and the other popular tags, we found they were greatly used and made it easier for users to find various articles.

We wanted to take this a step further and bring that sort of discovery directly to the articles in the grid.

Comments and Share Counts

We’ve added comment counts and share counts to articles in the grid to help users better see which articles are getting high engagement.

scotch-article-comments-shares

Compare this to our old article grid that didn’t really have much in the way of metadata or content discovery. Although the minimal is pretty, we felt the info was important as well.

scotch-article-old

Soon I want to add a color variation on the shares so that the higher shares have a tint of red to them.

Article Tags in the Grid

In the spirit of quickly finding articles, we’ve also added the color-coded important tags to the articles in the grid. If you’re just looking for Angular articles, then scroll through and quickly find the red “angularJS” tag.

scotch-article-tag

It’s kind of neat to go to a specific tag also and see all the tags in the grid. (Forgive the weird ads)

scotch-tag-node

Flexbox to the Rescue

The previous site grid relied on a great jQuery plugin called matchHeight to make sure all articles were the same height. With optimization in mind, we wanted to remove any dependencies that we could.

After taking a look into the latest browser support in flexbox, we decided it was time to make the jump. IE10 and below is the only unsupported browser, and our IE10 and below traffic makes up 0.40% of our overall traffic.

Flexbox was an absolute pleasure to work with. We did all our flexbox work custom, but if you’re looking for a good flexbox based grid system to start your projects, check out Structure by Ken Wheeler, our resident React.js lover.

A Vusial Guide to CSS3 Flexbox Layout and Properties

If you want a good primer on Flexbox, also check out yesterday’s article: A Visual Guide to CSS3 Flexbox and the Flexbox Playground.

Light vs Dark Grid

We’re also just having some fun with color schemes for the grid. We have a light and a dark theme available and have been considering which to go with. We are also thinking of giving users the option to toggle the theme they like. Let us know which theme you like the best.

scotch-dark

scotch-light

Account Creation and Login

A lot of the features that we want to implement in the future needed a solid account creation/management system. Some features included:

  • Favorite and save articles
  • Forums to ask question and join a community
  • Comments/Forums/Social leaderboards with Scotch prizes
  • More we’ll talk about soon

We didn’t want people logging in through the default WordPress login setup so we hooked into it and created our own AJAX WordPress login. All sign up and log in features are easily handled from the dropdowns in the main menu bar.

Sign Up:

scotch-signup

Log In:

scotch-login

Favorite and Save Articles

An often requested feature was to save articles for further reading. Now that we have the groundwork to let users register their own accounts and login, we can save these favorites to users accounts.

scotch-favorite

After you login, you’ll get the Favorites link in your menu bar where you can see articles that you’ve favorited.

scotch-favorites

Forums

One of the features that we’re really excited about which isn’t fully ready for release yet (we’re hoping in the next two weeks) is the forums. We’ve found that a lot of people look for help for their applications and they either paste their entire block of code in the Disqus comments or vaguely try to explain their problem without code samples.

Also, a lot of questions either come through our Contact Us form asking about the best CSS framework or this and that. We’re very grateful to have the level of users that we have. Intellectual, helpful, and have that open source spirit of helping each other. We think that forums would be a great way to solve both of these problems and help the community help each other.

Courses and Videos

One of the big pushes for this release was to consolidate the different sections of our site. As we grew, we wanted to add video tutorials, so we created Lessons and Courses in addition to the other main parts of our site. So towards the end of our last version, we had:

  • Bar Talk
  • Tutorials
  • Collections (group of tutorials)
  • Lessons (video tutorial)
  • Courses (group of lessons)

It got confusing. So this version now has:

  • Bar Talk
  • Tutorials (can have a video)
  • Courses (group of tutorials with/without videos)

Much simpler and cleaner. We’re still working on how it all works together and if you find an issue with navigation between articles, let us know.

We’ve also made it simpler to click over to the next tutorial in a course if it exists:

scotch-next-in-course

Article Hero: All the Meta Information In One Place

Here’s a comparison of how our tutorial pages start.

scotch-article-old

And the new version:

scotch-article-new

We’ve consolidated the meta data for an article into one place, the article hero section. This includes

  • data about the article
  • a video if it exists
  • the share counts
  • the demo links

While the look isn’t too different from the old, the biggest issue was that we needed a place to put the tutorial’s video if it existed.

We’re still tweaking this and this will surely change as we add more video tutorials in the future.

Hybrid Tutorials

Another big thing we want to focus on is that we want to have hybrid articles. Not just video tutorials like some other sites provide, and not just written articles.

The goal moving forward is that the majority of our articles will be written and be accompanied with a video tutorial.

It will take more work, but we believe that many of you out there can benefit from the format you prefer.

Based on our poll from a few weeks ago, it seems written is the leader so we’ll never ditch that approach.

We have also been talking over interactive type tutorials like CodeSchool or Codecademy. Something like that would be incredibly fun to build and we are eyeing stuff like that in the future.

Article Outline

This is a small update but one that we feel provides a good amount of value. The previous outline feature stayed fixed above an article and felt like it took part of the reading space away.

scotch-outline-old

Now the outline is off to the left and indicates the changes in sections as you scroll down an article.

Thanks for Supporting

So those are the important design changes we made and the reasoning behind them. We understand change can be hard and disorienting but please bear with us as we tweak the design to ensure that Scotch will be better as we move forward.

Hybrid text/video tutorials, forums, saving articles, more discoverability, and so much more are things we’re excited about in this release. We hope you enjoy them as well.

Let us know what you think in the comments! This is still a work in progress and constructive criticism is welcome.

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.