Grow your CSS skills. Land your dream job.

#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:

Comments

  1. 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.
    Cheers

  2. 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. Ulyses
    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. Permalink to comment#

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

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

    :)

  6. 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. 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. Emanuele
    Permalink to comment#

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

  9. Tom
    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. Akshay
    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. Really like the design, one of your best.

  12. 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. Permalink to comment#

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

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

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

  16. Eric
    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.

    • 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).

    • Bruno
      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. 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. Noah
    Permalink to comment#

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

  19. Dallas
    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() {
    $(“.inclasslinks”).fadeIn(400);
    }, 800);

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

  21. 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. Seth
    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. arnold
    Permalink to comment#

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

  24. Christian
    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. 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. dude, im loving that site..

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

  27. Great video!
    Love the easter egg touch!!!

  28. Stephen
    Permalink to comment#

    Beautiful site. Functional, beautiful, and minimal.

  29. Permalink to comment#

    Great stuff as usual!

    Thanks Chris

  30. 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. Permalink to comment#

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

  32. Chris,

    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:

    $(“.current”).removeClass(“current”);

  33. 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.

    Cheers,
    Andrew

  34. Miguel
    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. Has anyone triple clicked on the artist’s image yet ? :p

    • 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. NewWaveDave
    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. Chifu
    Permalink to comment#

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

  38. amine
    Permalink to comment#

    wow great tutorial
    thank you very much

  39. would love psd to html for this!

  40. 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. Jay
    Permalink to comment#

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

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

  43. 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. 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. 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. Thank you Chris, they are wonderful subject.

  47. Stellar site Chris. Bravo.

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

  49. 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. ben
    Permalink to comment#

    the pink is horrible

  51. Awesome site and very useful walkthrough too, thanks!

  52. waowww
    Awesome site and very useful walkthrough too, thanks!

  53. Permalink to comment#

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

  54. 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. very nice Chris websie and very good article to learn how to stop background much .

    thanks

  56. Jerm

    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?

    • Jerm

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

  57. Nice… really..

  58. 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:
    http://www.hotelteti.com
    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. Mike

    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?
    Thanks

    • 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. Nicely done. Who needs flash anyway? Lol!

  61. Anthony

    Amazing site. Thank you for sharing.

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

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

  63. federico

    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. federico

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

  65. federico

    …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. @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. Kam C

    wow, this is seriously cool!!

  68. you are the best … nice work!

  69. Aaron Mc Adam

    This is great work!

  70. Thank you Chris! educational as always!

  71. oli

    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. Hansel

    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>
    <![endif]-->

    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!

    • 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. habab

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

  74. 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.

    Thanks!

  75. 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. 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?

    B/R

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

    Thanks

  78. music is cool too, :)

  79. Kevin
    Permalink to comment#

    Great stuff Chris. Keep up the great work.

  80. Permalink to comment#

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

  81. Permalink to comment#

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

  82. Nick
    Permalink to comment#

    My jaw is still on the floor. Truly amazing!

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

  84. 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. 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. ADR
    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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".