Simple Ways to Improve Your Composer Website

First impressions are impulsive, decisive, unfair perhaps, yet crucial to the day-to-day decision-making that occurs behind closed doors for independent producers and directors. When they’ve set out to find a new composer, they’ve got to quickly sort from hundreds of options and create a shortlist of 4 or 5 candidates whose “sound” could be ideal for their project (that is if they don’t already have someone in mind from a previous collaboration).

If the composer is fairly new to the game (and not relying heavily on word-of-mouth), it will be his or her demo reel that will ultimately determine whether they’re right for the job. But before they even click “play”, they’ve got to load up their website.

I would say this is where many aspiring composers will have lost the war before they even began the first battle. To put it simply, if your website takes a really long time to load or the presentation looks less than professional, chances are that director or producer will simply move on to the next name on their list.

I’m sure some will be a bit more patient and wait it out, but every extra second they spend waiting for your front page to load is an extra second they believe could have been used to check out another composer. And yes sure, internet provider blackouts, crappy Wi-Fi, and many other issues could hinder the experience, but don’t let that be an excuse.

To give yourself a fighting chance of making a good first impression, Make sure you do everything you can to provide a professional experience for your potential employers. You are basically welcoming these esteemed guests into your home, so you’d want to make sure they’re not locked out of the house, or have to hurdle through a messy living room, before they even get to sit down and listen to your ideas. They’ll want to be interested in you before they’re interested in your music.

So with that said, below I’ve outlined some simple and effective things you can do to help improve your website’s overall performance and presentation. Although I’ve written this primarily for aspiring composers who have started or are thinking about building their personal website, perhaps those who are already active in the industry might also find these useful. Let’s get started!

Note: The web builders I’ll mostly be covering include WordPress and Squarespace. This is not to say they are the best options out there for composers, but they are the ones I work with the majority of the time. There are plenty of great website builders our there today, many of which share similar features, so be sure to browse around and find what works with your taste and budget.

IMAGE RESIZING & COMPRESSION

Goal: Leveraging high image quality with lower image file size to improve page speed. Normally this is a primary cause of slow-loading websites, so you’d want to make sure your images are optimized for web and leave enough space for the most important thing… your music.

Here’s what I usually aim for:

Image size: of 1920 x 1080 pixels (height based on your preference)
Image resolution: 72 DPI (dots per inch)
File type and size: under 500 KB, JPG

Retina display for logos and other images: newer Mac computers and many PCs will have what we generally call “retina displays”, which is basically a high definition display with 2x the amount of pixels compressed into the same canvas.

This is usually the case if you have a brand logo or identity, as you’d want to make sure your visuals look super crisp on newer screens, so double check your site to see if you can upload retina images. An example of what your web builder would request under your Theme Settings, is a logo (usually a PNG file) at twice the size of the canvas it is occupying in pixels:

Original could be 300 x 100 px
Retina could be 600 x 200 px for a high-res display

Note: Website builders such as Squarespace (a popular choice among composers nowadays) will already do most of the image optimizing for you whenever an image is uploaded, so that will save you some time. However, their compression tool does not always offer the best results so be conscious of that.

Other builders such as WordPress (my personal preference, due to design flexibility and wide selection of good-looking themes), offers a variety of free plugins that automatically reduce your images when you upload them to your Media Library, but I’d recommend trying it out manually on Photoshop or perhaps a free online image compression tool such as Toolur.

Examples:

Here’s how you can compress your images in both Photoshop and the free online tool, for those who want to try it out:

I’ll be compressing this JPG image from 2.5 MB to 248 KB while retaining 90-100% of its original quality. Feel free to workshop this with your own images.

Toolur

Go to http://compressimage.toolur.com/
Upload your image (can be 144 or 300 dpi as well for those with hi-res photos)
Compression method: C
Image quality: 90%
Compression type: Normal
Resize to: W=1920 H=0 (auto)
Select “Compress Image”
Successfully compresses image and can now Download

Photoshop

Open image in Photoshop
Top menu select Image > Image Size
Change Width to 1920 Pixels, Height will adjust automatically
Resolution = 72
OK
Export > Save for Web (command + W) > Preset (top right) = JPEG High or Medium > Save
Image size should now be dramatically reduced and good to go!

UPLOADING AUDIO FILES

Goal: Leveraging audio file size with sound quality to improve page speed and provide a good audio experience.

I think the debate still lingers in our industry, as to whether composers should be uploading their audio files directly on their websites or simply embed a playlist from 3^rdparty music streaming platforms (such as SoundCloud, Bandcamp, Apple Music, YouTube, etc.).

There isn’t a right answer to this and it really comes down to personal preference. In my case, I’ve tried to combine the best of both features to improve the listening experience on my site, and use my design abilities to bring some brand consistency.

I think it’s become common practice to avoid uploading complete albums or 5-minute cues per style (i.e. one for adventure, horror, hybrid/electronic, comedy, etc.), as it could dramatically slow down your website. Not to mention the dreaded auto-play. So here are some tips I could offer:

If you are uploading directly to your website:

Keep your cues to under 1 minute
Keep your file sizes under 2 MB if possible (you might have to resort to MP3 files, though AIFF and WAV files could work as well)
Don’t upload more than 10 individual cues onto one page (this will potentially make your page load a lot slower)
If you are using Squarespace, the platform already comes with a solid audio player, and I’ve seen plenty of composers use this as their go-to for showcasing their work. Their available music templates is a great starting point for composers.
I normally would not recommend uploading entire soundtrack albums to your page unless you’ve upgraded your web hosting to a dedicated server to optimize page speed. Not to mention, there’s a good chance directors and producers don’t have the time to listen to your entire body of work, so select your cues carefully with the project you’re applying for in mind.
If you are using WordPress, try using a music player plugin such as WavePlayer (although you currently have to pay for it, it definitely looks and works a lot better than many of the free plugins on WordPress, but feel free to those out). WordPress also has some interesting music themes that come with their own built-in audio players.

Customization settings for the WordPress audio plugin, WavePlayer. In this case, I’ve stylized the sound waves to match my brand colors.

The plugin also allows the addition of small cover images and a few other features to better stylize your demos.

If you are embedding a track or playlist from a 3^rd party:

Generally, this is a better option for composers who want to showcase an audio reel with different styles, with the only real risk being that the 3^rd party “could” go out of business (close call, SoundCloud). However, by embedding a playlist from an external source you’ll be saving plenty of MBs and will likely improve the page loading speed, as your website would only have to load the script information (HTML, CSS and additional code), and not the individual audio files.

I would then advise to go one step further to stylize your SoundCloud or Bandcamp playlist to fit your website’s overall branding:

SoundCloud

SoundCloud is one of the most popular audio streaming platforms out there today, and many composers prefer to embed complete albums or demo reels directly into their websites.

A small feature that some may overlook, however, is that you can actually customize the colors of the sound waves and play button to better suit your website’s palette, and not have to use their default orange. Perhaps it’s a less crucial element for composers, but it could help the overall look of your page.

The same can be done with other audio platforms such as Bandcamp, however the styling options are somewhat limited to a handful of colors, so I’ll usually stick with shades of white and dark grey.

WEBSITE RESPONSIVENESS

Goal: Providing a professional viewing experience for different screen sizes.

We can only assume where and when a director or producer will be sitting down for a few minutes (maybe less) to open your email and click through your website. So the best thing you could do is make sure you provide a decent enough experience, whether they listen to your reel on a desktop, laptop, tablet, or phone. The goal is to get them safe and sound and without interruption, to your music.

Whenever I work with a new client, I’ll normally joke and mention that they’ll be needing four websites, not one. They’ll usually work up a nervous smile and start hiding their wallets. Of course, I end up explaining that it’s always good to spend a little extra time tweaking web layouts (Squarespace, WordPress, Wix, doesn’t matter) so that their brand is shown in the best possible light, regardless of the screen size.

This is very much like in the music industry, where producers and engineers will try to export tracks that can deliver the best possible audio experience, regardless of where the listener is (at home, in the car, on a plane, or in the theatre).

I’d say about 75% of the themes offered on web building platforms have been designed or updated for responsive viewing. Though very much like the latest sample libraries in your studio, you’ll still want to spend time tweaking the raw files to get the results you want.

I would encourage you to test your page on different devices or go on free sites, such as http://mobiletest.me/, to view how your current website looks on smaller devices.

Some quick tips I can offer for those working on their own sites:

Don’t aim for a 100% perfect viewing experience on every possible screen size. Small bits of unwanted styling and random quirks are known to arise with responsive websites (such as a bit of extra space where you didn’t want, or an image getting cut off). However, just make sure the most important elements are displayed properly, such as your audio demos, bio and contact, CV, and other links (i.e. YouTube, IMDb).
Avoid video auto plays on tablet and phones. Most of us already know that having your music auto play when someone enters your site can cause more harm than good, and I would say video can have a similar effect if not done properly. Be careful where you place video backgrounds for effect, or even how you embed your video demo reel, which is probably one of the most crucial selling points for your music.
Make sure newsletter signup boxes can be viewed neatly on mobile. I’ve seen plenty of sites where the newsletter box is displayed, but people couldn’t enter their names or emails because it was placed outside of the responsive canvas.
Since mobile devices are obviously less powerful than laptops and desktops, try to avoid uploading large files onto a single page. For an extreme example, don’t have 5 single uploaded MP3 demos, a video embedded from YouTube, a photo gallery, and a 3 MB PDF of your credit list/resume on the same page. That’s why we have links.

SEO – SEARCH ENGINE OPTIMIZATION

Goal: Display the correct information when people search for you.

This is a step that is often overlooked, primarily because it takes a little bit of time to understand what SEO really is, but also because composers don’t think it’s necessary at the time.

Web builders such as Squarespace, will have a section for basic SEO settings where you can input simple, yet crucial information for how people will find your site. WordPress and other builders have decent free plugins (i.e. Yoast SEO) as well, and the settings you’ll want to look out for include:

Page Title: Include your actual name to be used in project credits
Meta Description: Basically your elevator pitch in 1-2 sentences
Keywords: You could use your name and your profession (i.e. film composer, post-production engineer, etc.)

Make sure the keywords you select are also displayed in your title, meta description, and pretty much in every page of your website. But don’t overdo it with simply copying and pasting.

In reality, you’ll be doing most of the inquiring and searching, but nevertheless it’s a good idea to make it easy for your potential employers, or fans of your music, to find your work. SEO rankings normally improve with longevity and frequent updates.

In essence, if Google notices updates and new content being uploaded to your website over time (new music, behind-the-scenes, blogs), the higher your website will be ranked on local searches (geography plays a big part in this, so don’t bother fantasizing about showing up on the first page for “film composer” in Los Angeles if you’re located in Northern Europe).

SHOULD YOU HAVE A ONE-PAGE OR A MULTI-PAGE WEBSITE?

Goal: Quality over quantity.

Most composer’s websites usually include the following pages: Home, About/Bio, Demos/Reel, Credits/CV, and Contact. More experienced composers will have an active newsletter or blog, and often a fleshed out portfolio section with individual pages for each film, TV, or video game project he or she has worked on.

I used to have a theory that the better the composer, the crappier the website (this is why John Williams’ is non-existent!). Joking aside, it’s been a great boon for all of us artists to be able to connect on a daily basis with the lives of the A-list composers we see and hear on our favorite films, TV shows, and video games. Part of that experience includes well-thought out websites from our favorite composers who have now made a habit of sharing and connecting with us through their respective blogs, videos, and social communities.

So, should you have multiple pages or a one-page landing to present your brand?

My instincts always tell me less is more, which is why I’ve opted for a single landing-page website to display my work as a composer. This is aided by the fact that I’m not as experienced in the industry, so it makes sense to me to only share what I think showcases variety and some quality to make the website experience enjoyable.

From a web design perspective, this depends on how much content the website “needs”. If you have enough credits and albums to justify a larger portfolio section, go for it!

I would only suggest to make this leap only if all your projects are on par with each other in terms of execution and musical quality, as you wouldn’t want a director or producer to land on that obscure student film you did 15 years ago in college (in which the soundtrack didn’t really showcase you at your best).

Links and buttons to external pages can also help reduce your page size (and also avoid endless scrolling on mobile devices). For example, if your credit list on IMDb is virtually an exact match of your professional resume/CV, then perhaps you wouldn’t need a page dedicated to your credit list, and can simply link people to your IMDb page.

Again, this depends on your personal preferences, I would just recommend thinking about where you can save on visual space and avoid duplicating content where there isn’t a need for it.

Closing Thoughts

I very much still think like a composer when I work on websites, as I usually ask myself questions such as:

What’s my main theme?
What will be my palette of choice? (instead of instrumentation, I’m thinking about colors that compliment each other)
Where can I trim the action to not overpower the overall experience? (perhaps the site has too many images, images on top of images, too much text… or as the film Amadeus put it, “too many notes?”)
What does my client want to achieve? (style over substance?)
What is my budget and how much can I invest in extra elements?
How can I present the most important components in the best way possible? (i.e. if it takes 3-4 clicks before someone reaches your demo reel, you’re probably wasting their time)

As you work to better improve your business and your brand as a professional composer, it’s good to keep in mind that the quality of your music should somehow translate into a pleasant visual experience, for those who already enjoy your work, or are at the brisk of considering you for that next job. Even if the experience only lasts a few minutes, it’s important to make a good impression.

I hope you enjoyed reading this and hopefully you’ve picked up some useful tips to help you along the way. Feel free to let me know in the comments about what kinds of hurdles you’ve encountered when creating your personal website, and what process have you gone through when selecting cues for your demo reel. Not to mention any cool plugins and features you’ve used to elevate your own website. Would love to hear your thoughts!

Until next time,
Isaias

Isaias Garcia

Web Designer. Graphic Designer. Composer.