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:
- Chris McGarry website (Update March 2018: Now offline, sorry!)
- SoundManager 2
- Wufoo
- Colorbox (jQuery lightbox plugin)
- RGBa usage
- PageLime
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
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!
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 :)
First thing was.. right click, and there is no flash. This is a new chapter in web design. Fantastic!
Chris, did you consider changing your site’s name to JavaScript-Tricks ???
:)
Quick! Looks like http://js-tricks.com is available :p
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.
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.
The site is awful… the music, well… :-S
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!
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.
Really like the design, one of your best.
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.
Big congrats on this site Chris! You’ve inspired me to do a LOT more experimenting.
very nice site chris! I like the textured background :)
very nice site the transitions are awesome and really add to the user experience.
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).
That would be great. I really would like to see a screencast aboiut how to fix history and back button with ajax.
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.
How well do those header, section, nav, and footer tags work in IE?
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);
I enjoyed this one, great website. I thought most of the simple cms systems don’t support editing include files?
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.
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.
cool! , I wish jquery-tricks.com exist. hehe
looks like its really a flash website but its not
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!
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.
dude, im loving that site..
transitions really impressed me lol.. “oooh shiny” moment, but hell.. Kudos on that project, really like it.
Great video!
Love the easter egg touch!!!
Beautiful site. Functional, beautiful, and minimal.
Great stuff as usual!
Thanks Chris
Thats some sick stuff!! I like. Could you do more videos on jquery in the future? Keep up the good work…
weired, I just saw this post.I’m working on the same kind of site but in wordpress.Good job.
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”);
That’s a good thought. Probably fairly similar in selector efficiency thought.
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
Chris, of the work you’ve posted on here, this is your best yet. And my favorite design of 2010. Amazing stuff bud.
Has anyone triple clicked on the artist’s image yet ? :p
Yea I did, and i think its a bit to easy to triple click it since you dont have to do it fast.
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.
Hi. Can you share a code of this site? css, js and php files for studying? ^^
seriously?
wow great tutorial
thank you very much
would love psd to html for this!
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…..
You know, in html5 you can just enter or <script src="" without entering type="" same thing with style
Wow, this is really a great site… thank you very much for your walkthrough – very informative!
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.
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.
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
Thank you Chris, they are wonderful subject.
Stellar site Chris. Bravo.
I’m not sure if this site is in WordPress, but I recommend the GigPress http://gigpress.com plugin for managing upcoming shows.
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?
You might find this useful:
http://demos.flesler.com/jquery/scrollTo/
Look into jquery history plugin. I built a little AJAX content you can see here: http://dev.web2works.co.uk/ajax/
the pink is horrible
Awesome site and very useful walkthrough too, thanks!
waowww
Awesome site and very useful walkthrough too, thanks!
Am I the only one that found the “McGarry likes Peanut Chicken!” easter egg?
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!
Search engines can access all of the site’s content.
very nice Chris websie and very good article to learn how to stop background much .
thanks
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?
Also i noticed on my monitor 1600x 900 small Chris is a few pixels too low
Nice… really..
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.
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.
Nicely done. Who needs flash anyway? Lol!
Amazing site. Thank you for sharing.
I never would have found this artist if not for this article. I am buying the CD!
Great site and love the screencasts. Brilliant concept with this musician’s site. Simple but slick all in one.
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….
…I forgot…anyway both website and songs are very very good!
…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…;-)
@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 ;)
wow, this is seriously cool!!
you are the best … nice work!
This is great work!
Thank you Chris! educational as always!
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.
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
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.
Hey Chris,
pssssst: the submit button in the contact page disappears in Opera
check it out
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!
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.
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
Very cool stuff,
I am not just learning great tricks, but also I am also returning highly motivated back to my projects.
Thanks
music is cool too, :)
Great stuff Chris. Keep up the great work.
Just a heads up seems you forgot to fix the album refresh bug.
Chris! Your video refreshes itself everytime I resize my browser window in Firefox. :-(
My jaw is still on the floor. Truly amazing!
wow that what i’m talking about…
this is my favorite new site..
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!!
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.
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).