Making a website: The Commonwealth

The-Commonwealth--Desktop

A couple months ago, we in The Commonwealth launched our official website, which I personally designed and developed. It felt appropriate to have the website launch in promotion of Urban Soul and our newly found partnership with local label Cellar Door Records, but the real need for it was a practical one.

Since releasing Souvenir in 2011, Bandcamp was our primary connection to our listeners. As our first EP, making it completely on our own was an incredible challenge, and Bandcamp’s ease-of-use really attracted us because it took such a load off our backs when distributing the album digitally. Two LP’s later, and Bandcamp was effectively our main website; it had a good ranking in search engines, our contact info and music was immediately accessible and its tracking tools offered a lot of rich information. With Cellar Door Records, we knew that our distribution channels would be growing, but in some cases splitting on the user-experience side of things. We still wanted a singular site that summed up who we are.

Thankfully, Bandcamp affords the ability to embed any music it hosts into any other website with their player widget, even if they’re managed by different accounts. We had been using this method for sharing our music on social networks (and also this blog, as part of the sidebar), but I realized we could leverage it for our own website, virtually tying together our entire discography and band information into one place.

Months later, I thought I’d share my thought process over the short period of time it took to create The Commonwealth’s website (about two weeks).

Goals

  1. Consistency with the visual design of Urban Soul‘s physical artwork
  2. Make something that the other members in the band would appreciate
  3. Bring all of our content together, concisely
  4. Serve multiple audiences:
    • An introduction to new listeners
    • A point of reference for existing fans
    • A resource for press and anyone looking to work with us (venues, etc.)

The design serves each of these audiences simultaneously. I looked at the most frequently asked questions we receive as a band, and realized that the website itself should be their answers.

Content & Aesthetics

Whether you’re a music listener, another band looking to collaborate on a show or a venue looking to book acts in general, the first thing most users want is the music. Since a stream of the new album is “above the fold” and just beneath the navigation, previewing our music takes no additional guess work, scrolling nor page views. Additionally, our entire back catalogue is also available without leaving the index page.

When it comes to content, the most important thing for us to say up front is that we have a new album. Hilary Bovay has been doing so much wonderful photography for us this past year, and that lead to us asking for her help on the artwork of Urban Soul. She captured a lot of subtlety in the details on the cover photograph, so it felt right to feature it as a backdrop to information about the new album. Plus, it really helps establish a hierarchy.

The look of the website mirrors the style guide established for Urban Soul. The neon-light font is reserved for headers and/or short phrases, while larger bodies of text pull from the same off-black font on off-white background color combination — a subtle background texture is meant to evoke the back cover of the album. Lastly, any photography on the site goes to the edge of the screen, similar to how it goes to the physical edge of hardcopies of the album.

Information

Besides for, “Where can I find your music?”, The other most frequently asked question we have is, “When/where are you playing next?” We get this question online, in emails, mid-conversation and especially after shows. Direct information about our upcoming shows is a must-have (date, venue/event, etc.), but we also link Google maps coordinates right into the venue listings in addition to Facebook events that artists and venues already manage for further details.

The show listing is our most up-to-date schedule, and that can affect everybody from show-goers to venues looking to book us. Previously, our Bandcamp page would automatically pull in show info from Songkick, but that service’s queries are often inaccurate, advertising show dates we aren’t playing in locations we’ve never even been to (it said we were in California on the same day as our release show in Cleveland). Over time, we’ve learned that some things just need to be done manually.

Although we still collaborate with our own personal contacts from time to time, Cellar Door Records is our primary booking agent and helps us keep everything in order. If you like what you hear and see, the information to contact them about it immediately follows our photos section to close out the page.

The User Experience

tcw-mobileThe About section was the last thing added to the website, though it was nearly forgotten. The way we see it, once you know if you like a band’s music or not is when you’d start looking into them further. It’s at the top if you’re looking for it right away, but it won’t take you away from the index page and it addresses the questions we receive most in interviews. However, by virtue of the page itself, links like “Music” & “Shows” among streams of our music already says “we are a band and this is our music.” I didn’t want to make a user sit through a long-winded biography of us before anything else, because ultimately that interest won’t happen until we’ve captured their attention, which has to happen through the music.

The past year or so for me as a designer has focused on learning more about responsive design, a must-have in our mobile-age of computing. If you’re new to the concept, view the site and scale your browser to be skinnier. No matter what size device you’re on, it will dynamically repurpose the site’s layout to your best fit your screen’s size.

Since thecommonwealth-music.com launched, 17% of its views have come from mobile devices, which makes me glad that I spent the time to prepare it with mobile viewers in mind. The more we get use to interactive conventions on touch screens, the more today’s music culture is experienced through smart phones and tablets. When it comes to the expectations of playing music on a device only a few square inches in size, something as universal as a play button can say a lot about what your website has to offer. If we were going to stream music on our website, it needed to be contained within one that supported such ubiquitous behavior.

Enhancements

Besides for the expected show schedule growing, there are a few things I’m looking to improve:

  • Load times
    • Although there are only about a dozen images on the site in total, all of which are optimized for the web, the site loads slower on certain networks than I’m comfortable with. I’m currently looking into what I can do to cut down on this.
  • Additional content
    • We’ve already added a separate page for all of our lyrics, but more photographs from this year’s shows (and finding a way to organize them effectively) will be coming soon. There’s a small archive of photographs from our recording sessions that I’d like to integrate as well.
  • Design refinements
    • Once load time issues are resolved, I’d love to reconsider how some of the layout works. I’ve sketched out a few ideas for more background images to break up the flow, and ideally I’d want to feature larger views of past album artwork.

Troubleshooting

Note: This part will probably not make sense to you if you don’t dabble in web design and/or development, in which case you may want to skip it.

For all of the things that could’ve gone wrong in creating the site, I wasn’t expecting custom font files to be completely rejected by browsers — and only after the site was live. Upon an inspection in Chrome, I found that the font files were being held back from loading. From what I could gather in my research, by loading the fonts the server thought it was granting visitors unintentional public access to those files. The only way to lift this restriction was by adding an .htaccess file. (Granted, I learned that most newer server technology knows to generate this by default. Mine was older, and thus didn’t generate one many moons ago.)

Lesson: if your font files aren’t working and you swear you’ve done everything from testing locally to triple-checking your CSS links, it might be a remote server-side issue like it was for me. Here’s an example of what my .htaccess file ended up looking like. I had to include this in my fonts folder (this will become a hidden file as soon as you change its name to “.htaccess”, so I found it’s best to start with a plain text file):

# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------

# allow access from all domains for webfonts
# alternatively you could only whitelist
# your subdomains like "sub.domain.com"

<FilesMatch "\.(ttf|otf|eot|woff|font.css)$">
 <IfModule mod_headers.c>
 Header set Access-Control-Allow-Origin "*"
 </IfModule>
</FilesMatch>

# webfont mime types
AddType application/vnd.ms-fontobject eot
AddType font/truetype ttf
AddType font/opentype otf
AddType application/x-font-woff woff

# webfonts and svg:
<IfModule mod_deflate.c>
 <FilesMatch "\.(ttf|otf|eot|svg)$" >
 SetOutputFilter DEFLATE
 </FilesMatch>
</IfModule>

Besides for that one last-minute hiccup, creating The Commonwealth‘s site was one of the most rewarding design experiences I’ve had all year. For the band, it was the right time to have an official website, and for me it was the right time at my experience level as a web designer to create it. It’s my hope that this website supports our goals as a band and is equal parts useful and entertaining to anyone who visits it, regardless of how connected we already are.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s