•  
     
    For the past 10 years or so I've been writing and recording songs. It was so much fun that I decided to build a website and share these recordings with anyone who might be interested.
    If you like the songs, please feel free to download them. If not, I hope they can at least join the setlist of irritating music used to blast at non-benevolent dictators as they're holed up inside of their compounds over the course of a bloodless coup.
    A secondary purpose of this site is to discuss another passion of mine: Web Development/Design. I work as a User Interface Engineer for Synchronoss Technologies. I'm very interested in UI Design, Web Standards, Best Practices, and new technology. I built this site with these things in mind. Please check out the "Technical Details" section below for an in-depth explanation of the thought processes behind the site. That stuff gets pretty geeky, so only check it out if you're really into it (as I am) or if you're suffering from insomnia (a few sentences should be enough to put you out like a light).
    If you'd like to contact me with comments, questions, feedback, or clever insults please send me an email at music@evanjackson.net. Thank you!
  •  
     
    Track
    JPlayer
    Download
    Track 1
    Track 2
    Track 3
    Track 4
    Track 5
    Track 6
    Track 7
    Track 8
    Track 9
    Track 10
    Track 11

Web Standards

The WorldWide Web Consortium (W3C) has developed a set of Web Standards and guidelines aimed at maximizing consistency of display, search engine optimization, accessibility, and general quality of code.

This site was designed using the best practices outlined by the W3C. It has passed validation for HTML5 and CSS3 using the W3C Validator. It was hand-coded and utilizes HTML5, CSS3, JQuery, JavaScript, ActionScript, Photoshop, and Illustrator.

HTML5 Powered with CSS3 / Styling, Device Access, Graphics, 3D & Effects, Performance & Integration, and Semantics Valid CSS!

Emerging Technology

HTML5 and CSS3 offer some exciting new features that promise to significantly change the landscape of web development.

There's always a balance to be struck between supporting past browsers and utilizing the cutting edge (HTML5 specifications still aren't finalized and though some modern browsers already support some of the features, older ones do not).

I used the JQuery JPlayer plugin to play the music on this site. It's a hybrid solution that utilizes HTML5 when the browser supports it and a Flash/ActionScript method when it does not. This allowed me to take advantage of some of the new features of HTML5 without alienating those using older browsers. Other HTML5 and CSS3 features that I've been using quite a bit lately include CSS Gradients, Box Shadow, and Media Queries.

I intend to integrate more HTML5 and CSS3 features as time allows.

Cross Browser/Device Compatibility

It's important to make sure your website is consistent across the different browsers as well as different versions of each browser. This site has been thoroughly tested in Firefox, Safari, IE7-IE9, and Chrome. Currently, I only have one outstanding issue that I'm working to resolve. It's in Chrome, which is unique in requiring about 90% of streaming content to download before it starts playing. This is bogging down the initial page load. Subsequent visits, which benefit from browser caching, work fine (it also works in Safari, which shares the Webkit engine).

Soon the majority of people will interact with the web though mobile devices. It has become very important to provide support for these various platforms. I currently use CSS3 Media Queries to load a custom formatted stylesheet for mobile devices such as the iPod and iPhone (for both portrait and landscape orientations). I'm working on a stylesheet for tablets and optimizing images for the new Apple Retina display.

CSS

CSS was revolutionary for web design. It allowed unprecedented control over the appearance of web pages and consistency across different browsers. This site was laid out purely through CSS.

CSS also allows you to "skin" a site so you can drastically change the look, feel and layout by dynamically loading a new stylesheet. This can be useful when offering a web application to multiple clients or supporting mobile devices such as iPhone or iPad. To see an alternate skin for this site, please click the "Load a new Style Sheet" button above

Some other very cool CSS techniques are Image Sprites, CSS Gradients, Box Shadow, Media Queries, and Sliding Door Buttons.

Sliding Door Buttons

Often, buttons are supplied as individual images: one for the standard state and one for the mousover. The sliding door css technique allows you to make scalable buttons (with a mouseover state) using live text and a single image. This minimizes resources and maximizes flexibility and efficiency.

This is the single image:

download button

Here are some examples of the button in action, using only the image above, live text, and some CSS:

image sprites

Image Sprites

Research shows that reducing the number of http requests is the most effective way to speed up the load time of your website.

Image Sprites combine multiple resources into a single file, minimizing the load on the server. You can then set the background image through CSS and crop as necessary.

JavaScript/JQuery

Originally, websites were little more than static online brochures. Gradually, they became much more dynamic and intereactive. JavaScript was very important in making this possible.

JQuery is, in my opinion, the most powerful JavaScript library available. It can assist you with everything from creating an image slideshow to fixing browser specific bugs. Much of User Experience design revolves around the logical, intuitive organization of content. JQuery UI offers some fantastic tools for this, including tabs, sliders, lightboxes, accordions, and much, much more. I'm a huge JQuery fan and I used it heavily on this site.

Speeding up your Website

Due to the unprecedented rise in mobile devices, the internet is approaching a point where it will have to deal with a serious bandwidth issue. Additionally, bandwidth is expensive and large, high traffic sites pay incredible sums of money to make their content available to the public. Making your site as streamlined as possible is important, and it will soon become absolutely crucial. Here are a few useful practices:
  • Optimize each image for maximum quality and minimum size. Choose your formats carefully. Use 24 bit png format only when necessary.
  • Place the CSS in the head and the JavaScript in the bottom of the body to create the perception of a faster loading page.
  • Use the Google hosted JQuery library. Spreading assets to another server enables parallel downloads. Just this step shaved almost 3 seconds off my page load time.
  • Combine artwork (Image Sprites) whenever it makes sense to do so. Cutting down on HTTP requests is key to speeding up your site.
  • Minimize/compress large CSS or JavaScript files.

First a word about User Interface Design

If you download an app from the iTunes store, you don't read a manual to learn how to use it. You can figure it out, because most feature good user interface design.

There are many aspects to user interface design (far more than I have space to discuss here). I'm going to focus on two: feedback and familiarity.

The best designed interfaces give users constant visual cues that provide clues on how to find what they want. Interactive elements almost always visually change when they are moused over...this tells the user "this does something." To take it a step further, it's good to give all interactive elements a consistent color scheme. This is simply another hint to it's function...the more hints you give the user the more likely they are to be able to effectively use the site.

The second element I want to discuss is "familiarity." Modern web applications have created an immediately recognizable vocabulary familiar to anyone who's downloaded anything from the iTunes store. When developing an interface for the songs, I tried to echo some of the look and feel of the iTunes interface. Most users are already familiar with it, so they immediately know how it works. Coming from a creative background, I was initially resistant to this notion. I felt that everything should be totally original. I've since come around to the feeling that there's plenty of room for creativity and innovation without always having to reinvent the wheel (and creating an unnecessary learning curve for the user).

 

First, a really boring story...

Music has always been extremely important to me. I spent countless hours during my teenage years laying in bed listening to records. I loved the process of discovering a great album, how there were songs that appealed to you immediately, and others that didn't but in time grew to become your favorites. Gradually, this fostered a natural curiosity: why do I like this song so much better than the others? Why is it so energetic/exciting? Why is is so catchy? These songs represent my humble (but heartfelt) meditation on some of these questions.

What I recorded this music on...

Almost all of the music on this site was recorded on a cheap Tascam portastudo 4-track cassette recorder. The last 3 tracks were recorded on a digital 8 track recorder that I found in a pawn shop.

I had a Line 6 Pod that I used for all of the guitar sounds. I also acquired a Zoom Rhythmtrack 123 drum machine. Hearing the term "drum machine" makes me cringe, but I felt that this one sounded very good and was quite easy to use. I worked hard to create the illusion of a real drummer…I listened to all types of music and tried to gain an understanding of how a drummer thought…how he rhythmically built dynamics and what his techniques were. I probably spent more time programming the drum machine than I spent on any other part of the recording process. Hopefully I did an OK job. The Rhythmtrack also offered synthesized bass, which I used frequently.

What I recorded this music with...

For guitars I used a Strat Plus for most of these songs, there's a Les Paul copy on some of these too. Both of those have since been sold, as I've come to the realization that the Telecaster is the greatest guitar ever. The last song was recorded on one that I put together myself from a whole bunch of different parts. Gotta love telecasters. When I didn't use the synthesized bass on the drum machine I used whatever cheapo bass I had lying around (mostly a Danelectro Longhorn). I also had this super cheezy casio keyboard that I bought for 10 bucks.

And in conclusion, another boring story...

For me, learning about songwriting coincided with learning about recording. My main goal was to make the music catchy and non-boring. For recording tips, I discovered Tape-Op magazine, which was fantastic. I learned about bouncing tracks to transcend some of the limitations of the 4-track and how to use a $20 marshall mini-amp to record really good bass sounds (well, as good as any of my sounds got). At the very least, I was having a heck of a lot of fun.

So that's that. None of these songs will be mistaken for a Mutt Lange production, but they represent a true labor of love for me. My hope is that someone else will enjoy them and find them to have some meager charm.