Introducing Chorus 3.0

This article has been imported from chorus.fm for discussion. All of the forum rules still apply.

I started designing the new version of Chorus.fm before the COVID-19 shit hit the fan. My initial sketches were in the middle of last year, and I began playing around with things in Sketch not long after that. My first commit, for the version I’m calling 3.0 of the website, was on February 19th, 2020. However, it was this last month or so of quarantine where the vast majority of the work got done. With not a whole lot else to do beside buckle down and attempt to turn anxiety about the world into productivity, I put together the new website you’re looking at now.

April of this year was the fourth anniversary of this website, and I’ve been itching to take another run at the design and feel of the website for a while. When I first launched the site, it was my first real foray into the world of WordPress, and it was done on a very tight timeline as I knew I needed to make the transition from AbsolutePunk.net by a specific date. I’ve always been happy with what I put together, but I also knew it was never quite right. This new version of the site is virtually everything I’ve always wanted my website to be and was written from the ground up to fulfill my vision of what a music website or blog should be. My design goals were to keep a similar aesthetic to the current website so that things felt familiar while also focusing on new features, simplicity of use, and an obsession with speed and a great mobile experience. I’m proud of what I came up with, and I’d like to highlight a few of the changes.

The homepage is the most viewed page on the entire website, and I wanted to re-think what that experience could be like. What I came up with actually takes a lot of cues from things I learned and worked on back in the AP.net days. I moved away from a column-based layout and decided to put everything into a continuous feed that is focused entirely on showing you the content and getting out of the way. At the top of the page, you’ll see a new feature carousel. This carousel will automatically update throughout the day to highlight stories that I think are the most interesting and worth your time. You can now also see these features on a mobile device and quickly flick between the top five. I like the idea of being able to draw a little more attention to individual articles, and being able to bring this to the mobile experience delights me. On the desktop, if you click the little down arrow under the features, you’ll see a tiled view of more highlighted stories from the past few days and a new “Trending” section that shows the most popular news articles from the past 24 hours. The trending articles get updated throughout the day as people view various stories around the website. Being able to showcase better what’s popular on the site has always been something I’ve wanted to do, and being able to view all of these quickly is a fun way to see what other people are finding interesting. That brings us to the various new options in our newsfeed. You’ll notice that there’s a new sort menu at the top of the newsfeed for quickly sorting all of our stories by various topics. You can view trending stories from the past 24 hours (or the previous week) to see what’s popular and to make sure you haven’t missed anything. And, you can now quickly sort the news by music, videos, tour dates, or see the featured stories. I’ve also added a handy search box right at the top of the news, and all of this is accessible via mobile as well.

I’ve expanded the news stories and added small thumbnails to each. This is a little throwback nod to the AbsolutePunk days and the tiny icons we used to display by each post. I like the idea of being able to quickly scan down the page and see familiar images and know an article I wanted to read just by the band photo next to it. Once I figured out a way to do this without sacrificing too much loading speed, I knew it was something I wanted to add to the desktop version of the website. I’ve also found a way to add the comment count onto the news articles without causing server panics, and as you scroll down the page, you’ll notice other little additions as well. You’ll see recent reviews, interviews, recommended stories, and various other things I’d like to highlight, all built to be there for you to see without getting in the way of just reading all the news. The whole thing is designed to be easy to read, fast to load, and extremely easy to browse and check out the stories you’re most interested in.

Article pages themselves have been updated as well. Again, I got away from a column layout and instead want to focus on the story and any of the media that may be associated with it. You’ll now find recommended stories at the bottom of each article page, as well as the most popular stories of the day, along with easy access to the community comment page for that article, and the article’s tags (more on those later). I’ve also included links at the bottom of every article page to the next and previous articles in our newsfeed. So you can keep clicking along and read everything back-to-back if you’d like.

I’ve reorganized our navigation to make things more streamlined and easy to use. This includes a new revamped Features page where all our big features live. Now the most recent ones are highlighted at the top, and there are quick links to access various franchises we run throughout the year. Looking for our End of the Year lists? Easy. All our playlists? Right there. The browse review section now has review specific search, sort options, and review pages themselves have been streamlined, and there’s now an option for authors to include a featured track if they’d like.

Tag pages have been redesigned to be the best one-stop destination for everything about that topic on our website. It’s where you’ll find all the news about an artist, but also quick links to see all the music, videos, or tour dates we have in our database for that artist. We also now highlight recent reviews, interviews, and offer tag specific search as well.

Our search results now allow for better sorting and filtering to help you find what you’re looking for, and on the release date page, you’ll find links to the album’s thread in our forum as well as highlighted releases for records that are getting a lot of discussion from the community. And, all the pages have been optimized to have a consistent look and feel while loading as fast as possible on both desktop and mobile devices. I may have gone a little crazy obsessing over speed and readability, but I think the results were worth it. I don’t want anyone to visit my site and not be able to find what they are looking for; instead, I want fast and simple. No nonsense, here’s the news you want, all in a feed, and you can read it and sort it and search it however you’d like. It ends up being the most actualized version of what my design tendencies have been for years, a few nods to the past, but with a more modern framework and technology backing.

While there’s tighter integration with our community in various places on the new site (like how articles are better displayed when imported into the forum for discussion, comment counts on the homepage, etc.), there’s no better example than for our supporting members. First, supporting members now will see their notifications while reading the main website. If you’re browsing a review and all of a sudden someone messages you in the forum, you’ll see a little blue notification letting you know. Also, now your theme preferences automatically sync between the forum and the main website. No more confusing checkboxes or weird cookies, instead, one menu: light, dark, automatic.1 You pick your choice, and as long as you’re logged in, your theme will display exactly how you’d like across the main website and the forums. And, as always, supporters don’t see any display advertisements on the website. As an aside, while running all of my optimization tests, I would run them as a supporter, and as not, and the difference is absolutely staggering. Without ads, the website will often load under a second and had performance scores from 88 up to 94 from Lighthouse, while the ad version would lag behind. Still better than most websites, but it’s stunning to see the difference. I wish I didn’t have to put ads on the website, I really do, but I think I’ve integrated them about as best as I can, and right now, they makeup about half of the yearly revenue and so I can’t live without them. However, the ad-free version is by far the best version and experience of the website, and I highly recommend it. It’s only $25 a year, and it’s an absolute game-changer. It’s my idealized version of the website.

Every single page on this website has been redesigned, re-thought out, and reconfigured. This version of the website was written entirely from scratch. I tossed out everything that came before and tried to take everything I’d learned from the past three years about how people use the website and build something that I think can stand for years to come. I hope everyone enjoys the new look at feel. Thank you for visiting the site and reading it each day. I hope that these changes make your experience better.

After doing some minor bug fixes, and hopefully not discovering any large ones, I’ll be taking a slight break from this kind of work to celebrate. Plus, I want to use the new website to write more for a little while. After that, I’ll be looking at what my next project should be, and it’s probably going to be looking at the forum and community and seeing what I can do to improve and update it. I have to find some way to stay busy doing all this quarantine time, right?

Thank you again to everyone.

---

1. Automatic uses your system theme, so if your iPhone or Mac sets Dark Mode at sunset, so will this website.↩

more

Not all embedded content is displayed here. You can view the original to see embedded videos, tweets, etc.