#84: Site Walkthrough of chris-mcgarry.com

I built a site for a musician friend of mine who is putting out a new album. Clearly having playable tracks is important, but the classic issue of having those tracks stop when a new page is loaded comes up (like Screencast #81). This time instead of using AJAX, all the content on the entire site exists on one page, and things are shuffled around through jQuery animations. The result is a somewhat Flash-like website, but without all the pitfalls of Flash.

Links from Video:


  1. User Avatar
    Paul Martin
    Permalink to comment#

    Funny I thought of doing the same thing I am currently working on an artist site and I am using the same approach. I have built 5 musician sites and this comes up over and over again. I’ll be packing this design up into a solution why re-invent the wheel over and over again.

  2. User Avatar
    That Graphic Guy
    Permalink to comment#

    I just checked out the website… Only one word comes to mind. WOW! ok two more FREAKING AWESOME!

    I’m looking forward to the screen cast once I get home and can view it.

    Great job!

  3. User Avatar
    Permalink to comment#

    I’m impressed, very impressed, looking at the design. Impressive. I also appreciate you’re solutions regarding content.

    But I’m most of a web app guy and I just don’t understand why no xml/json, xml transformations instead of pre-prepared sections.

    Kepping your page’s non-curent content in a form of xml or json (on the page, not served by AJAX) gives you a lot of push and flex when it comes to serving and reusing them (like using AJAX localy); using transformations helps your page logic even more. And you get a clean html structure for your page :)

  4. User Avatar
    Permalink to comment#

    First thing was.. right click, and there is no flash. This is a new chapter in web design. Fantastic!

  5. User Avatar
    Permalink to comment#

    Chris, did you consider changing your site’s name to JavaScript-Tricks ???


  6. User Avatar
    Permalink to comment#

    The site looks great, I’m very impressed!

    I checked it out in a bunch of different browsers and it looks good in all of them with the exception of Opera. I’m seeing some odd window scrolling issues using 10.51 in XP, particularly on the home page.

  7. User Avatar
    Bryan Kwon
    Permalink to comment#

    Super!! The transition animation are just fantastic. yes, I had to do the right click :D;;;
    I am a bit concerned about performance issue though if animation gets more complicated.

  8. User Avatar
    Permalink to comment#

    The site is awful… the music, well… :-S

  9. User Avatar
    Permalink to comment#

    Great. Much more style than … but saw this one a few days ago: http://www.illlendyouthedog.com/?work

    As always very inspiring and again thanks for sharing. Learned in the past so much on your site! Cheers!

  10. User Avatar
    Permalink to comment#

    Nice but simple site….

    I noticed you seem to love that greyish black gradient.I’ve seen it in atleast 3-4 sites if not more.

  11. User Avatar
    Richard Dale
    Permalink to comment#

    Really like the design, one of your best.

  12. User Avatar
    Richard Dale
    Permalink to comment#

    Chris out of interest, do you not support IE6 now at all? or does this depend on client requirements / the type of site?

    I just wondered what the feeling was?

    I’ve started to say in my quotes, basic support only for IE6.

  13. User Avatar
    Permalink to comment#

    Big congrats on this site Chris! You’ve inspired me to do a LOT more experimenting.

  14. User Avatar
    Mike Madison
    Permalink to comment#

    very nice site chris! I like the textured background :)

  15. User Avatar
    Permalink to comment#

    very nice site the transitions are awesome and really add to the user experience.

  16. User Avatar
    Permalink to comment#

    Fantastic looking site! It would be nice if the back button worked throughout the site, as long as its filling the back history with all those #tags anyway.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Yeah it definitely would. I should get on that. I’ve literally never had any luck implementing that with jQuery, but it’s definitely possible and there is a plugin that I want to try that I hear good things about (BBQ).

    • User Avatar
      Permalink to comment#

      That would be great. I really would like to see a screencast aboiut how to fix history and back button with ajax.

  17. User Avatar
    Permalink to comment#

    Wow, very cool. Oddly enough I just got a contract to do a local artist’s website. I had the same concern with the music tracks you mentioned, and it looks like I need to rethink my strategy.

  18. User Avatar
    Permalink to comment#

    How well do those header, section, nav, and footer tags work in IE?

  19. User Avatar
    Permalink to comment#

    This is great! I actually used something like this for my personal site which I had to create for a web design class. I’ve looked at jquery for maybe two hours total but I figured out I could have 90% of the site on one html file. Absolutely amazing! I was actually surprised at how easy it was. I just hid the page divs and then used a little something like this.

    $(“.inclasspagelink”).click(function(event) {
    $(“.welcome, .updates, .homeworklinks, .services, .blog, .about, .links, .contactform”).fadeOut(“slow”);
    setTimeout(function() {
    }, 800);

  20. User Avatar
    Greg Babula
    Permalink to comment#

    I enjoyed this one, great website. I thought most of the simple cms systems don’t support editing include files?

  21. User Avatar
    Permalink to comment#

    Seriously Chris, this is one of the coolest music websites I’ve ever seen! This is perfect, clean and simple. Good job man, you are a great webdesigner.

  22. User Avatar
    Permalink to comment#

    Chris, excellent job on this musician site. Its very clean and creative.

    About your idea of the “edit this” for the page updates…is there anyway you could do a screencast or tutorial about how to do that. I’ve had that idea for awhile now to use on a site I’m working on for a friend, but have no idea how it would work…since I’m still learning web development. It would be greatly appreciated…or even if there is a walkthrough somewhere online you can point me to.

  23. User Avatar
    Permalink to comment#

    cool! , I wish jquery-tricks.com exist. hehe
    looks like its really a flash website but its not

  24. User Avatar
    Permalink to comment#

    Wow, this is really impressive! I’m amazed that there’s no flash on this site, and all the animations move so smoothly. This is really a great site! Kudos!

    Did notice that the “back” button doesn’t do anything. I think you’ve covered this issue in a previous post?

    I always learn a great deal through your blog posts, and screen casts! Thank you, for taking the time to do these!

  25. User Avatar
    Permalink to comment#

    You could (if you wanted to) save a bit by compressing the js, css files and/or serving them from less files(like you said).
    The website looks cool btw.

  26. User Avatar
    Greg McAusland
    Permalink to comment#

    dude, im loving that site..

    transitions really impressed me lol.. “oooh shiny” moment, but hell.. Kudos on that project, really like it.

  27. User Avatar
    Permalink to comment#

    Great video!
    Love the easter egg touch!!!

  28. User Avatar
    Permalink to comment#

    Beautiful site. Functional, beautiful, and minimal.

  29. User Avatar
    Permalink to comment#

    Great stuff as usual!

    Thanks Chris

  30. User Avatar
    Permalink to comment#

    Thats some sick stuff!! I like. Could you do more videos on jquery in the future? Keep up the good work…

  31. User Avatar
    Permalink to comment#

    weired, I just saw this post.I’m working on the same kind of site but in wordpress.Good job.

  32. User Avatar
    Permalink to comment#


    The site is awesome! It was way intriguing and fun and to use.

    One quick question. In your JS file, you call the removeClass on every anchor link in the nav. Wouldn’t it be a little more efficient to simply seek the element by the class name instead?

    Something like:


    • User Avatar
      Chris Coyier
      Permalink to comment#

      That’s a good thought. Probably fairly similar in selector efficiency thought.

  33. User Avatar
    Permalink to comment#

    Great screencast! Thanks Chris.

    I would definitely be interested on how you implement the basic CMS for McGarry to be able to change the show information himself. Having a easy-ish way to make some custom little admin pages like that would be very useful to me.


  34. User Avatar
    Permalink to comment#

    Chris, of the work you’ve posted on here, this is your best yet. And my favorite design of 2010. Amazing stuff bud.

  35. User Avatar
    Vassilis Mastorostergios
    Permalink to comment#

    Has anyone triple clicked on the artist’s image yet ? :p

    • User Avatar
      Permalink to comment#

      Yea I did, and i think its a bit to easy to triple click it since you dont have to do it fast.

  36. User Avatar
    Permalink to comment#

    wow, amazing. Almost all completely over my head, but thanks to you I’m learning and have started working on a CSSed site. I am an old school graphic designer and am having a very hard time leaving tables and frames behind… I’d love to see a demo of a real, working, attached to the bottom of the page footer.

  37. User Avatar
    Permalink to comment#

    Hi. Can you share a code of this site? css, js and php files for studying? ^^

  38. User Avatar
    Permalink to comment#

    wow great tutorial
    thank you very much

  39. User Avatar
    Permalink to comment#

    would love psd to html for this!

  40. User Avatar
    Bert de Vries
    Permalink to comment#

    I really love this screencast. Great site with great jQuery stuff. Thanks a lot for sharing!

    Greetings from Holland

    ps. i also enjoyed the video of you playing the banjo :). I wondered before: where do you get the time…..

  41. User Avatar
    Permalink to comment#

    You know, in html5 you can just enter or <script src="" without entering type="" same thing with style

  42. User Avatar
    Permalink to comment#

    Wow, this is really a great site… thank you very much for your walkthrough – very informative!

  43. User Avatar
    Christopher Chance
    Permalink to comment#

    Excellent screencast. I have looked all over the web and never found anyone like you for doing such amazing screencasts. Very practical and useful tips. JQuery is amazing once you know where to blend in the various plugins and troubleshoot those minor bugs.

  44. User Avatar
    Dominic Scimeca
    Permalink to comment#

    Very nice screencast. Definitely a beautiful clean design that takes advantage of the limited information you had and highlights it in a fun way.

    Do you see it as an issue that there is no progressive enchantment is this model? Also, the support for ie6 is not there as well. Have you segmented the potential market well enough that you can always count on javascript and modern browsers?

    if you go back to the preventDefault() idea and load in the correct overriding css files with a php switch function depending on the web address you could correct for javascript being off pretty easily. Not to mention supersleight.js and ie7.js etc for ie compatibility.

  45. User Avatar
    Permalink to comment#

    great work … you really nailed the concept, not to mention the brand image.

    I stretched the window over a couple of screens and who should appear waiting in the wings, but the condensed Up Comings Shows div from the home page.

    Then if you click back to home it animates the whole way across the screen. some 800px from the look of it.

    If you were to increase that to say 1600px would it take twice as long to animate back into place?

    Gives me some ideas for easter eggs also

  46. User Avatar
    Permalink to comment#

    Thank you Chris, they are wonderful subject.

  47. User Avatar
    Jeff Campana
    Permalink to comment#

    Stellar site Chris. Bravo.

  48. User Avatar
    Jason Pelker
    Permalink to comment#

    I’m not sure if this site is in WordPress, but I recommend the GigPress http://gigpress.com plugin for managing upcoming shows.

  49. User Avatar
    Mike Hanyzewski
    Permalink to comment#

    I really like the site, and have been in the process of developing a similar site, one of the problems I have run into is the ability to backwords using the back button. Is there a reason that this does not work or does anyone know of a work around?

  50. User Avatar
    Permalink to comment#

    the pink is horrible

  51. User Avatar
    luke burford
    Permalink to comment#

    Awesome site and very useful walkthrough too, thanks!

  52. User Avatar
    Permalink to comment#

    Awesome site and very useful walkthrough too, thanks!

  53. User Avatar
    Permalink to comment#

    Am I the only one that found the “McGarry likes Peanut Chicken!” easter egg?

  54. User Avatar
    Permalink to comment#

    This site is AWESOME. I also was surprised when I right clicked and Surprise NO FLASH.

    The only question I have is, what does this method do for search engines? The main reason I try to avoid flash for content is because of the search engine pitfalls. Of course, this at least should work in iPhone and iPad which is a huge bonus over flash.

    I think you just started a 2010 trend!

  55. User Avatar
    Web Design & Development
    Permalink to comment#

    very nice Chris websie and very good article to learn how to stop background much .


  56. User Avatar

    Ha, Hate to tell ya chris I’ve been sick for about three weeks and a friend for well over a month now wonder if it’s the same cough?

    • User Avatar

      Also i noticed on my monitor 1600x 900 small Chris is a few pixels too low

  57. User Avatar

    Nice… really..

  58. User Avatar

    I don’t know, Chris, it’s good looking and everything but it doesn’t work without JS. Also animations queue up (can be solved easily) and there are too many calls for .js files.

    I just finished a website that works about the same way:
    There’s a single index.php and the content is in various html files that are loaded server-side with include() or via ajax if JS is active. By combining the JS and gzipping the main page I saved a few seconds in load.

    A while ago I did bfred.it that works without reloads, but it isn’t nearly as polished as my latest work.

  59. User Avatar

    Awesome site Chris! Love the use no flash. Do you know if there is anyway to prevent users from downloading the mp3s by pasting the location of the song into their browser?

    • User Avatar
      Benjamin Mayo

      No, there isn’t. I know people are used to protecting content by wrapping it in a Flash container, but that’s also a myth. Using Firebug, it’s too easy to take any content, including the music from flash files.

      HTML5 methods make it slightly easier, but it’s still not a downside.

  60. User Avatar
    Cre8ive Commando

    Nicely done. Who needs flash anyway? Lol!

  61. User Avatar

    Amazing site. Thank you for sharing.

    I never would have found this artist if not for this article. I am buying the CD!

  62. User Avatar

    Great site and love the screencasts. Brilliant concept with this musician’s site. Simple but slick all in one.

  63. User Avatar

    What about if someone has javascript deactivated?
    I ask you this as I’m starting right now to study javascript and one of the first thing I read in the book was to separate content and behaviour, so that, also if you don’t have javascript on, you can use the website anyway.
    I read that it is possible that someone doesn’t have js on for security issues. Maybe the book is not updated…or these kind of things have to be considered yet? I ask you as I’m very new and I want to build a website with some animation and I wish to do the best choice between flash and js,as the website should be used by a lot of people. Sorry for my english….

  64. User Avatar

    …I forgot…anyway both website and songs are very very good!

  65. User Avatar

    …and I’m not federicoB, even if I have the same name, I’m from the same country and posted, I think, almost the same comment…;-)

  66. User Avatar

    @federico: haha, Italy?
    Yes, that book is updated. Content (HTML), presentation (CSS), and behavior (JS) must be separated, as they are in McGarry’s website. That alone, though, doesn’t make the website usable with either CSS or JS disabled.
    To achieve that, you need to develop in levels: first make a usable website using only HTML, then style it with CSS, and only then enhance it with JS.

    If you can, avoid Flash; nowadays it’s only being used for videos playback, games and advertising.

    But don’t believe me, ask Google and learn more about it. =)

    Your English is good ;)

  67. User Avatar
    Kam C

    wow, this is seriously cool!!

  68. User Avatar

    you are the best … nice work!

  69. User Avatar
    Aaron Mc Adam

    This is great work!

  70. User Avatar

    Thank you Chris! educational as always!

  71. User Avatar

    I just discovered your site while surfing. These screencasts rock, they give your site that extra amazing edge.I feel like the invisible man inviting myself in a hot design studio to observe.

  72. User Avatar

    hi this is my first post and I am a big fan of your site since I found it
    I’ve noticed that in the last videos are using this statement

    <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    please could you explain to use it …?
    I think by supucicion logic that has to do with html5
    use as
    thanks from now
    I was unable to see the entire site but every time I can I spend time to learn and always find new and useful imformacion for me

    you are the best … nice work!

    • User Avatar
      Chris Coyier

      It allows older browsers that don’t support HTML5 to allow the CSS to style those elements. Like footer { background: red; } in IE from a CSS file won’t work unless you apply this.

  73. User Avatar

    Hey Chris,
    pssssst: the submit button in the contact page disappears in Opera
    check it out

  74. User Avatar

    nice work!!

    I was wondering if it’s possible to write a few comments on the Javascript code in mcgarry.js – at the least the first half where functions and variables are set.


  75. User Avatar

    Finally, got some time to spend some quality time with your latest podcasts. This one in particular really helped me understand jQuery and js overall. Thanks for your time. Time to donate.

  76. User Avatar
    Patrycjusz Różański

    Hi Chriss

    Need help from anyone. I have build a web on Your instructions but still have a problem with url saving …

    Test is hire http://www.seo.svajs.pl/test/ can You help or anyone?


  77. User Avatar

    Very cool stuff,
    I am not just learning great tricks, but also I am also returning highly motivated back to my projects.


  78. User Avatar
    Permalink to comment#

    music is cool too, :)

  79. User Avatar
    Permalink to comment#

    Great stuff Chris. Keep up the great work.

  80. User Avatar
    Permalink to comment#

    Just a heads up seems you forgot to fix the album refresh bug.

  81. User Avatar
    Permalink to comment#

    Chris! Your video refreshes itself everytime I resize my browser window in Firefox. :-(

  82. User Avatar
    Permalink to comment#

    My jaw is still on the floor. Truly amazing!

  83. User Avatar
    Diego Becerra
    Permalink to comment#

    wow that what i’m talking about…
    this is my favorite new site..

  84. User Avatar
    Mike Lannen

    This is a super OCD style comment, however on the CONTACT page: http://chris-mcgarry.com/#contact if you click a PDF it should maybe open in a _blank window so it doesn’t stop the music from playing? Or even come up in a lightbox? Just a suggestion. Really awesome tunes and even cooler website!!

  85. User Avatar
    Mike Lannen

    There also does not appear to be a SUBMIT button on the http://chris-mcgarry.com/#contact page? I am in Google Chrome (v. 20) on my Mac.

  86. User Avatar
    Permalink to comment#

    If you ever get the chance, it would be great to see how you might adapt this site to responsive web principles. I always found the chris mcgarry website extremely clever, and it was an interesting evolution in design that seemed to be overshadowed when mobile browsing blew up. I think having such a controlled experience might work wonderfully on a mobile device (very app like).

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.